So erstellen Sie einen gegen den Uhrzeigersinn rotierenden Countdown in CSS3

Dieses Mal zeige ich Ihnen, wie Sie einen Countdown gegen den Uhrzeigersinn in CSS3 durchführen. Was sind die Vorsichtsmaßnahmen für einen Countdown gegen den Uhrzeigersinn in CSS3?

Viele Antwort-H5-Schnittstellen verfügen über einen rotierenden Countdown-Effekt, eine Animation, die sich kontinuierlich dreht und verringert, ähnlich wie im Bild unten.

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.

Als Nächstes können Sie durch Drehen einen Countdown-Effekt erzeugen:

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

Die anfängliche Drehung beträgt 45 Grad, damit der Halbkreis 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.

Siehe den Stiftkreis-Zeitr von stoneniqiu (@stoneniqiu) auf CodePen. Die Linie dreht sich 5 Sekunden lang und wartet dann weitere fünf Sekunden auf die Wirkung Die CSS-Animation ist hier etwas anders. Auf der rechten Seite beginnt sie bei 0 %, 50 %. 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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

Kann das DataTable-Plug-in asynchrones Laden implementieren?

Die API, die jQuery beherrschen muss

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen gegen den Uhrzeigersinn rotierenden Countdown in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!