css3 完成圆形转动倒计时

日期:2021-03-01 类型:科技新闻 

关键词:图片模板,淘宝作图用什么软件好,在线制作白底图,设计图制作软件,抠图软件

许多解题的H5页面上有转动倒计时的实际效果,1个持续转动降低的动漫,相近于下图的这样。

今日科学研究了下,能够根据border转动获得。1般大家能够根据border获得1个4段圆。

See the Pen circle by stoneniqiu (@stoneniqiu) on CodePen.

 接下来接能够根据转动的方法产生1个倒计时的实际效果:

See the Pen circle-rotate by stoneniqiu (@stoneniqiu) on CodePen.

 1刚开始转动45度是以便让半圆恰好立起来。随后转动1百810度。

 .rightcircle{
                border-top: .4rem solid #8731fd;
                border-right: .4rem solid #8731fd;
                right: 0;
                transform: rotate(45deg)
            }
 .right_cartoon {
                -webkit-animation: circleProgressLoad_right 10s linear infinite forwards;
                animation: circleProgressLoad_right 10s linear infinite forwards;
            }
 @keyframes circleProgressLoad_right {
                0% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)
                }
                50%,to {
                    -webkit-transform: rotate(⑴36deg);
                    transform: rotate(⑴36deg)
                }
            }

终究并不是真实的降低,要出現1种色调占大多数数便可以根据两个半圆来拼凑。

See the Pen circle-timer by stoneniqiu (@stoneniqiu) on CodePen.
 

 @keyframes circleProgressLoad_left {
                0%,50% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)
                }           
                to {
                    -webkit-transform: rotate(⑴36deg);
                    transform: rotate(⑴36deg)
                }
            }

留意到是右侧线转5秒,随后左侧再等5秒,这里css动漫的实际效果略有不一样,右侧是0%刚开始,50%,to。左侧是0%,50%,随后to,这样完成的5秒等候。这便是转动倒计时的实际效果,最终还能够根据改动左半环border-left的色调,来凸显最终几秒钟的应急状况。

总结

以上所述是网编给大伙儿详细介绍的css3 完成圆形转动倒计时,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:css设定body情况照片满屏的案例编码 返回下一篇:没有了