Don't want to read at night , Did this heartbeat effect , Mainly used CSS3, Also review by the way .

First up html structure , The structure is very simple
<div class="heart"> <div class="topLeft"></div> <div class="topRight"></div> <
divclass="bottom"></div> </div>
Three div The goal is to adjust the border to ? shape ~
CSS The structure is as follows :
*{ padding:0; margin:0; } body{ background-color: black; }
/* When the scaling effect is achieved, you can operate on the parent element */ .heart{ margin:100px auto; width:200px; height:200px;
position: relative; animation-name: shake; animation-duration: 0.5s;
animation-iteration-count: infinite; } .heart div{ /* Find all the same child elements through the parent element */ width:
100%; height:100%; background-color: pink; position: absolute; /*
It must match the relative elements for absolute positioning */ /* Absolute positioning relative to parent element */ /* Out of document flow */ animation-name: shadow;
animation-duration: 0.5s; animation-iteration-count: infinite; } .topLeft{ /*
Pan first Rerotation */ transform: translate(-100px,0) rotate(-45deg); } .topRight{ transform
: translate(100px,0) rotate(45deg); } .bottom{ transform: translate(0,100px)
rotate(45deg); } .topLeft,.topRight{ border-radius: 105px 105px 0 0 ; /* Upper left Upper right
Bottom left lower right */ } /* animation : Define a keyframe Call this animation for the element */ /* Keyframes Effect of each step */ @keyframes shake{
0%{ transform:scale(0.9,0.9); /* Scale the current effect */ } 100%{ transform:scale(1.2,1.2);
} } @keyframes shadow{ 0%{ box-shadow: 0 0 0 pink; } 100%{ box-shadow: 0 0 50px
pink; } }
<>CSS3 2D transformation transform

Elements can be moved , zoom , stretching , turn , Elongate

* translate() transform:translate(50px,100px)
Bottom right is positive , Negative on top left

* rotate() transform:rotate(50deg)
Clockwise rotation

* scale() transform:scale(2,4)
According to the magnification of width and height

* skew() transform:skew(30deg,20deg)
Make element follow X axis ,Y Axis flip given angle

* matrix()
matrix() Methods 2D Combining transformation methods .
matrix() Method requires six parameters , Include mathematical functions , Allow you : rotate , zoom , Moving and tilting elements .
<>CSS3 @keyframes rule

stay CSS3 Create animation in , Need to learn @keyframes rule
To enable animation to be displayed on the page , Three key points

* The name of the animation needs to be specified
* The length of animation needs to be specified
* Element to call animation name
<> Animation properties

* animation Shorthand attributes for all animation attributes
* animation-name regulations @keyframe name
* animation-duration Specify the time for animation completion
* animation-iteration-count Specify the number of times the animation is played
Default is 1,infinite: Unlimited playback
* animation-timing-function Speed curve of specified animation animation-timing-function:linear;
// Same speed from start to finish animation-timing-function:easy;// default , Speed up from low speed , Slow down before the end
animation-timing-function:ease-in;// Animation starts at low speed animation-timing-function:ease-out;
// Animation ends at low speed animation-timing-function:cubic-bezier(n,n,n,n)
* animation-direction Define whether the animation should take turns playing backwards
normal: Default , Normal playback
alternate: Reverse play in turn div{ width:100px;height:100px; background:red; position:
relative; animation-name:myfirst;// Animation name animation-duration:5s;// Animation completion time
animation-timing-function:linear;// Set the speed of the animation to uniform animation-delay:2s;// When does animation start
animation-iteration-count:infinite;// Unlimited playback of animation animation-direction:alternate;
// Animation plays back in turn animation-play-state:running;// Specify that animation is running } @keyframes myfirst{ 0%{
background:red;left:0px; top:0px} 25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px;
top:200px;} 100% {background:red; left:0px; top:0px;} }

©2019-2020 Toolsou All rights reserved,
html Writing about cherry trees , Writing about cherry trees It's unexpected Python Cherry tree (turtle The gorgeous style of Library ) Browser kernel ( understand )HashMap Explain in detail java Four functional interfaces ( a key , simple )os Simple use of module Some East 14 Pay change 16 salary , Sincerity or routine ?