基于HTML5+CSS3的圖片旋轉、無限滾動、文字跳動特效

基于HTML5+CSS3的圖片旋轉、無限滾動、文字跳動特效href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"href="20170711122112.html"
本文分(fēn)享幾種基于HTML5+CSS3實現的一(yī)些動畫特效：圖片旋轉、無限滾動、文字跳動;實現起來均比較容易，動手來試試!

=====================================================
一(yī)、圖片旋轉
=====================================================
代碼如下(xià)：
<style type="text/css">
#liu{ width:280px; height: 279px; background: url(背景圖片.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>
<div id="liu"></div>

-----------------------------------------------------
說明：
1. id爲liu的div就是用來展示圖片的區域，隻不過這裏的圖片是使用的背景圖片，并且通過設置圓角來達到圓形的效果。

2. 代碼中(zhōng)關鍵的部分(fēn)是怎樣使得圖片無限轉動。我(wǒ)(wǒ)們可以使用-webkit-animation和@-webkit-keyframes組合使用來完成。
      -webkit-animation是一(yī)個複合屬性，定義如下(xià)：
      -webkit-animation: name duration timing-function delay iteration_count direction;
      name: 是@-webkit-keyframes 中(zhōng)需要指定的方法，用來執行動畫。
      duration: 動畫一(yī)個周期執行的時長。
      timing-function: 動畫執行的效果，可以是線性的，也可以是"快速進入慢(màn)速出來"等。
      delay: 動畫延時執行的時長。
      iteration_count: 動畫循環執行次數，如果是infinite，則無限執行。
      direction: 動畫執行方向。

3. @-webkit-keyframes 中(zhōng)的from和to 兩個屬性，就是指定動畫執行的初始值和結束值。

4. -webkit-animation-play-state:paused; 暫停動畫的執行。

=====================================================
二、無限滾動
=====================================================
代碼如下(xià)：
<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>
<div id="container">
<ul>
<li><a href="#"><img src="0.png"></a></li>
            <li><a href="#"><img src="1.png"></a></li>
            <li><a href="#"><img src="2.png"></a></li>
            <li><a href="#"><img src="3.png"></a></li>
            <li><a href="#"><img src="4.png"></a></li>
            <li><a href="#"><img src="0.png"></a></li>
            <li><a href="#"><img src="1.png"></a></li>
            <li><a href="#"><img src="2.png"></a></li>
            <li><a href="#"><img src="3.png"></a></li>
            <li><a href="#"><img src="4.png"></a></li>
      </ul>
</div>

=====================================================
三、文字跳動
=====================================================

我(wǒ)(wǒ)們經常可以看到用flash完成的一(yī)些文字跳動效果，不過，現在我(wǒ)(wǒ)們也可以通過HTML5+CSS3來輕松的實現這樣的效果：

思路分(fēn)析：
1. 由于文字有層次感的跳動，所以我(wǒ)(wǒ)們應該 "各個擊破"， 每個文字有它自己的 "空間"。
2. 各個文字有先有後的跳動，所以我(wǒ)(wǒ)們應該一(yī)次遞增每個文字的動畫時長。

根據以上兩點分(fēn)析，我(wǒ)(wǒ)們依舊(jiù)可以使用-webkit-animation 和@-webkit-keyframes 組合來完成動畫效果，代碼清單如下(xià):

代碼如下(xià)：
<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>
<h2>
<span>我(wǒ)(wǒ)</span>
<span>愛</span>
<span>你</span>
<span>中(zhōng)</span>
<span>國</span>
</h2>

需要說明一(yī)點的是：span标簽默認是行内元素;但是對他們進行float操作之後，他們會變成塊級元素。