Comment implémenter l'animation de rotation de page de compte à rebours en CSS

Comment implémenter l'animation de changement de page avec compte à rebours en CSS : définissez d'abord la boîte extérieure et la boîte intérieure ; puis utilisez l'étape pour la [fonction d'animation-timing] de l'animation mobile de la boîte intérieure ; enfin, le compte à rebours se termine et le compte à rebours se termine ; l'animation de la boîte extérieure disparaît.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Comment implémenter une animation de changement de page avec compte à rebours avec CSS :

Principe de mise en œuvre

a La boîte extérieure div.cell, la largeur et la hauteur de. un mot, s'il dépasse la limite, il ne sera pas affiché. Assurez-vous qu'un seul mot peut être affiché.

b. La boîte intérieure div.num a une largeur d'un mot et une hauteur de ligne d'un mot. Nous implémentons l'animation à travers le mouvement de cette boîte.

c. Utilisez l'étapeanimation-timing-function

d pour l'animation du mouvement de la boîte intérieure. Le compte à rebours se termine et l'animation de la boîte extérieure disparaît

Processus de mise en œuvre

<.>Bien Oui, jetons un coup d'œil au processus de mise en œuvre. Le fichier html ressemble à ceci. Le compte à rebours chinois peut également être utilisé, mais il y a trop peu de polices Web chinoises, donc je ne l'ai pas fait. il.

[html] view plain copy  
<div class="cell">  
  <div class="num">5 4 3 2 1 0</div>  
  <!--<div class="num">五 四 三 二 一 零</div>-->  
</div>

La partie CSS utilise le préfixe free et normailize. De plus, afin d'implémenter les polices anglaises, nous utilisons des polices Google. Vous devez importer ce fichier

http://fonts.googleapis. .com/css? family=Allura|Frijole|Varela+Round

[css] view plain copy  
body{  
  background:#333;  
}  
.cell{  
    width: 1em;    
    height: 1em;  
    border:1px dashed rgba(255,255,255,0.1);  
    font-size:120px;  
    font-family:Frijole;  
    overflow: hidden;  
    position:absolute;  
    top:50%;  
    left:50%;  
    margin:-0.5em 0 0  -0.5em;  
    opacity:0;  
    animation:go 6s;  
    transform-origin:left bottom;  
}  
.num{  
    position:absolute;  
    width: 1em;  
    color:#E53F39;  
    line-height: 1em;    
    text-align: center;  
    text-shadow:1px 1px 2px rgba(255,255,255,.3);  
    animation:run 6s steps(6);  
}  
@keyframes run{  
    0%{top:0;}  
    100%{top:-6em;}  
}  
@keyframes go{  
  0%   {opacity:1;}  
  84%  {opacity:1;transform:rotate(0deg) scale(1);}  
  100% {opacity:0;transform:rotate(360deg) scale(.01);}  
}

Recommandations de tutoriel associées :

Tutoriel vidéo CSS

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!