我的数据库还在之前博客里写了一个史莱姆加载动画，我原本以为数据库没了我的代码没了
没想到我的Sublime里面还存着这段代码！！！把我给激动坏了:&(蛆音娘_卖萌)
效果
思路
这个动画需要加入一段 CSS部分 HTML部分
首先呢史莱姆可以上下弹跳，插入一个@keyframes将方块位置上下调整
史莱姆怎么说是有弹性的，我们在他第一帧动画的时候宽度设置width:110px高度设置height:70px这样看上去有一种压缩的感觉。为了让动画看上去流畅加个交替animation-direction:alternate
这样一个弹跳的史莱姆就出现了，炒鸡简单的一个动画:@(击掌)CSS
<style type="text/css">
.div{
text-align: center;
}
.img{
margin-top: 130px;
width:100px;
height:100px;
border-radius:10px;
}
.img{
animation-name: img;
animation-delay: 500ms;
animation-duration: 1s;
animation:img 1000ms infinite;
animation-direction:alternate;
transition-timing-function:ease-in
}
@keyframes img{
to{
width: 110px;
height: 70px;
margin-top:150px;
}
from
{
width: 100px;
height: 100px;
margin-top:0px;}
}
</style> <div class="div">
<img src="https://i.loli.net/2021/10/12/OwgyIhdY5KiuMvV.jpg" class="img">
</div>
💬 留言