这次要做的小程序设计给过来一个gif的过渡动画,要实现闸门的下拉和升起。
gif动画可以自定义循环周期,可以是n次也可以是无限次,无限次难以把握回收元素的时机,n次想要重新展示在小程序中也是难事,重写image的src和将图片放在background,改class也没有用,无法使gif重新播放,遂更改思路,使用css3的动画实现。
先放上效果图
我们先将动画的每一帧制作成雪碧图,最好是一列或者一行比如这样
每一帧之间不要有边距
然后直接上代码
.demo{
height:20px;
width:30px;
background:url(image.png) no-repeat;
background-size:300px 20px;
animation: p1 steps(n,end) 1.5s infinite;
}
@keyframes p1 {
100% {background-position: 0 -300px;}
}
height和width是你想显示的高度
n是帧数
我这是横图,所以background-size的宽度应该为height*n,高度即同上width。
完结撒花。
接下来就可以轻松控制动画的进行了。
本文由 hunsh 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Dec 28, 2019 at 02:39 am