How to implement countdown page turning animation in css

Css method to implement countdown page turning animation: first set the outer box and inner box; then use step for the [animation-timing-function] of the inner box's moving animation; finally the countdown ends and the outer box animation disappears.

The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.

How to implement countdown page turning animation with css:

Implementation principle

a. The outer box div.cell, the width and height of one word, If it exceeds the limit, it will not be displayed. Make sure that only one word can be displayed.

b. The inner box div.num is one word wide, and the line height is one word high. We realize animation through the movement of this box.

c. animation-timing-function of the moving animation of the inner box is implemented using step

d. When the countdown ends, the animation of the outer box disappears

Process

Okay, let’s take a look at the implementation process. The html file is like this. The Chinese countdown is also available, but there are too few Chinese web fonts, so I haven’t done it. Interested students can do it.

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

The CSS part uses prefix free and normailize. In addition, in order to implement English fonts, we use google fonts. You need to import this file

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

Recommended related tutorials: CSS video tutorial

The above is the detailed content of How to implement countdown page turning animation in css. For more information, please follow other related articles on the PHP Chinese website!