css3帧动画无缝衔接会闪一下,向大神求助,css3逐帧动画,下面的两种写法中,第一种为什么每帧之间会有闪动...

编程入门 行业动态 更新时间:2024-10-17 23:29:12

css3帧动画无缝衔接会闪一下,向大神求助,css3逐帧动画,下面的两种写法中,第一种为什么每帧之间<a href=https://www.elefans.com/category/jswz/34/1762713.html style=会有闪动..."/>

css3帧动画无缝衔接会闪一下,向大神求助,css3逐帧动画,下面的两种写法中,第一种为什么每帧之间会有闪动...

写法一:总共32帧 用的是steps(32)

Document

.m-component-loading{

width: 400px; height: 350px;

margin: 20px auto;

background:url(images/loadingimg.png) no-repeat 0 0;

-webkit-animation: charector 1000ms 0s steps(32) infinite;

animation: charector 1000ms 0s steps(32) infinite;

}

@-webkit-keyframes charector{

100%{background-position: 0 -11200px;}

}

keyframes charector{

100%{background-position: 0 -11200px;}

}

写法二:用的是step-start

Document

.m-component-loading{

width: 400px; height: 350px;

margin: 20px auto;

background:url(images/loadingimg.png) no-repeat 0 0;

-webkit-animation: charector 1000ms 0s step-start infinite;

animation: charector 1000ms 0s step-start infinite;

}

@-webkit-keyframes charector{

0%{background-position:0 0}3.125%{background-position:0 -350px}6.26%{background-position:0 -700px}9.375%{background-position:0 -1050px} 12.5%{background-position:0 -1400px}    15.625%{background-position:0 -1750px}18.75%{background-position:0 -2100px} 21.875%{background-position:0 -2450px}  25%{background-position:0 -2800px}28.125%{background-position:0 -3150px} 31.25%{background-position:0 -3500px}   34.375%{background-position:0 -3850px}37.5%{background-position:0 -4200px} 40.625%{background-position:0 -4550px}  43.75%{background-position:0 -4900px}46.875%{background-position:0 -5250px} 50%{background-position:0 -5600px}      53.125%{background-position:0 -5950px}56.25%{background-position:0 -6300px} 59.375%{background-position:0 -6650px}  62.5%{background-position:0 -7000px}65.625%{background-position:0 -7350px} 68.75%{background-position:0 -7700px}   71.875%{background-position:0 -8050px}75%{background-position:0 -8400px} 78.125%{background-position:0 -8750px}  81.25%{background-position:0 -9100px}84.375%{background-position:0 -9450px} 87.5%{background-position:0 -9800px}    90.625%{background-position:0 -10150px}93.75%{background-position:0 -10500px}96.875%{background-position:0 -10850px} 100%{background-position:0 -11200px;}

}

更多推荐

css3帧动画无缝衔接会闪一下,向大神求助,css3逐帧动画,下面的两种写法中,第一种为什么每帧之间会有闪动...

本文发布于:2024-02-25 03:25:52,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1697620.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:会有   动画   两种   大神   写法

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!