DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> 關於CSS >> CSS3實現滾動條動畫效果代碼分享
CSS3實現滾動條動畫效果代碼分享
編輯：關於CSS     

先給大家一張效果圖，看似簡單，其實實現起來....那也是非常簡單的~簡單又實用
 
黑框裡面的字體會自動滾動，形成滾動條，可以用於展示和提示，首先我們先要在body裡面寫上自己想要的文字，比如我想寫：感覺好的請點擊推薦

CSS Code復制內容到剪貼板
  1. <body>   
  2.         <div id="div">   
  3.         <ul id="ul">   
  4.             <li>感</li>   
  5.             <li>覺</li>   
  6.             <li>好</li>   
  7.             <li>的</li>   
  8.             <li>請</li>   
  9.             <li>點</li>   
  10.             <li>擊</li>   
  11.             <li>推</li>   
  12.             <li>薦</li>   
  13.         </ul>   
  14.         </div>   
  15.     </body>   

接下來我們在在style樣式裡面調整樣式，實現他的滾動

CSS Code復制內容到剪貼板
  1. <style>　　/*先給個整體去除下劃線*/  
  2.         ul,li,ol{   
  3.             list-style: none;   
  4.         }　　/*這裡也就是重點喽，時間分段，到還沒滾動的時候時間經過了0%所以left也就為0，當開始滾動時間停止的時候那麼就等於全部完成也就是100%，這句話寫不對效果就不出哦*/  
  5.         @-webkit-keyframes move {   
  6.                 0% {   
  7.                     left: 0;   
  8.                 }   
  9.                 100% {   
  10.                     left: -400px;   
  11.                 }   
  12.             }   
  13.        /*以下是布局樣式*/     
  14.         #div{   
  15.             width: 500px;   
  16.             height: 100px;   
  17.             margin: 100px auto;   
  18.             border: 5px solid green;   
  19.             position: relative;       
  20.             overflow: hidden;       
  21.         }   
  22.         #ul{   
  23.             position: absolute;           
  24.             padding: 0;   
  25.             margin-top: 0px;       
  26.             width: 185%;   
  27.             display: block;/*這句話也是至關重要的，少了這句話也不會滾動，我給他四個值，3s代表三秒之內完成滾動，move這個名字對應著上面時間分段的名字，infinite代表循環滾動，linear表示勻速滾動*/  
  28.             -webkit-animation: 3s move infinite linear;   
  29.         }   
  30.         #ul li{   
  31.             float: left;   
  32.             background: black;   
  33.             color: white;   
  34.             margin-left: 1px;   
  35.             width: 100px;   
  36.             height: 100px;       
  37.             text-align: center;   
  38.             line-height: 100px;   
  39.         }   
  40.         /*這句話代表鼠標移動上去滾動會停止，類似於輪播*/  
  41.         #div:hover #ul {   
  42.         -webkit-animation-play-state: paused;   
  43.             }   
  44.     </style>   

以上所述是小編給大家介紹的CSS3實現動畫滾動條代碼分享，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！

關於CSS
display和visibility的區別
visibility隱藏的對象還保留對象顯示時所占的物理空間，display則不保留。vilibil
用CSS3的box-reflect來制作倒影效果
兼容性既然是CSS3的屬性，我們當然要來看看兼容性：點擊查看接下來，我們來了解box-reflect
利用CSS定位背景圖片的常用方法總結
前言大家在網上最常見的一種方案就是在父元素中relative，然後子元素absolute。這種方案當

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS3 animation實現簡易幻燈片輪播特效 CSS樣式表實現效果很好的分頁效果源代碼 CSS技巧:段正淳的css筆記 空心三角形的簡單實現(必看篇) 利用CSS3實現折角效果實例源碼 淺談CSS過渡、動畫和變換 淺析word-break work-wrap的區別 CSS＋DIV制作網頁時易犯的錯誤總結 CSS實現三欄布局的四種方法示例 CSS3利用text-shadow屬性實現多種效果的文字樣式展現方法
熱門推薦
網頁制作：使用css設置iframe樣式 使用CheckBox的屬性制作純css動態導航欄 如何快速的呈現我們的網頁 CSS圓角技術 css3動畫效果小結(推薦) CSS+DIV制作頁面圓角效果 用css實現文字的自動隱藏 淺談css中vertical-align和line-height的用法 CSS知識總結
大家都在看
JS實現的數組全排列輸出算法 JavaScript執行順序詳細介紹 js檢查手機訪問進行手機網站代碼 JavaScript刪除指定子元素代碼實例 Jquery中刪除元素的實現代碼 jquery 實現兩Select 標簽項互調示例代碼 你問我答：XML與HTML的區別 分析DOM樹的結構
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved