手把手教你怎麼使用css3為文字加上動畫效果（附代碼）

之前的文章《手把手教你使用css為文字添加火焰效果（程式碼詳解）》中，介紹了怎麼使用css為文字加上火焰效果。以下這篇文章跟大家介紹怎麼使用css3為文字加入動畫效果，我們一起看看怎麼做。

在這類網站中能看到，無論是文字或圖片，都隨著規定時間的而改變。 css3的主鍵強大原理很簡單，主要用到css中animation屬性，文字實現動畫效果給大家看。

程式碼步驟

#1、先使用html框架。

建立新一個文檔，寫程式碼先用<div class="animate box">這串程式碼。 <pre class='brush:php;toolbar:false;'>&lt;div class=&quot;animate box&quot;&gt;&lt;/div&gt;</pre><p style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;text-indent:0;padding:0 0 0 0 ;background:rgb(255,255,255)">2、目前大體的框架已經寫好，<code><div>標籤。接下來在其中加入文字程式碼。將程式碼放在<code><span></span>中，文字中隨意寫什麼都可以，我寫了是「css3實作簡單的文字動畫效果」

<div class="animate box">
<span>css3实现简单的文字动画效果</span>
</div>

ok,html程式碼大功告成

3、css3實現最核心的部分：CSS設定動畫及字體樣式。

animate屬性使用將動畫與div元素綁定，以像素計。當為元素定義animate屬性時，其子元素會得到透視效果，而不是元素本身。下面給大家怎麼寫程式碼，先在head標籤之間加入<style type="text/css"><style></style>這串程式碼然後在 style標籤中輸入文字的字體大小、外邊距、佈局（設定元素上寬度和高度）程式碼範例。

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

4、box盒子

box盒子模型指是：在網頁上直觀地佈局元素，每個框都有一個內容區域以及可選的周圍邊距，邊距和邊框。下面給大家怎麼寫程式碼，以上head標籤之間加入<style type="text/css"><style></style>字串程式碼的方法一樣，style標籤中輸入文字的顏色、不透明、偏移，程式碼範例。

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

5、把盒子animation加@keyframes ，因為這是div元素勻速移動，程式碼範例。

@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大功告成

【完】

推薦學習：CSS3影片教學