css實現新聞公告上下翻滾效果
實現新聞公告上下翻滾效果以前都是用js實現,可以參閱jQuery單條新聞公告垂直輪播一章節。
下面分享一個使用純css實現的此功能,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> ul, li { margin: 0; padding: 0; } li { list-style: none; } .container { display: inline-block; background: #efefef; padding: 10px; border: 1px solid #ccc; font-family: "Microsoft YaHei"; } .container .li-box { height: 28px; overflow: hidden; } .container ul { position: relative; animation: moveUp 8s 0.6s infinite; -webkit-animation: moveUp 8s 0.6s infinite; } @keyframes moveUp { 0% { top: 0px; } 18% { top: 0px; } 20% { top: -28px; } 38% { top: -28px; } 40% { top: -56px; } 58% { top: -56px; } 60% { top: -84px; } 78% { top: -84px; } 80% { top: -112px; } 98% { top: -112px; } } @-webkit-keyframes moveUp{ 0% { top: 0px; } 18% { top: 0px; } 20% { top: -28px; } 38% { top: -28px; } 40% { top: -56px; } 58% { top: -56px; } 60% { top: -84px; } 78% { top: -84px; } 80% { top: -112px; } 98% { top: -112px; } } .container li { line-height: 1.8; color: #666; } </style> </head> <body> <div class="container"> <div class="li-box"> <ul> <li>本站的url地址是www.softwhy.com</li> <li>只有努力奮鬥才會有美好的未來</li> <li>每一天都是新的必須要好好珍惜。</li> <li>當下的時間才是最寶貴的,下一秒都是虛幻</li> <li>歡迎提供有益的建議和意見。</li> <li>螞蟻部落位於青島市南區</li> </ul> </div> </div> </body> </html>
上面的程式碼實現了我們的要求,更多內容額可以參閱相關閱讀。
相關閱讀:
(1).animation可以參閱CSS3 animation一章節。
(2).@keyframes可以參閱CSS3 @keyframes一章節。
相關文章
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- CSS3實現的div塊上下左右翻滾效果CSSS3
- JavaScript 垂直新聞公告無縫滾動JavaScript
- JavaScript垂直新聞公告無縫滾動詳解JavaScript
- 報表中怎樣實現滾動的公告效果
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- css實現視差滾動效果CSS
- 單行新聞公告間歇垂直無縫滾動
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- 新聞公告具有時間間隔垂直滾動程式碼
- css border實現上下左右箭頭效果CSS
- 實現報表滾動到底部翻頁效果
- js、jQuery實現文字上下無縫輪播、滾動效果JSjQuery
- 使用純 CSS 實現滾動陰影效果CSS
- 監聽滾動,上下翻頁
- css3實現的立體滾動效果CSSS3
- css3實現的滾動的檯球效果CSSS3
- jQuery具有暫停功效果新聞列表向上滾動jQuery
- js和css3實現360旋轉滾動效果JSCSSS3
- 具有間歇效果的新聞列表垂直滾動程式碼
- css實現圖片上下左右居中效果程式碼例項CSS
- css翻頁效果CSS
- 如何實現報表滾動到底部進行翻頁的效果
- 一個有上下滾動效果的TextViewTextView
- 前端實現文字滾動效果前端
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- 網站首頁的輪播新聞flash效果實現網站
- css3實現的3D翻滾導航選單CSSS33D
- css 實現打分效果CSS
- jQuery滑動方式上下左右滾動效果jQuery
- JS圖片滾動(無縫、平滑、上下左右滾動)效果JS
- css實現滾動輪播CSS
- Android TextSwitcher通知公告自動上下滾動且帶點選事件Android事件
- js實現圖片上下滾動background-positionJS
- CSS完成視差滾動效果CSS
- CSS水平無縫滾動效果CSS
- CSS3翻轉效果CSSS3
- CSS實現鏤空效果CSS