CSS3實現圖片滾輪效果
#在平常我們使用一些滾動圖片的效果，都是用javascript程式碼（JQuery）實現，但是在如今Html5和CSS3盛行的時代，可以取代javascript程式碼來實現一些常見的效果來提高網頁的載入速度，對使用者來說體驗是更友善的。
特別是現在微信平台開發比較火熱的年代，同樣的效果用HTML5 CSS3替代將會帶來更絕妙的行動終端體驗。例如本篇文章所要介紹的CSS3圖片滾輪效果。
本篇內容的知識點來自於W3School官方文檔，CSS3 @keyframes 規則。
網址連結：http://www.w3school.com.cn/css3/css3_animation.asp
語法規則：
@keyframes
animationname
{
keyframes-selector
{
css-styles
;}}動畫Animationname為動畫名稱，由開發者自訂，keyframes-selector為動畫時長的百分比（可控制其運動速度）。
原理：在一個小的p裡面嵌套著一個大p，小p和所要展示的單張圖片是同樣高寬，大p裡面是一個橫向列表，包含所有要展示的圖片，在執行過程中，透過改變大p的水平位置（每次向左或向右移動一張圖片的寬度）來實現圖片切換。
Html關鍵程式碼：
<p class="container"> <p class="img"> <ul class="nav"> <li><a href="#"><img src="imgs/logo.png"></a></li> <li><a href="#"><img src="imgs/name.png"></a></li> <li><a href="#"><img src="imgs/mmc.png"></a></li> </ul> </p> </p>
CSS樣式關鍵程式碼：
.nav{
width:2000px;
height:150px;
position:absolute;
left:0px;
top:0;
z-index:9;
animation:myfirst 6s infinite;
-webkit-animation:myfirst 6s infinite;
-0-animation:myfirst 6s infinite;
-moz-animation:myfirst 6s infinite;
}
@keyframes myfirst
{
0% {left: 0px;}
26.6% {left: 0px;}
36.6% {left: -320px;}
63.2% {left: -320px;}
73.2% {left: -640px;}
99.7% {left: -640px;}
100% {left: -0px;}
}如果想在展現形式上有所變更就需要調整百分比（圖片停留時間和滾動速度）和移動距離。
CSS3技術因為考慮到瀏覽器相容問題，所以要針對每個瀏覽器寫出樣式，名稱改為一下，其他相同。
@-o-keyframes myfirst
@-moz-keyframes myfirst
@-webkit-keyframes myfirst
滾動演算法最佳化見demo
#Demo示範連結
http://wongleetion.sinaapp.com/
本文轉自：https://blog.csdn.net/u013741507/article/details/ 38779093
推薦教學：《CSS教學》
以上是CSS3如何實現圖片滾動播放效果（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
