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情况照片满屏的案例编码 返回下一篇：没有了