您好,登錄后才能下訂單哦!
這篇文章運(yùn)用簡單易懂的例子給大家介紹CSS3如何實(shí)現(xiàn)圖片滾動(dòng)播放效果,代碼非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
CSS3實(shí)現(xiàn)圖片滾輪效果
在平常我們使用一些滾動(dòng)圖片的效果,都是用javascript代碼(JQuery)實(shí)現(xiàn),但是在如今Html5和CSS3盛行的時(shí)代,可以替代javascript代碼來實(shí)現(xiàn)一些常見的效果來提高網(wǎng)頁的加載速度,對用戶來說體驗(yàn)是更加友好的。
特別是現(xiàn)在微信平臺(tái)開發(fā)比較火熱的年代,同樣的效果用HTML5+CSS3替代將會(huì)帶來更絕妙的移動(dòng)終端體驗(yàn)。比如本篇文章所要介紹的CSS3圖片滾輪效果。
本篇內(nèi)容的知識點(diǎn)來自于W3School官方文檔,CSS3 @keyframes 規(guī)則。
語法規(guī)則:
@keyframes animationname { keyframes-selector { css-styles ;}}
動(dòng)畫Animationname為動(dòng)畫名稱,由開發(fā)者自定義,keyframes-selector為動(dòng)畫時(shí)長的百分比(可以控制其運(yùn)動(dòng)速度)。
原理:在一個(gè)小的p里面嵌套著一個(gè)大p,小p和所要展示的單張圖片是同樣高寬,大p里面是一個(gè)橫向列表,包含所有要展示的圖片,在執(zhí)行過程中,通過改變大p的水平位置(每次向左或向右移動(dòng)一張圖片的寬度)來實(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)榭紤]到瀏覽器兼容問題,所以要針對每種瀏覽器寫出樣式,名稱更改為一下,其他相同。
@-o-keyframes myfirst
@-moz-keyframes myfirst
@-webkit-keyframes myfirst
滾動(dòng)算法優(yōu)化見demo
關(guān)于CSS3如何實(shí)現(xiàn)圖片滾動(dòng)播放效果就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。