css3實作動畫捲軸
- WBOY原創
- 2016-08-04 08:53:131547瀏覽
先給大家一張效果圖，看似簡單，其實實現起來....那也是非常簡單的~簡單又實用
黑框裡面的字體會自動滾動，形成滾動條，可以用於展示和提示，首先我們先要在body裡面寫上自己想要的文字，比如我想寫：感覺好的請點擊推薦
<body>
<div id=<span style="color: #800000;">"</span><span style="color: #800000;">div</span><span style="color: #800000;">"</span>>
<ul id=<span style="color: #800000;">"</span><span style="color: #800000;">ul</span><span style="color: #800000;">"</span>>
<li>感</li>
<li>觉</li>
<li>好</li>
<li>的</li>
<li>请</li>
<li>点</li>
<li>击</li>
<li>推</li>
<li>荐</li>
</ul>
</div>
</body>
接下來我們在style樣式裡面調整樣式，實現他的滾動
<span style="color: #800000;"><style><br> /*先给个整体去除下划线*/
ul,li,ol</span>{<span style="color: #ff0000;">
list-style</span>:<span style="color: #0000ff;"> none</span>;
}<br> <br><span style="color: #800000;">/*这里也就是重点喽，时间分段，到还没滚动的时候时间经过了0%所以left也就为0，当开始滚动时间停止的时候那么就等于全部完成也就是100%，这句话写不对效果就不出哦*/
@-webkit-keyframes move </span>{<span style="color: #ff0000;">
0% {
left</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
100% </span>{<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> -400px</span>;
}<span style="color: #800000;">
}
<br>/*以下是布局样式*/
#div</span>{<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 500px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 100px auto</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 5px solid green</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">
overflow</span>:<span style="color: #0000ff;"> hidden</span>;
}<span style="color: #800000;">
#ul</span>{<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
padding</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
margin-top</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 185%</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> block</span>;<br>/*这句话也是至关重要的，少了这句话也不会滚动，我给他四个值，3s代表三秒之内完成滚动，move这个名字对应着上面时间分段的名字，infinite代表循环滚动，linear表示匀速滚动*/<br><span style="color: #ff0000;">
-webkit-animation</span>:<span style="color: #0000ff;"> 3s move infinite linear</span>;
}<span style="color: #800000;">
#ul li</span>{<span style="color: #ff0000;">
float</span>:<span style="color: #0000ff;"> left</span>;<span style="color: #ff0000;">
background</span>:<span style="color: #0000ff;"> black</span>;<span style="color: #ff0000;">
color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
margin-left</span>:<span style="color: #0000ff;"> 1px</span>;<span style="color: #ff0000;">
width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
text-align</span>:<span style="color: #0000ff;"> center</span>;<span style="color: #ff0000;">
line-height</span>:<span style="color: #0000ff;"> 100px</span>;
}
<span style="color: #008000;">/*这句话代表鼠标移动上去滚动会</span><span style="color: #008000;">停止，类似于轮播</span><span style="color: #008000;">*/</span><span style="color: #800000;">
#div:hover #ul </span>{<span style="color: #ff0000;">
-webkit-animation-play-state</span>:<span style="color: #0000ff;"> paused</span>;
}<span style="color: #800000;">
</style></span>
以上是實現滾動條的所有代碼，覺得讚的人可以點擊推薦謝謝~
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：CSS之後代選擇器與多類別選擇器下一篇：CSS之後代選擇器與多類別選擇器