CSSでカウントダウンページめくりアニメーションを実装する方法

カウントダウンのページめくりアニメーションを実装する Css メソッド: 最初に外側のボックスと内側のボックスを設定し、次に内側のボックスの移動アニメーションの [animation-timing-function] に step を使用します。最後にカウントダウンが終了し、外側のボックスボックスのアニメーションが消えます。

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS でカウントダウン ページめくりアニメーションを実装する方法:

実装原理

a. 外側のボックス div.cell、幅と高さ1単語、制限を超えると表示されなくなりますので、1単語のみ表示できるようにしてください。

b. 内側のボックス div.num は幅 1 ワード、行の高さは 1 ワードであり、このボックスの動きによってアニメーションを実現します。

c. 内ボックスの移動アニメーションの animation-timing-function は、ステップ

d を使用して実装されます。カウントダウンが終了すると、外ボックスのアニメーションが実行されます。消えます

プロセス

それでは、実装プロセスを見てみましょう。HTMLファイルは次のようになります。中国語のカウントダウンも利用できますが、中国語のWebフォントが少なすぎるため、やったことがないので、興味のある学生はやってもいいでしょう。

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

CSS部分はprefix freeとnormailizeを使用しています。また、英語フォントを実装するためにGoogleフォントを使用しています。このファイルをインポートする必要があります

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

推奨関連チュートリアル: CSS ビデオ チュートリアル

以上がCSSでカウントダウンページめくりアニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。