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

發(fā)布時(shí)間：2016-08-03 09:32:21 作者：佚名

本文給大家介紹CSS3實(shí)現(xiàn)動(dòng)畫滾動(dòng)條代碼分享的全部?jī)?nèi)容，代碼簡(jiǎn)單易懂，功能非常的實(shí)用，下面小編給大家分享下

先給大家一張效果圖，看似簡(jiǎn)單，其實(shí)實(shí)現(xiàn)起來....那也是非常簡(jiǎn)單的~簡(jiǎn)單又實(shí)用

黑框里面的字體會(huì)自動(dòng)滾動(dòng)，形成滾動(dòng)條，可以用于展示和提示，首先我們先要在body里面寫上自己想要的文字，比如我想寫：感覺好的請(qǐng)點(diǎn)擊推薦

CSS Code復(fù)制內(nèi)容到剪貼板

<body>
<div id="div">
<ul id="ul">
<li>感</li>
<li>覺</li>
<li>好</li>
<li>的</li>
<li>請(qǐng)</li>
<li>點(diǎn)</li>
<li>擊</li>
<li>推</li>
<li>薦</li>
</ul>
</div>
</body>

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

CSS Code復(fù)制內(nèi)容到剪貼板

<style>　　/*先給個(gè)整體去除下劃線*/
ul,li,ol{
list-style: none;
}　　/*這里也就是重點(diǎn)嘍，時(shí)間分段，到還沒滾動(dòng)的時(shí)候時(shí)間經(jīng)過了0%所以left也就為0，當(dāng)開始滾動(dòng)時(shí)間停止的時(shí)候那么就等于全部完成也就是100%，這句話寫不對(duì)效果就不出哦*/
@-webkit-keyframes move {
0% {
left: 0;
}
100% {
left: -400px;
}
}
/*以下是布局樣式*/
#div{
width: 500px;
height: 100px;
margin: 100px auto;
border: 5px solid green;
position: relative;
overflow: hidden;
}
#ul{
position: absolute;
padding: 0;
margin-top: 0px;
width: 185%;
display: block;/*這句話也是至關(guān)重要的，少了這句話也不會(huì)滾動(dòng)，我給他四個(gè)值，3s代表三秒之內(nèi)完成滾動(dòng)，move這個(gè)名字對(duì)應(yīng)著上面時(shí)間分段的名字，infinite代表循環(huán)滾動(dòng)，linear表示勻速滾動(dòng)*/
-webkit-animation: 3s move infinite linear;
}
#ul li{
float: left;
background: black;
color: white;
margin-left: 1px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
/*這句話代表鼠標(biāo)移動(dòng)上去滾動(dòng)會(huì)停止，類似于輪播*/
#div:hover #ul {
-webkit-animation-play-state: paused;
}
</style>

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

Tag：CSS3 動(dòng)畫滾動(dòng)條

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關(guān)文章

最新評(píng)論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容