下面源代码送上~
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!doctype html><html> <head> <meta charset="UTF-8"> <title>心跳效果</title> <style> *{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;} .heart{ position:relative; width:100px; height:100px; margin:100px; animation:scale 1s linear infinite; /*名称 1s 匀速 无限循环*/ } @keyframes scale{ /*必须和animation一起用 @ www.xuepai.net动画帧*/ 50%{transform:scale(2)} } .heart:after, .heart:before{ position:absolute; width:60px; height:100%; background-color:#ff6666; content:""; border-radius:50% 50% 0 0; } .heart:before{ left:0; transform:rotate(-52deg); } .heart:after{ right:0; transform:rotate(49deg); } </style> </head> <!-- 可视化区域@ www.haoshilao.net --> <body> <div class="heart"></div> </body></html> |