Heim > Artikel > Web-Frontend > CSS3 implementiert eine animierte Bildlaufleiste
CSS3 implementiert eine animierte Bildlaufleiste
- WBOYOriginal
- 2016-08-04 08:53:131508Durchsuche
Lassen Sie mich zunächst eine Darstellung geben. Es scheint einfach, aber tatsächlich ist es sehr einfach umzusetzen. Es ist einfach und praktisch
<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>
<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>
Das Obige ist der gesamte Code zum Implementieren der Bildlaufleiste. Wenn es Ihnen gefällt, können Sie es weiterempfehlen~
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Nachkommenselektoren und Mehrklassenselektoren nach CSSNächster Artikel：Nachkommenselektoren und Mehrklassenselektoren nach CSS