首页前端开发CSScss动画跳动的爱心

css动画跳动的爱心

时间2023-09-07 22:33:03发布访客分类CSS浏览457
导读:您是否经常在浏览器上看到有些动画一直在跳动着,画面很有趣味性。今天,我们就来介绍一款用CSS实现跳动的爱心动画。首先看一下实现效果:<div class="heart"><div class="heart-inner"&g...

您是否经常在浏览器上看到有些动画一直在跳动着,画面很有趣味性。今天,我们就来介绍一款用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核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css动画跳动的爱心
本文地址: https://pptw.com/jishu/432565.html
css动画速度 mysql如何备份导出数据库

游客 回复需填写必要信息