這次帶給大家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的顏色，來凸顯最後幾秒鐘的緊急情況。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是css3怎樣做出逆時針旋轉倒數計時的詳細內容。更多資訊請關注PHP中文網其他相關文章！
