大家可能經常會看到酷炫的網站

在這類網站中能看到，一打開頁面，無論是文字還是圖片，都隨著規定時間的而變化。原理很簡單，主要用到CSS中animation屬性。

接下來，我以我目前的工程項目為例，實現文字和圖片的動畫效果。

HTML代碼編寫：

復制代碼

代碼如下:

 section >
目前大體的框架已經寫好，包含一個section標簽，span（根據喜好添加）,h2標簽。接下來向其中添加文字代碼。將代碼放在h2中。
復制代碼
代碼如下:
 p >
第一種文字動畫HTML。
復制代碼
代碼如下:
 p >
第二種文字動畫HTML。
復制代碼
代碼如下:
//同理 p >
圖片變換效果，如上GIF的展示。圖片從右滑動并更替。
ok,至此HTML代碼搞定，現在來實現最核心的部分：CSS設置動畫及字體樣式。
CSS代碼編寫
復制代碼
代碼如下:
.rw-words{-webkit-perspective:800px;-moz-perspective:800px;-o-perspective:800px;-ms-perspactive:800px;perspactive:800px;}
這里順帶一講，perspective 屬性定義 3D 元素距視圖的距離，以像素計。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。數字800px代表元素距離視圖的距離。-moz代表firefox瀏覽器私有屬性，-ms代表IE瀏覽器私有屬性，-webkit代表chrome、safari私有屬性，-o代表opera瀏覽器私有屬性.
復制代碼
代碼如下:
.rw-words span{white-space:nowrap; //文字不允許換行overflow:hidden;}
對于具體的 span 標簽位置設置根據實際情況設置。
復制代碼
代碼如下:
.rw-words-1 span{-webkit-animation: rotateWordsFirst 10s linear infinite 0s;-o-animation: rotateWordsFirst 10s linear infinite 0s;-moz-animation: rotateWordsFirst 10s linear infinite 0s;-ms-animation: rotateWordsFirst 10s linear infinite 0s;animation:rotateWordsFirst 10s linear infinite 0s;}
這里使用動畫效果！首先rotateWordsFirst是動畫的名稱，10s 是整個動畫完成一次的時間，linear是使用的時間曲線，infinite重復次數無限。
關于animation語法：
復制代碼
代碼如下:
animation: name duration timing-function delay iteration-count direction;
animation-name：規定需要綁定到選擇器的 keyframe 名稱。
animation-duration：規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function ：規定動畫的速度曲線。
animation-delay ：規定在動畫開始之前的延遲。
animation-iteration-count ：規定動畫應該播放的次數（ infinite無限輪播 ）
animation-direction ：規定是否應該輪流反向播放動畫。
想要更多了解的，搜索：CSS系列之animationi.
接下來，animation的另一種。
復制代碼
代碼如下:
.rw-words-2 span{-webkit-animation: rotateWordsFirst 10s ease-in infinite 0s;-o-animation: rotateWordsFirst 10s ease-in infinite 0s;-moz-animation: rotateWordsFirst 10s ease-in infinite 0s;-ms-animation: rotateWordsFirst 10s ease-in infinite 0s;animation:rotateWordsFirst 10s ease-in infinite 0s;}
ease-in解釋：
ease 規定慢速開始，然后變快，然后慢速結束的過渡效果; ease-in 規定以慢速開始的過渡效果; ease-out 規定以慢速結束的過渡效果; ease-in-out 規定以慢速開始和結束的過渡效果（這幾種效果大家都可以嘗試）
同理，對.rw-words-3 span可以用同樣的方式設置。
復制代碼
代碼如下:
.rw-words span：nth-child(1){-webkit-animation-delay: 3s;-moz-animation-delay: 3s;-o-animation-delay: 3s;-ms-animation-delay: 3s;animation-delay: 3s;}
:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素，不論元素的類型。n 可以是數字、關鍵詞或公式。
復制代碼
代碼如下:
.rw-words span:nth-child(n) {-webkit-animation-delay: 6s;-moz-animation-delay: 6s;-o-animation-delay: 6s;-ms-animation-delay: 6s;animation-delay: 6s;...
設置不同的選擇器，來實現文字之間的顯示延遲。
復制代碼
代碼如下:
@-webkit-keyframes rotateWordsFirst/second {0% { opacity: 0; -webkit-animation-timing-function: ease-in; width: 0px;}//此屬性查看animation5% { opacity: 1; -webkit-animation-timing-function: ease-out; width: 100%;}17% { opacity: 1; } //設置不透明級別20% { opacity: 0; }100% { opacity: 0; }}
keyframes對每一個動畫定義時間軸，可以設置某個時間動畫作用的元素是什么狀態。與animation配合使用。
然后寫出各個瀏覽器的適配，如-o,-moz,-ms等。
除了animation屬性，各位還可以試試transform屬性的使用，可以實現文字及其圖像的旋轉，縮放等效果，以上就是利用純CSS實現動態的文字效果的全部內容，希望能對大家學習使用CSS有所幫助。
相關推薦：
CSS 文本字體顏色設置方法(CSS color)
以上就是利用純CSS實現動態的文字效果實例的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。