CSS3 réalise le partage de code de compte à rebours de rotation circulaire

De nombreuses interfaces de réponse H5 ont un effet de compte à rebours rotatif, une animation qui tourne et diminue continuellement, similaire à l'image ci-dessous. Cet article vous présente principalement comment implémenter la fonction de compte à rebours de rotation circulaire dans CSS3. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Je l'ai étudié aujourd'hui et il peut être obtenu grâce à la rotation des frontières. Généralement, nous pouvons obtenir un cercle à quatre segments traversant la frontière.

Voir le cercle du stylo de stoneniqiu (@stoneniqiu) sur CodePen.

Ensuite, vous pouvez le faire pivoter pour former un effet de compte à rebours :

Voir la rotation du cercle du stylo par stoneniqiu (@stoneniqiu) sur CodePen.

La rotation initiale est de 45 degrés pour que le demi-cercle se tienne juste debout. Faites ensuite pivoter cent quatre-vingts degrés.

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

Après tout, ce n'est pas une véritable réduction. Si une couleur domine, elle peut être reconstituée par deux demi-cercles.

Voir le minuteur circulaire Pen de stoneniqiu (@stoneniqiu) sur CodePen.

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

Notez que la ligne droite tourne pendant 5 secondes, puis attend encore cinq secondes sur le côté gauche. L'effet de l'animation CSS ici est légèrement différent. Le côté droit commence à 0 %, 50 %. , à. Le côté gauche est 0 %, 50 %, puis jusqu'à, ce qui permet d'obtenir une attente de 5 secondes. C'est l'effet du compte à rebours rotatif. Enfin, vous pouvez modifier la couleur de la bordure gauche du demi-anneau gauche pour mettre en évidence la situation d'urgence des dernières secondes.

Recommandations associées :

Code de vérification de l'applet WeChat pour obtenir le partage de code avec effet de compte à rebours

Partage de code de mise en œuvre du compte à rebours magnifique sur toile

Code d'implémentation de l'applet du compte à rebours jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!