嗯。。。。
代碼如下：
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
| <title>跳動的心</title> |
| <style> |
| *{ padding:0; margin:0; list-style:none;} |
| #heart{ width:220px; height:500px; margin:40px auto; position:relative;} |
| .left,.right,.bottom{ display:block; width:220px; height:220px; background:#F00; position:absolute; animation:beat 0.7s infinite; } |
| .left,.right{ border-radius:110px;} |
| .left{ left:-80px; z-index:3;} |
| .right{ right:-80px; z-index:2;} |
| .bottom{ z-index:1; top:80px; transform:rotate(45deg);} |
| @keyframes beat{ |
| 0%{ transform:rotate(45deg) scale(1);} |
| 50%{ transform:rotate(45deg) scale(1.1);} |
| 100%{ transform: rotate(45deg) scale(1);} |
| } |
| #heart{ width:200px; height:200px; margin:100px auto; position:relative;} |
| .left,.right,.bottom{ width:200px; height:200px; background:#F00; position:absolute; |
| animation:move 1s infinite;} |
| .left{ left:-70px;} |
| .right{ right:-94px;} |
| .bottom{ bottom:-80px; left:12px;} |
| .left,.right{ border-radius:100px;} |
| @keyframes move{ |
| 0%{ transform:scale(1) rotate(45deg);} |
| 50%{transform:scale(1.2) rotate(45deg); } |
| 100%{transform:scale(1) rotate(45deg);} |
| } |
| </style> |
| </head> |
| <body> |
| <div id="heart"> |
| <span class="left"></span> |
| <span class="right"></span> |
| <span class="bottom"></span> |
| </div> |
| </body> |
| </html> |
![CSS3 ---奔跑的小人[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)