使用CSS实现文字跑马灯效果
要使用CSS实现文字的跑马灯效果，可以使用@keyframes规则创建动画，并使用animation属性应用到文本元素上。以下是一个简单的例子：
HTML:
<div class="marquee">
<p>这是跑马灯效果的文本 - 滚动文本滚动文本滚动文本滚动文本</p>
</div>CSS:
.marquee p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
/* 动画名称和持续时间 */
animation: marquee 10s linear infinite;
}
/* 关键帧动画 */
@keyframes marquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}在这个例子中，marquee p选择器指定了要应用动画的文本元素。animation属性定义了动画的名称marquee、持续时间、动画的速度曲线linear以及动画的重复次数infinite。@keyframes marquee定义了动画的具体过程，文本从右向左无限循环滚动。
评论已关闭