這篇文章主要介紹了如何使用CSS制作文字實(shí)現(xiàn)逐幀動(dòng)畫，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司專注于余江企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購物商城網(wǎng)站建設(shè)。余江網(wǎng)站建設(shè)公司,為余江等地區(qū)提供建站服務(wù)。全流程按需定制制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

方法步驟

HTML部分

1、創(chuàng)建html定義一個(gè)包含文本的div大標(biāo)題同時(shí)使用class屬性向樣式。

Html編輯代碼示例

  
昵 稱 過 于 強(qiáng) 大
  

代碼效果

Html編輯寫好了，然后使用css樣式來進(jìn)行修飾。

CSS部分

1、給網(wǎng)頁添加背景顏色

body{
  background:#333;
}

2、cell標(biāo)題文本樣式，利用dashed屬性添加元素邊框的樣式和顏色，又利用position：absolute屬性是絕對(duì)定位放在中間。

代碼示例

.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;｝

3、num標(biāo)題文本樣式利用animation屬性steps()逐幀動(dòng)畫，又利用text-shadow屬性添加文字陰影和顏色，又利用position：absolute屬性是絕對(duì)定位放在中間。

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

接下來，我們給添加動(dòng)畫效果，讓文字態(tài)動(dòng)起來實(shí)現(xiàn)逐幀動(dòng)畫效果。

給num標(biāo)簽綁定animation動(dòng)畫。

使用兩個(gè)@keyframes規(guī)則，給兩個(gè)動(dòng)畫設(shè)置每一幀的動(dòng)作即可。

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

最終效果

下面給出完整代碼

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: blue 6s steps(1);
}
@keyframes run{
    0%{top:0;}
    100%{top:-6em;}
}
@keyframes go{
  0%   {opacity:1;}
  85%  {opacity:1;transform:rotate(0deg) scale(1);}
  100% {opacity:0;transform:rotate(360deg) scale(.01);}
}




  
昵 稱 過 于 強(qiáng) 大
  

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何使用CSS制作文字實(shí)現(xiàn)逐幀動(dòng)畫”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!