創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為巴彥企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)，巴彥網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹CSS3如何實(shí)現(xiàn)圖片滾動(dòng)播放效果，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

CSS3實(shí)現(xiàn)圖片滾輪效果

在平常我們使用一些滾動(dòng)圖片的效果，都是用javascript代碼（JQuery）實(shí)現(xiàn)，但是在如今Html5和CSS3盛行的時(shí)代，可以替代javascript代碼來(lái)實(shí)現(xiàn)一些常見(jiàn)的效果來(lái)提高網(wǎng)頁(yè)的加載速度，對(duì)用戶來(lái)說(shuō)體驗(yàn)是更加友好的。

特別是現(xiàn)在微信平臺(tái)開(kāi)發(fā)比較火熱的年代，同樣的效果用HTML5+CSS3替代將會(huì)帶來(lái)更絕妙的移動(dòng)終端體驗(yàn)。比如本篇文章所要介紹的CSS3圖片滾輪效果。

本篇內(nèi)容的知識(shí)點(diǎn)來(lái)自于W3School官方文檔，CSS3 @keyframes 規(guī)則。

語(yǔ)法規(guī)則：

@keyframes 
animationname
 {
keyframes-selector
 {
css-styles
;}}

動(dòng)畫(huà)Animationname為動(dòng)畫(huà)名稱，由開(kāi)發(fā)者自定義，keyframes-selector為動(dòng)畫(huà)時(shí)長(zhǎng)的百分比（可以控制其運(yùn)動(dòng)速度）。

原理：在一個(gè)小的p里面嵌套著一個(gè)大p，小p和所要展示的單張圖片是同樣高寬，大p里面是一個(gè)橫向列表，包含所有要展示的圖片，在執(zhí)行過(guò)程中，通過(guò)改變大p的水平位置（每次向左或向右移動(dòng)一張圖片的寬度）來(lái)實(shí)現(xiàn)圖片切換。

Html關(guān)鍵代碼：

<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樣式關(guān)鍵代碼：

.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;}
 
}

如果想在展現(xiàn)形式上有所變更就需要調(diào)節(jié)百分比（圖片停留時(shí)間和滾動(dòng)速度）和移動(dòng)距離。

CSS3技術(shù)因?yàn)榭紤]到瀏覽器兼容問(wèn)題，所以要針對(duì)每種瀏覽器寫(xiě)出樣式，名稱更改為一下，其他相同。

@-o-keyframes myfirst

@-moz-keyframes myfirst

@-webkit-keyframes myfirst

滾動(dòng)算法優(yōu)化見(jiàn)demo

關(guān)于CSS3如何實(shí)現(xiàn)圖片滾動(dòng)播放效果就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章標(biāo)題：CSS3如何實(shí)現(xiàn)圖片滾動(dòng)播放效果-創(chuàng)新互聯(lián)
分享鏈接：http://chinadenli.net/article40/cedhho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、網(wǎng)站建設(shè)、動(dòng)態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、域名注冊(cè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)