CSS中使用animation-timing-function:steps(num…

2020-03-14 16:04:40来源:博客园 阅读 ()

容器云强势上线!快速搭建集群,上万Linux镜像随意使用

CSS中使用animation-timing-function:steps(num,start/end)实现逐帧动画

用animation做动画时发现背景图片是直接平移运动到指定位置的,即具有连续性,而animation-timing-function:steps(num,start/end)属性可以使背景图片运动不连续,即实现逐帧动画。

steps(num,start/end)        第一个值num表示把动画分成了多少段;第二个值默认为end,较难理解此处不做深究。

以下实例中图片大小为1260px*300px,共分7帧,故num值为7

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style type="text/css">
 7             *{margin: 0;padding: 0;}
 8             .box{
 9                 width: 200px;
10                 height: 300px;
11                 background: pink url(img/charector.png) ;
12                 animation:name 1s steps(7) infinite;    
13             }
14             @keyframes name{
15                 0%{
16                     background-position: 0 0;
17                 }
18                 100%{
19                     background-position: -1260px 0;
20                 }
21             }
22         </style>
23     </head>
24     <body>
25         <div class="box"></div>
26     </body>
27 </html>

原图如下:

动画效果如下:


原文链接:https://www.cnblogs.com/strongerPian/p/12493445.html
如有疑问请与原作者联系

标签:HTMLtimname理解AVfunction

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:flex布局实例--实现底部导航

下一篇:移动端常用单位(%和rem)