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

如何使用CSS制作文字實(shí)現(xiàn)逐幀動(dòng)畫(huà)

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

成都創(chuàng)新互聯(lián)公司專注于余江企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,購(gòu)物商城網(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編輯代碼示例

<div>
  <div>昵 稱 過(guò) 于 強(qiáng) 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>

代碼效果

如何使用CSS制作文字實(shí)現(xiàn)逐幀動(dòng)畫(huà)

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

CSS部分

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

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)畫(huà)，又利用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);
}

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

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

使用兩個(gè)@keyframes規(guī)則，給兩個(gè)動(dòng)畫(huà)設(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);}
}

最終效果

如何使用CSS制作文字實(shí)現(xiàn)逐幀動(dòng)畫(huà)

下面給出完整代碼

<!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>昵 稱 過(guò) 于 強(qiáng) 大</div>
  <!--<div>五 四 三 二 一 零</div>-->
</div>
</body>
</html>

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

當(dāng)前文章：如何使用CSS制作文字實(shí)現(xiàn)逐幀動(dòng)畫(huà)
文章來(lái)源：http://www.chinadenli.net/article14/gicpge.html

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

廣告

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

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