本人錄制技術視訊位址：https://edu.csdn.net/lecturer/1899 歡迎觀看。
這一節，繼續為大家介紹，使用 HTML5 + CSS3 實作的一些動畫特效。由于它們實作起來比較容易，是以我将它們放在一節中講解。
一、圖檔旋轉
效果圖如下：
這個效果實作起來其實并不困難。代碼清單如下:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#liu{
width:280px;
height: 279px;
background: url(shishi.png) no-repeat;
border-radius:140px;
-webkit-animation:run 6s linear 0s infinite;
}
#liu:hover{
-webkit-animation-play-state:paused;
}
@-webkit-keyframes run{
from{
-webkit-transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
}
}
</style>
</head>
<body>
<div id="liu"></div>
</body>
</html>
1. id為liu的div就是用來展示圖檔的區域，隻不過這裡的圖檔是使用的背景圖檔，并且通過設定圓角來達到圓形的效果。
2. 代碼中關鍵的部分是怎樣使得圖檔無限轉動。 我們可以使用 -webkit-animation 和 @-webkit-keyframes 組合使用來完成。
-webkit-animation 是一個複合屬性，定義如下：
-webkit-animation: name duration timing-function delay iteration_count direction;
name: 是 @-webkit-keyframes 中需要指定的方法，用來執行動畫。
duration: 動畫一個周期執行的時長。
timing-function: 動畫執行的效果，可以是線性的，也可以是"快速進入慢速出來"等。
delay: 動畫延時執行的時長。
iteration_count: 動畫循環執行次數，如果是infinite，則無限執行。
direction: 動畫執行方向。
3. @-webkit-keyframes 中的from和to 兩個屬性，就是指定動畫執行的初始值和結束值。
4. -webkit-animation-play-state:paused; 暫停動畫的執行。
二、無限滾動
其實關于無限滾動的實作，我在JS & JQuery 的 無縫連續滾動 這一章節中用JQuery實作了一篇，如果感興趣的話，可以點選檢視。我們先看看效果圖：
我們這裡采用HTML5+CSS3實作，比用JQuery簡單的多了，下圖為邏輯分析圖：
分析完畢後，代碼就友善書寫了，代碼清單如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width:800px;
height:200px;
margin:100px auto;
overflow: hidden;
position: relative;
}
#container ul{
list-style: none;
width:4000px;
left:0;
top:0;
position: absolute;
-webkit-animation:scoll 6s linear 0s infinite;
}
#container ul li{
float:left;
margin-right:20px;
}
@-webkit-keyframes scoll{
from{
left:0;
}
to{
left:-1100px;
}
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/0.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/1.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/2.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/3.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/4.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/0.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/1.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/2.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/3.png" /></a></li>
<li><a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><img src="images/4.png" /></a></li>
</ul>
</div>
</body>
</html>
三、文字跳動
我們經常可以看到用flash完成的一些文字跳動效果，不過，現在我們也可以通過HTML5+CSS3來輕松的實作這樣的效果，效果圖如下：
思路分析：
1. 由于文字有層次感的跳動，是以我們應該 "各個擊破"， 每個文字有它自己的 "空間"。
2. 各個文字有先有後的跳動，是以我們應該一次遞增每個文字的動畫時長。
根據以上兩點分析，我們依舊可以使用-webkit-animation 和 @-webkit-keyframes 組合來完成動畫效果，代碼清單如下:
需要說明一點的是：
span标簽預設是行内元素；但是對他們進行float操作之後，他們會變成塊級元素。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
h2 span{
float:left;
position: relative;
}
h2 span:nth-child(1){
-webkit-animation:jump 1s linear 0s infinite alternate;
}
h2 span:nth-child(2){
-webkit-animation:jump 1s linear 0.2s infinite alternate;
}
h2 span:nth-child(3){
-webkit-animation:jump 1s linear 0.4s infinite alternate;
}
h2 span:nth-child(4){
-webkit-animation:jump 1s linear 0.6s infinite alternate;
}
h2 span:nth-child(5){
-webkit-animation:jump 1s linear 0.8s infinite alternate;
}
@-webkit-keyframes jump
{
0%{
top:0px;
color:red;
}
50%{
top:-10px;
color:green;
}
100%{
top:10px;
color:blue;
}
}
</style>
</head>
<body>
<h2>
<span>我</span>
<span>愛</span>
<span>你</span>
<span>中</span>
<span>國</span>
</h2>
</body>
</html>