今天小编跟大家讲解下有关css3 实现圆形旋转倒计时 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css3 实现圆形旋转倒计时 的相关资料，希望小伙伴们看了有所帮助。
很多答题的H5界面上有旋转倒计时的效果 一个不断旋转减少的动画 类似于下图的这样。
今天研究了下 可以通过border旋转得到。一般我们可以通过border得到一个四段圆。
See the Pen circle by stoneniqiu (@stoneniqiu) on CodePen.
接下来接可以通过旋转的方式形成一个倒计时的效果：
See the Pen circle-rotate by stoneniqiu (@stoneniqiu) on CodePen.
一开始旋转45度是为了让半圆刚好立起来。然后旋转一百八十度。
.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(-136deg); transform: rotate(-136deg) } }毕竟不是真正的减少 要出现一种颜色占大多数就可以通过两个半圆来拼凑。
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(-136deg); transform: rotate(-136deg) } }注意到是右边线转5秒 然后左边再等五秒 这里css动画的效果略有不同 右边是0%开始 50%,to。左边是0%,50% 然后to 这样实现的5秒等待。这就是旋转倒计时的效果 最后还可以通过修改左半环border-left的颜色 来凸显最后几秒钟的紧急情况。
总结
以上所述是小编给大家介绍的css3 实现圆形旋转倒计时 希望对大家有所帮助 如果大家有任何疑问请给我留言 小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！
来源：爱蒂网
