欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3實現(xiàn)滾動條動畫效果代碼分享

  發(fā)布時間：2016-08-03 09:32:21   作者：佚名   我要評論
本文給大家介紹CSS3實現(xiàn)動畫滾動條代碼分享的全部內(nèi)容，代碼簡單易懂，功能非常的實用，下面小編給大家分享下

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

CSS Code復(fù)制內(nèi)容到剪貼板
  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樣式里面調(diào)整樣式，實現(xiàn)他的滾動

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>　　/*先給個整體去除下劃線*/  
  2.         ul,li,ol{   
  3.             list-style: none;   
  4.         }　　/*這里也就是重點嘍，時間分段，到還沒滾動的時候時間經(jīng)過了0%所以left也就為0，當(dāng)開始滾動時間停止的時候那么就等于全部完成也就是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;/*這句話也是至關(guān)重要的，少了這句話也不會滾動，我給他四個值，3s代表三秒之內(nèi)完成滾動，move這個名字對應(yīng)著上面時間分段的名字，infinite代表循環(huán)滾動，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.         /*這句話代表鼠標(biāo)移動上去滾動會停止，類似于輪播*/  
  41.         #div:hover #ul {   
  42.         -webkit-animation-play-state: paused;   
  43.             }   
  44.     </style>   

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

相關(guān)文章

最新評論