css制作动画(动效的序列帧图) | 您所在的位置:网站首页 › 走动小人动图 › css制作动画(动效的序列帧图) |
相信 animation 大家都用过很多,知道是 CSS3做动画用的。而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 贝塞尔曲线。但是这些动画效果都是连续性的。 今天发现个新功能 animation-timing-function 的另外个属性值 steps()功能符,可以让动画不连续,就是制作逐帧动画。 steps(n,start/end) 第一个参数 number 为把动画分为 n 步阶段性展示,表示把我们的动画分成了多少段; 第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。 第二个参数具体说就是,emmmm.....................我寄几也没详细看(没理解),附上传送门你们看下张鑫旭大神的讲解 CSS3 animation属性中的steps功能符深入介绍 这里只需要第一个参数就好了 这张素材宽高:2128*241、总共为8帧,故 steps(8) CSS3 animation属性中的steps实现GIF动图(逐帧动画) .main { margin: 100px auto; width: 266px; height: 241px; background: url(./people.jpg); background-size: 2128px; animation: sprite 1s steps(8) infinite } @keyframes sprite { 0% { background-position: 0 0 } 100% { background-position: 100% 0; } } ok,大功告成,效果预览,当然这张GIF来的 css3 animation 属性众妙 animation中的steps()逐帧动画 在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ... css3 animation实现逐帧动画 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ... |
CopyRight 2018-2019 实验室设备网 版权所有 |