css3动画心跳效果代码 |css 溢出自动隐藏

/* 设置动画 */
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(0.75);
}
40% {
transform: scale(1);
}
60% {
transform: scale(0.75);
}
75% {
transform: scale(1);
}
}
/* 将动画应用到元素上 */
.heart {
animation: heartbeat 1s ease-out infinite;
}

通过设置关键帧的形式，大家就可以制作一个简单的心跳效果了。首先，大家使用@keyframes关键字来定义大家的心跳动画，它包含了几个不同的状态，指定在不同时间点，元素需要采取不同的转换形态。然后，大家给大家的HTML元素添加一个类名，例如“heart”，并将大家刚刚定义的动画效果应用到该类名中。最后，大家使用animation属性来描述大家的动画效果，指定动画名称以及该动画需要持续的时间和缓动函数。将该属性设置为infinite，以使大家的动画无限循环。