淘先锋技术网

首页 1 2 3 4 5 6 7

CSS 跑马灯是一种经常用于展示重要信息或广告宣传的效果,在网页上呈现文字或图像连续不断地横向滚动。常见的跑马灯包括连续不断地滚动、循环滚动、滚动停顿等效果。

其中,滚动停顿效果在展示信息时可以增强引人注目的效果,吸引用户关注度。

/* CSS代码 */
@keyframes marquee {
 0%   { transform: translateX(0); }
 100% { transform: translateX(-100%); }
}
.marquee {
position: relative;
overflow: hidden;
}
.marquee::before, .marquee::after {
content: "";
position: absolute;
top: 0;
width: 20%;
height: 100%;
z-index: 2;
}
.marquee::before {
left: 0;
background: linear-gradient(to right, 
rgba(255, 255, 255, 0.08) 0%, 
rgba(0, 0, 0, 0.72) 96%);
}
.marquee::after {
right: 0;
background: linear-gradient(to left, 
rgba(255, 255, 255, 0.08) 0%, 
rgba(0, 0, 0, 0.72) 96%);
}
.marquee >div {
display: inline-block;
white-space: nowrap;
animation: marquee 10s ease-in-out infinite;
}
.marquee.paused >div {
animation-play-state: paused;
}

以上代码是实现滚动停顿的 CSS 样式代码,该效果主要是通过 transform 属性实现文字的横向平移,从而呈现出文字连续不断地向左滚动。同时,使用 opacity 属性来设置文字区域的透明度,配合 background 属性设置文字区域的背景颜色,使跑马灯显示效果更佳。

如果需要停顿效果,则需要使用 CSS3 动画的 keyframes 属性,并通过 animation-play-state 属性来控制动画的暂停与播放。

总的来说,CSS 跑马灯是实现展示效果的重要 CSS 样式,准确地运用该样式可以使网站或者广告等内容更加引人入胜,吸引到用户的观看和关注。