html5 心跳效果,HTML+CSS3实现心跳效果代码分享

本文通过代码给大家介绍了HTML+CSS3模拟心的跳动的实现方法，非常不错，具有参考借鉴价值，需要的朋友参考下吧

废话不多说了，直接给大家贴代码了，具体代码如下所示：

模拟心的跳动

* {

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);

}

}