css动画跳动的爱心

您是否经常在浏览器上看到有些动画一直在跳动着，画面很有趣味性。今天，我们就来介绍一款用CSS实现跳动的爱心动画。

首先看一下实现效果：

div class="heart">
    div class="heart-inner">
    /div>
    /div>

CSS代码如下：

@keyframes heart-beat {
 0% {
     transform: scale(1);
 }
 30% {
     transform: scale(0.9);
 }
 50% {
     transform: scale(1);
 }
 80% {
     transform: scale(0.8);
 }
 100% {
     transform: scale(1);
 }
}
.heart {
     width: 100px;
     height: 100px;
     position: relative;
     display: inline-block;
}
.heart-inner {
     width: 50px;
     height: 90px;
     position: absolute;
     top: 10px;
     left: 25px;
     transform: rotate(45deg);
     background-color: #fc1559;
     animation: heart-beat 1.2s ease-in-out infinite;
}
    

在这段代码中，我们创建了一个heart类用来包含我们的动画。我们还创建了一个heart-inner类，它代表实际的爱心图案。该类有一个背景颜色和一个名为heart-beat的动画。

动画的实现是通过@keyframes规则实现的。我们在这里定义了一些关键帧，将动画从一个状态转换到另一个状态。在这种情况下，我们的动画向前进行，并在结束时循环。我们Tweened尺度的元素是爱心(inner)自身，它将以期望的轻微振动进行跳动。

现在，我们的CSS动画跳动的爱心就完成了！它看上去非常惊艳，对我们的博客、网站等进行装饰是绝对很不错的选择，毕竟爱心是永久的主题！

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