html代码在线模拟,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);

}

}

总结

以上所述是小编给大家介绍的HTML+CSS3模拟心的跳动实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！