搜索

我的数据库还在之前博客里写了一个史莱姆加载动画,我原本以为数据库没了我的代码没了
没想到我的Sublime里面还存着这段代码!!!把我给激动坏了


效果

思路

这个动画需要加入一段

然后插入一张图,然后让这张图片动起来
首先呢史莱姆可以上下弹跳,插入一个@keyframes将方块位置上下调整
史莱姆怎么说是有弹性的,我们在他第一帧动画的时候宽度设置width:110px高度设置height:70px这样看上去有一种压缩的感觉。为了让动画看上去流畅加个交替animation-direction:alternate
这样一个弹跳的史莱姆就出现了,炒鸡简单的一个动画

CSS

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>

HTML部分

      <div class="div">
<img src="https://i.loli.net/2021/10/12/OwgyIhdY5KiuMvV.jpg" class="img">
    </div>

版权属于:skyxiaotao
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
1
查看目录

目录

来自 《CSS制作MC史莱姆加载动画》
评论

酚小酞

自律已有成果,勤练带来力量