CSS3如何實現圖片滾動播放效果（附程式碼）

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="/static/imghwm/default1.png"  data-src="imgs/logo.png"  class="lazy"   alt="CSS3如何實現圖片滾動播放效果（附程式碼）" ></a></li>
 
<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="imgs/name.png"  class="lazy"   alt="CSS3如何實現圖片滾動播放效果（附程式碼）" ></a></li>
 
<li><a href="#"><img  src="/static/imghwm/default1.png"  data-src="imgs/mmc.png"  class="lazy"   alt="CSS3如何實現圖片滾動播放效果（附程式碼）" ></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中文網其他相關文章！