css3 实现圆形旋转倒计时
发布时间：2018-02-24 08:59:46 作者：佚名 
我要评论
我要评论这篇文章主要介绍了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 实现圆形旋转倒计时，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了CSS3实现360度循环旋转功能,整个div360度旋转，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考2022-01-25
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
这篇文章主要介绍了css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可2021-04-29
本篇文章主要介绍了CSS3实现头像旋转效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-13- 本文给大家分享一段css3代码实现鼠标悬停时边框旋转的效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下2017-01-03
春节快到了，因为疫情已经好久没有回老家了，今年终于可以回家过年了，我已经抑制不住自己激动的心情了。因此，我利用css3的旋转做了一个福到了的特效，而且是双旋转，感兴2023-01-29
最新评论