CSS3 realisiert die Codefreigabe für den Kreisrotations-Countdown

Viele Antwort-H5-Schnittstellen verfügen über einen rotierenden Countdown-Effekt, eine Animation, die sich kontinuierlich dreht und verringert, ähnlich dem Bild unten. In diesem Artikel erfahren Sie hauptsächlich, wie Sie die Kreisrotations-Countdown-Funktion in CSS3 implementieren. Freunde, die sie benötigen, können darauf verweisen.

Ich habe es heute studiert und es kann durch Grenzrotation erworben werden. Im Allgemeinen können wir durch den Rand einen Kreis mit vier Segmenten erhalten.

Sehen Sie sich den Stiftkreis von stoneniqiu (@stoneniqiu) auf CodePen an.

Anschließend können Sie ihn drehen, um einen Countdown-Effekt zu erzielen :

Sehen Sie sich den Pen Circle-Rotate von stoneniqiu (@stoneniqiu) auf CodePen an.

Die anfängliche Drehung beträgt 45 Grad, damit der Halbkreis gerade aufrecht steht. Dann um 180 Grad drehen.

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

Schließlich ist es keine wirkliche Reduktion. Wenn eine Farbe dominiert, kann sie durch zwei Halbkreise zusammengesetzt werden.

Sehen Sie sich den Pen Circle-Timer von stoneniqiu (@stoneniqiu) auf CodePen an.

 @keyframes circleProgressLoad_left {
                0%,50% {
                    -webkit-transform: rotate(46deg);
                    transform: rotate(46deg)
                }           
                to {
                    -webkit-transform: rotate(-136deg);
                    transform: rotate(-136deg)
                }
            }

Beachten Sie, dass sich die rechte Linie 5 Sekunden lang dreht und dann weitere fünf Sekunden auf der linken Seite wartet. Der Effekt der CSS-Animation ist hier etwas anders. Die rechte Seite beginnt bei 0 %, 50 %. , Zu. Die linke Seite ist 0 %, 50 % und dann to, wodurch eine Wartezeit von 5 Sekunden erreicht wird. Dies ist der Effekt des rotierenden Countdowns. Schließlich können Sie die Randfarbe des linken Halbrings ändern, um die Notfallsituation in den letzten Sekunden hervorzuheben.

Verwandte Empfehlungen:

WeChat-Applet-Bestätigungscode, um die Codefreigabe für Countdown-Effekte zu erhalten

Canvas wunderschöne Countdown-Implementierungscodefreigabe

JQuery-Countdown-Applet-Implementierungscode

Das obige ist der detaillierte Inhalt vonCSS3 realisiert die Codefreigabe für den Kreisrotations-Countdown. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!