用css制作一个史莱姆加载动画

这个博客建了差不多一年了,望着可怜巴巴的文章觉得还是写点什么好,
加上康某的催更,昨天打算随便速写个哥斯拉水文章的。
良心过不去昂#滑稽
于是早上起来用css写了这个玩意——

史莱姆

反正我觉得不错(嘤嘤嘤)
代码直接发出来啦

<style type="text/css">
.div{
text-align: center;

}
.img{
margin-top: 130px;
width:100px;
height:100px;
}
.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/2019/07/25/5d3934843d0e591069.jpg" class="img">
</div>

已有 2 条评论

  1. 如果背景颜色不是白色动画有白角的话可以修改一下弧度喔

  2. Van Van

    啊~that’s♂ good

添加新评论