transform属性允许我们对元素进行旋转、缩放、移动和倾斜；
animation属性允许我们对元素实现一些动画效果；
跳动的心源码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>跳动的心</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .contain{ 12 width: 100%; 13 height: 100%; 14 position: fixed; /*固定定位相对于浏览器窗口*/ 15 background-color: white; 16 animation-name: contain; 17 animation-duration: 1s; 18 animation-iteration-count: infinite; /*动画次数*/ 19 } 20 .heart{ 21 width: 50px; 22 height: 50px; 23 background-color:pink; 24 position: absolute; 25 margin: auto; 26 top: 0; 27 bottom: 0; 28 left: 0; 29 right: 0; 30 transform: rotate(-45deg); 31 animation-name: beat; 32 animation-duration: 1s; 33 animation-iteration-count: infinite; 34 } 35 .heart:before{ 36 background-color: pink; 37 content: ""; 38 border-radius: 50%; 39 width: 50px; 40 height: 50px; 41 position: absolute; 42 top:-25px; 43 left: 0; 44 } 45 46 .heart:after{ 47 background-color: pink; 48 content: ""; 49 border-radius: 50%; 50 width:50px; 51 height: 50px; 52 position: absolute; 53 top: 0 ; 54 left: 25px; 55 } 56 57 @keyframes contain { 58 50%{ 59 background-color: #ffe6f2; 60 } 61 } 62 63 @keyframes beat{ 64 0%{ 65 transform: scale(1) rotate(-45deg); 66 } 67 50%{ 68 transform: scale(0.6) rotate(-45deg); 69 } 70 } 71 </style> 72 </head> 73 <body> 74 <div class="contain"> 75 <div class="heart"> 76 77 </div> 78 </div> 79 </body> 80 </html>
以上代码使用了两个动画：背景图的颜色变化、桃心的大小变化；
关于.heart的伪类：
1.top和left值的变化 （该数值与原heart的大小的联系）
