CSS3 realize circular rotation countdown code sharing

Many of the H5 interface has a rotation countdown effect, a constant rotation of the reduced animation, similar to this. This article mainly and everybody introduced the CSS3 realizes the circular rotation countdown function, needs the friend can refer under, hoped can help to everybody.

Studied today, can be obtained by border rotation. Generally we can get a four-segment circle through border.

See the Pen Circle by Stoneniqiu (@stoneniqiu) on Codepen.

Next, you can create a countdown effect by rotating it:

See the Pen circle-rotate by Stoneniqiu (@stoneniqiu) on Codepen.

The first rotation is 45 degrees to make the semicircle stand up. Then rotate 180 degrees.

. 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)                }            }

After all, not really reduced, to appear a color in the majority can be pieced together by two semicircular.

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)                }            }

Note that the right line to 5 seconds, and then left to wait five seconds, where the effect of CSS animation slightly different, the right is 0% start, 50%,to. On the left is 0%,50%, then to, 5 seconds to wait for this implementation. This is the effect of the spin countdown, and finally, the last few seconds of the emergency can be highlighted by modifying the border-left color of the left half loop.