㈠用HTML5+CSS3做無限滾動效果
⑴邏輯分析
⑵實踐示例
前5張圖片為所有圖片顯示區，假設總長度為1100px；
后面出現的五張圖片為克隆區，只是將前面的圖片拷貝了一份；
然后將前五張和后五張的內容“捆綁”放在一個ul中，滾動的時候，就可以使得他們整體移動了
為了方便起見，盡量將ul的寬度設置的大一點，這樣的話，可以容納足夠多的圖片，包括克隆的圖片
代碼示例：
<html> <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:300px; 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="#"><img src="xz6.jpg" /></a></li> <li><a href="#"><img src="xz2.jpg" /></a></li> <li><a href="#"><img src="xz3.jpg" /></a></li> <li><a href="#"><img src="xz4.jpg" /></a></li> <li><a href="#"><img src="xz1.jpg" /></a></li> <li><a href="#"><img src="xz6.jpg" /></a></li> <li><a href="#"><img src="xz2.jpg" /></a></li> <li><a href="#"><img src="xz3.jpg" /></a></li> <li><a href="#"><img src="xz4.jpg" /></a></li> <li><a href="#"><img src="xz1.jpg" /></a></li> </ul> </div> </body> </html>
效果圖：
㈡用HTML5+CSS3做文字跳動
思路分析：
1. 由於文字有層次感的跳動，所以我們應該 "各個擊破"， 每個文字有它自己的 "空間"。
2. 各個文字有先有后的跳動，所以我們應該一次遞增每個文字的動畫時長。
3. span標簽默認是行內元素；但是對它們進行float操作之后，它們會變成塊級元素。
代碼示例
<!DOCTYPE html> <html lang="en"> <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> <span>客</span> </h2> </body> </html>
效果圖：
參考：https://blog.csdn.net/sinat_27706697/article/details/49699367