亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <body>   
  2.         <div id="div">   
  3.         <ul id="ul">   
  4.             <li>感</li>   
  5.             <li>覺(jué)</li>   
  6.             <li>好</li>   
  7.             <li>的</li>   
  8.             <li>請(qǐng)</li>   
  9.             <li>點(diǎn)</li>   
  10.             <li>擊</li>   
  11.             <li>推</li>   
  12.             <li>薦</li>   
  13.         </ul>   
  14.         </div>   
  15.     </body>   

接下來(lái)我們?cè)谠趕tyle樣式里面調(diào)整樣式，實(shí)現(xiàn)他的滾動(dòng)

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

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

相關(guān)文章

最新評(píng)論