css3水平無縫滾動效果
之前實現無縫滾動大多結合js,例如水平無縫滾動程式碼詳解一章節。
下面分享一個完全使用css3實現的水平無縫滾動效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #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; -webkit-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; } @keyframes move { 0% { left: 0; } 100% { left: -500px; } } #wrap:hover #list { -webkit-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>
上面程式碼實現水平無縫滾動效果,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼#wrap { width: 500px; height: 100px; border: 1px solid #000; position: relative; margin: 100px auto; overflow: hidden; }
最外層的元素,寬度為500px,高度為100px。
採用相對定位,這一點很重要,後面有介紹。
margin: 100px auto將其設定為水平居中。
overflow: hidden將設定超出它的元素被隱藏。
[CSS] 純文字檢視 複製程式碼#list { position: absolute; left: 0; top: 0; margin: 0; padding: 0; animation: 3s move infinite linear; width: 200%; }
設定它為相對定位,定位參考物件是它的父元素,因為父元素設定了相對定位。
並且設定left、top、margin和padding為0,那麼預設左對齊父元素。
animation: 3s move infinite linear,進行動畫效果。
width: 200%設定它的尺寸恰好是父元素的2倍,看HTML結構:
[HTML] 純文字檢視 複製程式碼<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>
重複2次12345,這樣可以保證水平滾動連續性效果,否則後面會出現空白。
[CSS] 純文字檢視 複製程式碼@keyframes move { 0% { left: 0; } 100% { left: -500px; } }
動畫方式設定left屬性值,最小left屬性值是-500px,恰好是完成一次12345的運動,由於後面還有一個重複的12345,所以就在視覺上實現了無縫水平滾動效果。
[CSS] 純文字檢視 複製程式碼#wrap:hover #list { animation-play-state: paused; }
滑鼠懸浮會暫停動畫效果。
二.相關閱讀:
(1).相對定位參閱CSS position:relative 相對定位一章節。
(2).絕對定位參閱CSS position:absolute 絕對定位一章節。
(3).animation參閱CSS3 animation一章節。
相關文章
- CSS水平無縫滾動效果CSS
- CSS 水平無縫滾動CSS
- 原生javascript實現的水平圖片無縫滾動效果JavaScript
- JavaScript水平無縫滾動程式碼JavaScript
- jQuery圖片無縫滾動效果jQuery
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- js無縫滾動JS
- js程式碼實現的圖片水平無縫滾動JS
- jquery實現的垂直或者水平無縫滾動外掛jQuery
- 無縫迴圈滾動
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- js-字幕無縫滾動JS
- JavaScript無縫滾動 記錄JavaScript
- vue.js無縫滾動Vue.js
- 向上無縫滾動--原理及思想
- jQuery 間歇的無縫滾動jQuery
- react無縫滾動輪播圖React
- CSS3 div水平運動效果CSSS3
- HTMl 中marquee標籤實現無縫滾動跑馬燈效果HTML
- js實現的單行文字不間斷無縫滾動效果JS
- CSS實現迴圈無縫滾動CSS
- JavaScript 垂直新聞公告無縫滾動JavaScript
- CSS3滾動條效果程式碼CSSS3
- JavaScript圖片橫向無縫滾動詳解JavaScript
- jQuery 圖片列表垂直間歇無縫滾動jQuery
- JQuery實現圖片輪播無縫滾動jQuery
- JavaScript垂直新聞公告無縫滾動詳解JavaScript
- C#資訊無縫滾動顯示程式碼C#
- JavaFx 實現水平滾動文字(跑馬燈效果)Java
- css3水平滑動導航選單效果CSSS3
- css3實現的立體滾動效果CSSS3
- 單行新聞公告間歇垂直無縫滾動
- 直播系統原始碼,vue實現無縫滾動原始碼Vue
- js文字橫向無縫滾動程式碼例項JS
- div滾動條樣式,水平滾動
- css3實現的滾動的檯球效果CSSS3
- vue無縫滾動的外掛開發填坑分享Vue
- H5移動端獲獎無縫滾動動畫實現H5動畫