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 样式,准确地运用该样式可以使网站或者广告等内容更加引人入胜,吸引到用户的观看和关注。