一步一步教你使用CSS製作文字實現逐幀動畫（附程式碼）

之前的文章《手把手教你使用css3製作酷炫的導覽列效果（程式碼詳解）》中，給大家介紹了怎麼使用css3製作酷炫的導覽列效果，以下這篇文章跟大家介紹怎麼使用CSS製作文字實作逐幀動畫，我們一起看看怎麼做。

文字實現逐幀動畫是網頁中最常見的一種組成部分，給文字添加逐幀動畫效果，給大家分享一下看效果圖

看完效果，我們來研究一下是怎麼實作呢

#方法步驟

HTML部分

#1、建立html定義一個包含文字的div大標題同時使用

class

屬性向樣式。

Html編輯程式碼範例

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

程式碼效果

#Html編輯寫好了，然後使用css樣式來進行修飾。

CSS部分

1、為網頁新增背景顏色<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">body{ background:#333; }</pre><div class="contentsignin">登入後複製</div></div>2、cell標題文字樣式，利用dashed屬性加入元素邊框的樣式和顏色，再利用

position：absolute

屬性是絕對定位放在中間。

程式碼範例<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.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;｝</pre><div class="contentsignin">登入後複製</div></div>3、num標題文字樣式利用animation屬性steps()逐幀動畫，又利用text-shadow屬性加入文字陰影和顏色，又利用

position：absolute

屬性是絕對定位放在中間。

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

接下來，我們給新增動畫效果，讓文字態動起來實現逐幀動畫效果。

給num標籤綁定animation動畫。

使用兩個@keyframes規則，為兩個動畫設定每一幀的動作即可。

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

最終效果

下面給出完整程式碼

<div>
  <div>昵 称 过 于 强 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

【完結】

推薦學習：

CSS影片教學#######

以上是一步一步教你使用CSS製作文字實現逐幀動畫（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！