这篇文章将为大家详细讲解有关css3如何实现圆形旋转倒计时,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。很多答题的H5界面上有旋转倒计时的效果,一个不断旋转减少的动画,类似于下图的这样。今天研究了下,可以
这篇文章将为大家详细讲解有关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如何实现圆形旋转倒计时”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
--结束END--
本文标题: css3如何实现圆形旋转倒计时
本文链接: https://www.lsjlt.com/news/253422.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0