先給大家一張效果圖,看似簡單,其實實現起來....那也是非常簡單的~簡單又實用
黑框裡面的字體會自動滾動,形成滾動條,可以用於展示和提示,首先我們先要在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>
以上是實現滾動條的所有代碼,覺得讚的人可以點擊推薦謝謝~