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