創新互聯www.cdcxhl.cn八線動態BGP香港云服務器提供商，新人活動買多久送多久，劃算不套路！

成都創新互聯公司長期為數千家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為巴彥企業提供專業的網站設計制作、成都網站建設，巴彥網站改版等技術服務。擁有十多年豐富建站經驗和眾多成功案例,為您定制開發。

這篇文章運用簡單易懂的例子給大家介紹CSS3如何實現圖片滾動播放效果，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

CSS3實現圖片滾輪效果

在平常我們使用一些滾動圖片的效果，都是用javascript代碼（JQuery）實現，但是在如今Html5和CSS3盛行的時代，可以替代javascript代碼來實現一些常見的效果來提高網頁的加載速度，對用戶來說體驗是更加友好的。

特別是現在微信平臺開發比較火熱的年代，同樣的效果用HTML5+CSS3替代將會帶來更絕妙的移動終端體驗。比如本篇文章所要介紹的CSS3圖片滾輪效果。

本篇內容的知識點來自于W3School官方文檔，CSS3 @keyframes 規則。

語法規則：

@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

關于CSS3如何實現圖片滾動播放效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章標題：CSS3如何實現圖片滾動播放效果-創新互聯
分享鏈接：http://vcdvsql.cn/article40/cedhho.html

成都網站建設公司_創新互聯，為您提供網站設計公司、網站建設、動態網站、外貿網站建設、域名注冊、關鍵詞優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯