CSS水平無縫滾動效果
分享一段程式碼例項,它利用純css實現了水平無縫滾動效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> @keyframes move { 0% { left: 0; } 100% { left: -500px; } } #wrap { width: 500px; height: 100px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden; } #list { position: absolute; left: 0; top: 0; margin: 0; padding: 0; animation: 3s move infinite linear; width: 200%; } #list li { list-style: none; width: 98px; height: 98px; border: 1px solid #fff; background: #000; color: #fff; font: 50px/98px Arial; text-align: center; float: left; } #wrap:hover #list { animation-play-state: paused; } </style> </head> <body> <div id="wrap"> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).@keyframes參閱CSS3 @keyframes一章節。
(2).animation參閱CSS3 animation一章節。
(3).animation-play-state參閱css3 animation-play-state一章節。
相關文章
- css3水平無縫滾動效果CSSS3
- CSS 水平無縫滾動CSS
- 原生javascript實現的水平圖片無縫滾動效果JavaScript
- JavaScript水平無縫滾動程式碼JavaScript
- jQuery圖片無縫滾動效果jQuery
- CSS實現迴圈無縫滾動CSS
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- js無縫滾動JS
- js程式碼實現的圖片水平無縫滾動JS
- jquery實現的垂直或者水平無縫滾動外掛jQuery
- 無縫迴圈滾動
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- js-字幕無縫滾動JS
- JavaScript無縫滾動 記錄JavaScript
- vue.js無縫滾動Vue.js
- 向上無縫滾動--原理及思想
- jQuery 間歇的無縫滾動jQuery
- react無縫滾動輪播圖React
- HTMl 中marquee標籤實現無縫滾動跑馬燈效果HTML
- js實現的單行文字不間斷無縫滾動效果JS
- 怎樣用原生js配合css的transition寫個無縫滾動JSCSS
- JavaScript 垂直新聞公告無縫滾動JavaScript
- CSS完成視差滾動效果CSS
- CSS3 div水平運動效果CSSS3
- JavaScript圖片橫向無縫滾動詳解JavaScript
- jQuery 圖片列表垂直間歇無縫滾動jQuery
- JQuery實現圖片輪播無縫滾動jQuery
- JavaScript垂直新聞公告無縫滾動詳解JavaScript
- C#資訊無縫滾動顯示程式碼C#
- JavaFx 實現水平滾動文字(跑馬燈效果)Java
- css實現視差滾動效果CSS
- 單行新聞公告間歇垂直無縫滾動
- 直播系統原始碼,vue實現無縫滾動原始碼Vue
- js文字橫向無縫滾動程式碼例項JS
- css-虛線邊框滾動效果CSS
- CSS3滾動條效果程式碼CSSS3
- div滾動條樣式,水平滾動
- vue無縫滾動的外掛開發填坑分享Vue