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

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

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

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

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>點(diǎn)</li>   
  10.             <li>擊</li>   
  11.             <li>推</li>   
  12.             <li>薦</li>   
  13.         </ul>   
  14.         </div>   
  15.     </body>   

接下來我們在在style樣式里面調(diào)整樣式,實(shí)現(xiàn)他的滾動

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style>  /*先給個(gè)整體去除下劃線*/  
  2.         ul,li,ol{   
  3.             list-stylenone;   
  4.         }  /*這里也就是重點(diǎn)嘍,時(shí)間分段,到還沒滾動的時(shí)候時(shí)間經(jīng)過了0%所以left也就為0,當(dāng)開始滾動時(shí)間停止的時(shí)候那么就等于全部完成也就是100%,這句話寫不對效果就不出哦*/  
  5.         @-webkit-keyframes move {   
  6.                 0% {   
  7.                     left: 0;   
  8.                 }   
  9.                 100% {   
  10.                     left: -400px;   
  11.                 }   
  12.             }   
  13.        /*以下是布局樣式*/     
  14.         #div{   
  15.             width500px;   
  16.             height100px;   
  17.             margin100px auto;   
  18.             border5px solid green;   
  19.             positionrelative;       
  20.             overflowhidden;       
  21.         }   
  22.         #ul{   
  23.             positionabsolute;           
  24.             padding: 0;   
  25.             margin-top0px;       
  26.             width: 185%;   
  27.             displayblock;/*這句話也是至關(guān)重要的,少了這句話也不會滾動,我給他四個(gè)值,3s代表三秒之內(nèi)完成滾動,move這個(gè)名字對應(yīng)著上面時(shí)間分段的名字,infinite代表循環(huán)滾動,linear表示勻速滾動*/  
  28.             -webkit-animation: 3s move infinite linear;   
  29.         }   
  30.         #ul li{   
  31.             floatleft;   
  32.             backgroundblack;   
  33.             colorwhite;   
  34.             margin-left1px;   
  35.             width100px;   
  36.             height100px;       
  37.             text-aligncenter;   
  38.             line-height100px;   
  39.         }   
  40.         /*這句話代表鼠標(biāo)移動上去滾動會停止,類似于輪播*/  
  41.         #div:hover #ul {   
  42.         -webkit-animation-play-state: paused;   
  43.             }   
  44.     </style>   

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

相關(guān)文章

最新評論