這篇“Css3如何實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖”文章,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要參考一下,對(duì)于“Css3如何實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖”,小編整理了以下知識(shí)點(diǎn),請(qǐng)大家跟著小編的步伐一步一步的慢慢理解,接下來(lái)就讓我們進(jìn)入主題吧。
問(wèn)題
圖片加文字的無(wú)縫滾動(dòng),在手機(jī)端的效果總體還行,但是圖片在手機(jī)某些瀏覽器會(huì)抖得膩害!
錯(cuò)誤寫(xiě)法
不能用left,margin-left,像這種寫(xiě)法:
.donghua.active{ animation: scoll ease-in-out 1s infinite alternate; -webkit-animation: scoll ease-in-out 1s infinite alternate; } @keyframes scoll { from { left: 0; } to { left: -353px; } } -webkit-@keyframes scoll { from { left: 0; } to { left: -353px; } }
解決方法
里面的某個(gè)元素在手機(jī)端會(huì)抖動(dòng)的膩害,改用二維的translate像這樣:
.donghua.active{ animation: scoll ease-in-out 1s infinite alternate; -webkit-animation: scoll ease-in-out 1s infinite alternate; } @keyframes scoll { 0% { transform: translate(0px, 0px); } 100% { transform: translate(0px, -353px); } } @-webkit-keyframes scoll { 0% { transform: translate(0px, 0px); } 100% { transform: translate(0px, -353px); } }
以上是“Css3如何實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站題目:Css3如何實(shí)現(xiàn)無(wú)縫滾動(dòng)防抖-創(chuàng)新互聯(lián)
文章源于:http://aaarwkj.com/article48/dspdep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、服務(wù)器托管、網(wǎng)站收錄、建站公司、微信小程序、網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(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)
猜你還喜歡下面的內(nèi)容