之前的文章《手把手教你使用css給文字添加火焰效果（代碼詳解）》中，給大家介紹了怎么使用css給文字添加火焰效果。下面本篇文章給大家介紹怎么使用css3給文字添加動(dòng)畫效果，我們一起看看怎么做。

在這類網(wǎng)站中能看到，無(wú)論是文字還是圖片，都隨著規(guī)定時(shí)間的而變化。css3的主鍵強(qiáng)大原理很簡(jiǎn)單，主要用到css中animation屬性，文字實(shí)現(xiàn)動(dòng)畫效果給大家看看。

代碼步驟

1、首先使用html框架。

創(chuàng)建新一個(gè)文檔，寫代碼先用<div class="animate box">這串代碼。

<div class="animate box"></div>

2、目前大體的框架已經(jīng)寫好，<div>標(biāo)簽。接下來(lái)向其中添加文字代碼。將代碼放在<span>中，文本中隨意寫什么都可以，我寫了是“css3實(shí)現(xiàn)簡(jiǎn)單的文字動(dòng)畫效果”

<div class="animate box"> <span>css3實(shí)現(xiàn)簡(jiǎn)單的文字動(dòng)畫效果</span> </div>

ok,html代碼大功告成

3、css3實(shí)現(xiàn)最核心的部分：CSS設(shè)置動(dòng)畫及字體樣式。

animate屬性使用將動(dòng)畫與div元素綁定，以像素計(jì)。當(dāng)為元素定義animate屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。下面給大家怎么寫代碼，首先在head標(biāo)簽之間加入<style type="text/css"><style>這串代碼然后在style標(biāo)簽中輸入文本的字體大小、外邊距、布局（設(shè)置元素上寬度和高度）代碼示例。

.animate {   font-size: 40px;   margin: 100px 0 0; }   .animate span {   display: inline-block; }

4、box盒子

box盒子模型指是：在網(wǎng)頁(yè)上直觀地布局元素，每個(gè)框都有一個(gè)內(nèi)容區(qū)域以及可選的周圍邊距，邊距和邊框。下面給大家怎么寫代碼，以上head標(biāo)簽之間加入<style type="text/css"><style>串代碼的方法一樣，style標(biāo)簽中輸入文本的顏色、不透明、偏移，代碼示例。

.box span {   color: #fff;   opacity: 0;   transform: translate(-150px, 0) scale(.5);   animation: leftRight 1s forwards; }

5、把盒子animation添加@keyframes ，因?yàn)檫@是div元素勻速移動(dòng)，代碼示例。

@keyframes leftRight {   40% {     transform: translate(30px, 0) scale(.7);     opacity: 1;     color: #000;   }   60% {     color: #fff;   }   80% {     transform: translate(0) scale(2);     opacity: 0;   }   100% {     transform: translate(0) scale(1);     opacity: 1;   }

ok,css大功告成

【完】

推薦學(xué)習(xí)：CSS3視頻教程