使用transform属性和animation属性制作跳动的心

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的大小的联系）