CSS3 实现文本与图片横向无限滚动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Scrolling Animation</title>
</head>
<body>
<div class="scroll" style="--t: 20s">
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
</div>
<div class="scroll" style="--t: 30s">
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
</div>
<div class="scroll" style="--t: 10s">
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
</div>
<div class="scroll" style="--t: 35s">
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
<div>
<span>HTML</span>
<span>CSS</span>
<span>JavaScript</span>
<span>Vue</span>
<span>React</span>
<span>Figma</span>
<span>Photoshop</span>
</div>
</div>
<div class="scroll img-box" style="--t: 25s">
<div>
<div class="bg" style="--r: 0;">1</div>
<div class="bg" style="--r: 40;">2</div>
<div class="bg" style="--r: 80;">3</div>
<div class="bg" style="--r: 120;">4</div>
<div class="bg" style="--r: 160;">5</div>
<div class="bg" style="--r: 200;">6</div>
<div class="bg" style="--r: 240;">7</div>
<div class="bg" style="--r: 280;">8</div>
<div class="bg" style="--r: 320;">9</div>
</div>
<div>
<div class="bg" style="--r: 0;">1-1</div>
<div class="bg" style="--r: 40;">2-1</div>
<div class="bg" style="--r: 80;">3-1</div>
<div class="bg" style="--r: 120;">4-1</div>
<div class="bg" style="--r: 160;">5-1</div>
<div class="bg" style="--r: 200;">6-1</div>
<div class="bg" style="--r: 240;">7-1</div>
<div class="bg" style="--r: 280;">8-1</div>
<div class="bg" style="--r: 320;">9-1</div>
</div>
</div>
</body>
</html>