溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關CSS3中怎么實現(xiàn)滾動條動畫效果，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
<body>
<div id="div">
<ul id="ul">
<li>感</li>
<li>覺</li>
<li>好</li>
<li>的</li>
<li>請</li>
<li>點</li>
<li>擊</li>
<li>推</li>
<li>薦</li>
</ul>
</div>
</body>
接下來我們在在style樣式里面調整樣式，實現(xiàn)他的滾動
CSS Code復制內容到剪貼板
<style> /*先給個整體去除下劃線*/
ul,li,ol{
list-style: none;
} /*這里也就是重點嘍，時間分段，到還沒滾動的時候時間經(jīng)過了0%所以left也就為0，當開始滾動時間停止的時候那么就等于全部完成也就是100%，這句話寫不對效果就不出哦*/
@-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;/*這句話也是至關重要的，少了這句話也不會滾動，我給他四個值，3s代表三秒之內完成滾動，move這個名字對應著上面時間分段的名字，infinite代表循環(huán)滾動，linear表示勻速滾動*/
-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;
}
/*這句話代表鼠標移動上去滾動會停止，類似于輪播*/
#div:hover #ul {
-webkit-animation-play-state: paused;
}
</style>
以上就是CSS3中怎么實現(xiàn)滾動條動畫效果，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
