css3 实现文本与图片横向无限滚动动画

原创

已于 2024-09-18 13:58:33 修改 · 2.6k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #动画 #轮播滚动 #无限滚动

于 2024-04-03 14:42:14 首次发布

文章目录

1. 实现效果
2.html结构
3. css代码

1. 实现效果

gif录屏比较卡，实际很湿滑，因为是css动画实现的
请添加图片描述

2.html结构

<!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>