前端原生 CSS 跑马灯效果，无限轮播（横竖版本，带渐变遮罩，简单实用）
以下是一个使用原生CSS创建的横向跑马灯效果，具有无限轮播、渐变遮罩的特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>横向跑马灯</title>
<style>
.marquee {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
padding: 10px;
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1) 50%, rgba(255,255,255,0));
background-size: 200% 100%;
background-position: 0 0;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
</style>
</head>
<body>
<div class="marquee">
这是一个带渐变遮罩的无限轮播跑马灯效果。你可以自定义文本内容，并调整CSS参数以适应不同的设计需求。
</div>
</body>
</html>这段代码会创建一个带渐变遮罩的无限循环跑马灯效果。通过CSS @keyframes 规则，背景位置会持续从0变为-100%，实现不断循环滚动的效果。可以根据实际需求调整背景渐变的颜色和速度。
评论已关闭