<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<meta http-equiv="X-UA-Compatible" content="IE=edge"> ???<title>模拟心的跳动</title></head><style type="text/css"> ???* { ???margin: 0; ???padding: 0;}body { ???background-color: #D4CECE;}.big { ???width: 200px; ???height: 200px; ???margin: 0 auto; ???position: relative; ???animation: heartAnimation 0.7s linear 0s infinite;}.big #heart { ???margin: 5px 0; ???width: 100%; ???height: 100%; ???background-color: #FF0606; ???position: absolute;}.left,.right { ???border-radius: 100px 100px 0 0; ?/*左上 右上 右下 左下*/ ???box-shadow: 0px 0px 20px #FD0707;}.bottom { ???box-shadow: 0px 0px 20px #FD0707;}.left { ???transform: translate(-50px,150px) rotate(-45deg); ?/*translate()位移 rotate() 旋转角度*/}.right { ???transform: translate(50px,150px) rotate(45deg);}.bottom { ???transform: translate(0,214px) rotate(45deg) scale(.9,.9) ?/*scale:定义 2D 缩放转换。*/}/*动画效果*/@keyframes heartAnimation{ ???form { ???????????transform: scale(0.9,0.9); ???} ???to { ???????????transform: scale(1.1,1.1); ???}}</style><body> ???<div class="big"> ???????<div id="heart" class="left"></div> ???????<div id="heart" class="right"></div> ???????<div id="heart" class="bottom"></div> ???</div></body></html>html+css3模拟心的跳动
原文地址：http://www.cnblogs.com/cheerping/p/7475778.html