欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用CSS制作文字實現(xiàn)逐幀動畫

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

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

方法步驟

HTML部分

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

Html編輯代碼示例

<div>
  <div>昵 稱 過 于 強 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

代碼效果

如何使用CSS制作文字實現(xiàn)逐幀動畫

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

CSS部分

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

body{
  background:#333;
}

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

代碼示例

.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標題文本樣式利用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);
}

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

給num標簽綁定animation動畫。

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

@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制作文字實現(xiàn)逐幀動畫

下面給出完整代碼

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
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);}
}
</style>
</head>
<body>
<div>
  <div>昵 稱 過 于 強 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>
</body>
</html>

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

當前文章：如何使用CSS制作文字實現(xiàn)逐幀動畫
文章來源：http://chinadenli.net/article14/gicpge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、網(wǎng)站設(shè)計公司、手機網(wǎng)站建設(shè)、App開發(fā)、企業(yè)建站、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)