css3+h5 实现跑马灯效果 示例
HTML:
<div class="marquee">
<div class="marquee-content">
<span>这是跑马灯效果的示例文本。这是跑马灯效果的示例文本。</span>
</div>
</div>
CSS:
.marquee {
width: 100%;
height: 30px;
overflow: hidden;
position: relative;
}
.marquee-content {
position: absolute;
white-space: nowrap;
animation: marquee 10s linear infinite;
}
.marquee-content span {
display: inline-block;
padding-right: 100%;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
效果:
![截图效果](https://i-blog.csdnimg.cn/blog_migrate/329759d8380aa8276de8b6259a46e3ee.png#pic_center)
在这个示例中,我们创建了一个.marquee容器来包裹跑马灯效果的文本。.marquee-content是一个包含文本的容器,通过position: absolute将其定位在.marquee容器内。我们使用white-space: nowrap确保文本不会换行。通过animation属性和@keyframes来创建一个动画效果,使文本从右向左水平滚动。