So implementieren Sie eine Countdown-Animation zum Umblättern von Seiten in CSS

So implementieren Sie die Countdown-Animation zum Umblättern von Seiten in CSS: Legen Sie zuerst die äußere Box und die innere Box fest. Verwenden Sie dann Schritt für die [Animations-Timing-Funktion] der Bewegungsanimation der inneren Box .

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

So implementieren Sie eine Countdown-Umblätteranimation mit CSS:

Implementierungsprinzip

a, äußere Box div.cell, die Breite und Höhe eines Wortes wird nicht angezeigt. Wenn es die Breite und Höhe überschreitet, wird es angezeigt nicht angezeigt werden. Stellen Sie sicher, dass nur ein Wort angezeigt werden kann.

b. Die innere Box div.num ist ein Zeichen breit und ein Zeichen hoch in der Zeilenhöhe. Wir implementieren die Animation durch die Bewegung dieser Box.

c. Verwenden Sie Schritt animation-timing-function

d für die Bewegungsanimation der inneren Box.

Implementierungsprozess

Okay, schauen wir uns den Implementierungsprozess an Der chinesische Countdown ist auch so, aber es gibt zu wenige chinesische Web-Schriftarten, daher habe ich es noch nicht getan. Interessierte Schüler können es tun.

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

Der CSS-Teil verwendet prefix free und normailize. Um englische Schriftarten zu implementieren, müssen Sie außerdem diese Datei importieren

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

Empfohlene verwandte Tutorials:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Countdown-Animation zum Umblättern von Seiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!