Home > Developer > Web Develop
Are you still anxious to express your inner feelings? Still worried about making a beating heart? haha ~ ~ ~ Today I will put all the code, for you to make a contribution to chase sister, see the final dynamic effect (in advance: I use the screenshot GIF production software is the green version, so gif dynamic graph heart will be a bit slow jitter effect and Kaka, but the actual effect is very good ~ ~ ~ Do not believe you can paste code to see BAI)
Below the heart of the PNG map also posted out, interested can right-click Save as a try ~ ~ ~
In fact, the above animation is similar to our childhood swing, also known as "swing animation", generally used in order to let users click on this icon, not only limited to the declaration of O (∩_∩) o, such as corporate recruitment want to let job seekers click on the icon of the resume to enter another page.
The idea of writing this procedure:
(1) First to define an animation, in 10%,20%,30% .... 100% when the heart Chart of different states, of course, time and state are to see their own needs to set
(2) Call the animation and set it to infinite dead loop playback
First, take a look at the HTML code:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8" /> <title>Swing around when you are in the heartbeat</title> <Linktype= "Text/css"rel= "stylesheet"href= "Css/animate.css" /> </Head> <Body> <imgclass= "Heart"src= "Img/heart.png" /> </Body></HTML>
Second, look at the CSS style (mainly CSS3)
/* Define an animation called heartanimate to enlarge and rotate the heart chart */@keyframes heartanimate{0%,100%{transform:scale (1) rotate (0);} /*0%,100% the original size of the graphic and does not rotate */10%,30%{transform:scale (0.9) rotate (3deg);} /*10%,30% when the graph is reduced to 0.9 times times, and clockwise rotation 3 degrees */20%,40%,60%,80%{transform:scale (1.1) rotate ( -3deg);} /*20%,40%,60%,80% when the graph expands to 1.1 times times, and rotates counterclockwise 3 degrees */50%,70%{Transform:scale (1.1) rotate (3deg);} /*50%,70% when the graph expands to 1.1 times times, and rotates clockwise 3 degrees */}@-webkit-keyframes heartanimate{0%,100%{-webkit-transform:scale (1) rotate (0);} 10%,30%{-webkit-transform:scale (0.9) rotate (3deg);} 20%,40%,60%,80%{-webkit-transform:scale (1.1) rotate ( -3deg);} 50%,70%{-webkit-transform:scale (1.1) rotate (3deg);}} @-moz-keyframes heartanimate{0%,100%{-moz-transform:scale (1) rotate (0);} 10%,30%{-moz-transform:scale (0.9) rotate (3deg);} 20%,40%,60%,80%{-moz-transform:scale (1.1) rotate ( -3deg);} 50%,70%{-moz-transform:scale (1.1) rotate (3deg);}} @-o-keyframes heartanimate{0%,100%{-o-tRansform:scale (1) rotate (0);} 10%,30%{-o-transform:scale (0.9) rotate (3deg);} 20%,40%,60%,80%{-o-transform:scale (1.1) rotate ( -3deg);} 50%,70%{-o-transform:scale (1.1) rotate (3deg);}} @-ms-keyframes heartanimate{0%,100%{-ms-transform:scale (1) rotate (0);} 10%,30%{-ms-transform:scale (0.9) rotate (3deg);} 20%,40%,60%,80%{-ms-transform:scale (1.1) rotate ( -3deg);} 50%,70%{-ms-transform:scale (1.1) rotate (3deg);}}. heart{-webkit-animation:heartanimate 1s ease infinite; /* Call name heartanimate animation, full 1s, speed curve is ease, infinite loop play */-moz-animation:heartanimate 1s ease infinite; -o-animation:heartanimate 1s ease infinite; -ms-animation:heartanimate 1s ease infinite; animation:heartanimate 1s ease infinite;}
The above program my comments also write very clearly, interested can try it yourself, mainly is CSS3 in the scale of the amplification function and rotate rotation function application, grasp the state of the settings, animation effect is very Q ~ ~ ~
CSS3 Study Notes (2)-Hearts beating around
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
