css3做一个心形跳动

CSS3 可以实现更加丰富的动画效果，比如实现一个心形跳动动画就非常简单。

.heart {
    width: 50px;
    height: 50px;
    position: relative;
    margin: 50px auto;
    transform: rotate(45deg);
    animation: beat 1s ease-in-out infinite;
}
.heart:before,.heart:after {
    content: "";
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 50% 50% 0 0;
    background: #fc2f70;
}
.heart:before {
    top: -25px;
    left: 0;
}
.heart:after {
    top: 0;
    left: 25px;
}
@keyframes beat {
0% {
    transform: scale(0.75);
}
20% {
    transform: scale(0.75) rotate(45deg);
}
40% {
    transform: scale(1) rotate(45deg);
}
60% {
    transform: scale(0.75) rotate(45deg);
}
80% {
    transform: scale(0.75);
}
100% {
    transform: scale(0.75);
}
}
    

以上代码创建了一个 class 为 "heart" 的样式，通过伪元素:before和:after分别实现心形的左半边和右半边。在样式中使用动画定义，通过keyframes实现心形的跳动效果。

采用这种方式，我们就能够快速地实现一个让爱的心跳动的效果啦！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！