Comment faire un compte à rebours tournant dans le sens inverse des aiguilles d'une montre en CSS3

Cette fois, je vais vous montrer comment faire un compte à rebours de rotation dans le sens inverse des aiguilles d'une montre en CSS3. Quelles sont les précautions pour faire un compte à rebours de rotation dans le sens inverse des aiguilles d'une montre en CSS3. Voici un cas pratique, jetons un oeil.

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.

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 de stylos de stoneniqiu (@stoneniqiu) sur CodePen.

Ensuite, vous pouvez créer un effet de compte à rebours en tournant :

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 debout. Faites ensuite pivoter de 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 Pen circle-timer par stoneniqiu (@stoneniqiu) sur CodePen La ligne tourne pendant 5 secondes, puis attend encore cinq secondes sur la gauche. L'animation CSS ici est légèrement différente. Sur la droite, elle 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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

Le plug-in DataTable peut-il implémenter un chargement asynchrone ?

L'API que jQuery doit maîtriser

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!