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

文章目录

  • 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>
    </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>

3. css代码

@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  min-height: 100vh;
  background-color: #222;
  color: #fff;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}

.scroll {
  position: relative;

  display: flex;
  width: 700px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.scroll > div span {
  display: inline-block;
  margin: 10px;
  padding: 5px 10px;
  background-color: #333;
  border-radius: 5px;

  letter-spacing: 0.2em;
  text-transform: uppercase;

  cursor: pointer;
  transition: background-color 0.5s;
}
.scroll > div span:hover {
  background-color: #4caf50;
}

.img-box {
  display: flex;
  column-gap: 10px;
}
.img-box > div,
.img-box > div .bg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.img-box .bg {
  width: 150px;
  height: 150px;
  background-color: #ff3e3e;
  filter: hue-rotate(calc(var(--r) * 1deg));
  
  cursor: pointer;
  transition: filter 0.5s;
}

.scroll > div {
  white-space: nowrap;
  animation: animate var(--t) linear infinite;
  animation-delay: calc(var(--t) * -1);
}
@keyframes animate {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

.scroll > div:nth-child(2) {
  animation: animate2 var(--t) linear infinite;
  animation-delay: calc(var(--t) / -2);
}
@keyframes animate2 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200%);
  }
}

.scroll:hover > div {
  animation-play-state: paused;
}


@media screen and (max-width: 768px) {
  .scroll {
    width: 95vw;
  }

  .scroll > div span {
    background-color: #4caf50;
  }

  .img-box .bg {
    width: 15vw;
    height: 15vw;
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/513283.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[蓝桥杯练习题]出差

[蓝桥杯练习题]出差

一道DJ题,重要的是隔离时间,把隔离时间加在边权上即可 现实生活的题大多都是无向图建图,需要边的两端点各自上邻接表和相同权重 #include<bits/stdc.h> using namespace std; #define ll long long const int N1005; const int M10005; struct edge{int to;ll w;edge(int…
阅读更多...
招聘信息分享（第一期）

招聘信息分享（第一期）

今天给大家带来——测绘、地信、遥感领域的事业单位招聘信息&#xff01;这也是我自己在关注的&#xff0c;自己应聘单位大多时间已经截至&#xff0c;后期会陆续分享&#xff0c;先分享近期招聘的事业单位 文章目录 1、宁夏大学2024年人才招聘2、甘肃有色冶金职业技术学院3、…
阅读更多...
【大模型】大模型 CPU 推理之 llama.cpp

【大模型】大模型 CPU 推理之 llama.cpp

【大模型】大模型 CPU 推理之 llama.cpp llama.cpp安装llama.cppMemory/Disk RequirementsQuantization测试推理下载模型测试 参考 llama.cpp 描述 The main goal of llama.cpp is to enable LLM inference with minimal setup and state-of-the-art performance on a wide var…
阅读更多...
数据分析之POWER BI Desktop可视化应用案列

数据分析之POWER BI Desktop可视化应用案列

在power bi中导入数据 导入前期建好的模型 简单介绍&#xff08;power bi desktop&#xff09; 将右边字段全部展开 各类数据 所作的模型 在excel中是单向的&#xff0c;power bi 中可以是双向的 右键单击----点击属性 选择两个---在两个方向上应用安全筛选器 变为双向的…
阅读更多...
域名HTTPS证书免费获取渠道

域名HTTPS证书免费获取渠道

SSL证书的优势 数据加密&#xff1a;SSL证书通过SSL/TLS协议为网站与用户之间的数据传输提供加密保护。这意味着所有在浏览器和服务器之间交换的信息&#xff08;如登录凭据、个人数据、支付详情等&#xff09;都经过加密处理&#xff0c;即使被第三方截获&#xff0c;也无法解…
阅读更多...
提效提速的快捷回复工具

提效提速的快捷回复工具

在数字化交流日益增长的今天&#xff0c;客服工作显得尤为重要。为了提升对话质量和回复速度&#xff0c;同时减少重复劳动&#xff0c;我同事给我介绍了一款快捷回复工具&#xff0c;叫做客服宝聊天助手。我用了几天真心觉得好好用&#xff0c;今天特地分享这个软件给你们&…
阅读更多...
台湾花莲地震已致4死97伤，地震时刻，你需要知道的一切

台湾花莲地震已致4死97伤，地震时刻，你需要知道的一切

近日&#xff0c;台湾花莲县海域发生了一次强震&#xff0c;引发了广泛关注。据中国地震台网测定&#xff0c;这次地震的震级高达7.3级&#xff0c;震源深度为12公里&#xff0c;造成了台湾全岛范围内的震感&#xff0c;以及福建、广东等地的明显震感。在这样的紧急情况下&…
阅读更多...
防火墙状态检测和会话机制

防火墙状态检测和会话机制

FW对TCP&#xff0c;UDP和ICMP协议的报文创建会话
阅读更多...
下载与安装Latex（windows简洁板）

下载与安装Latex（windows简洁板）

总共要安装两个软件&#xff1a;TeX Live与TeX Studio 下载与安装TeX Live 下载 下载地址&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/CTAN/systems/texlive/Images/ 点击&#xff1a; texlive2024.iso 文件很大&#xff0c;可能会慢点 2. 安装 下载好了iso文件&…
阅读更多...
Harmony创建Page省事小技巧

Harmony创建Page省事小技巧

在创建Page页面时&#xff0c;选择ArkTS File时&#xff0c;创建的文件不会自动生成基础代码&#xff0c;也不会自动在main_page.json中自动进行注册&#xff0c;如何解决问题呢&#xff0c;其实很简单创建Page页面时选择Page项后就会创建Page文件&#xff0c;创建完的页面会自…
阅读更多...
分配给某公司网络的地址块是220.17.192.0/20，该网络被划分为个C类子网，不属于该公司网络的子网地址是

分配给某公司网络的地址块是220.17.192.0/20，该网络被划分为个C类子网，不属于该公司网络的子网地址是

题目 解题过程
阅读更多...
C++之类和对象的中篇

C++之类和对象的中篇

&#x1d649;&#x1d65e;&#x1d658;&#x1d65a;!!&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦&#x1f44f;&#x1f3fb;‧✧̣̥̇‧✦ &#x1f44f;&#x1f3fb;‧✧̣̥̇:Solitary_walk ⸝⋆ ━━━┓ - 个性标签 - &#xff1a;来于“云”的“羽球人”。…
阅读更多...
【随笔】Git 高级篇 -- 分离 HEAD（十一）

【随笔】Git 高级篇 -- 分离 HEAD（十一）

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…
阅读更多...
Stream 流和 Lambda 组装复杂父子树形结构

Stream 流和 Lambda 组装复杂父子树形结构

在最近的开发中&#xff0c;遇到了两个类似的需求&#xff1a;都是基于 Stream 的父子树形结构操作&#xff0c;返回 List 集合对象给前端。于是在经过需求分析和探索实践后有了新的认识&#xff0c;现在拿出来和大家作分享交流。 一般来说完成这样的需求大多数人会想到递归&a…
阅读更多...
认识什么是Git

认识什么是Git

目录 1. 认识Git 1.1. 问题引入 1.2. 概念 1.3. 作用 1.4. 如何学 1.5. Git 安装 1.6. Git配置用户信息 2. Git仓库 2.1. Git 仓库&#xff08;repository&#xff09; 2.2. 创建 2.3. 需求 3. Git的三个区域 3.1. Git 使用时的三个区域 3.2. 工作区的内容&#…
阅读更多...
11-代码随想录34在排序数组中查找元素的第一个和最后一个位置

11-代码随想录34在排序数组中查找元素的第一个和最后一个位置

34. 在排序数组中查找元素的第一个和最后一个位置 给定一个按照升序排列的整数数组 nums&#xff0c;和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 进阶&#xff1a;你可以设计并实现时间…
阅读更多...
SpringBoot参数校验@Valid 和 @Validated注解使用详解

SpringBoot参数校验@Valid 和 @Validated注解使用详解

JSR-303 是 JAVA EE 6 中的一项子规范&#xff0c;叫做 Bean Validation&#xff0c;官方参考实现是Hibernate Validator。 注意&#xff1a;JSR-303实现与 Hibernate ORM 没有任何关系。 JSR 303 用于对 Java Bean 中的字段的值进行验证。 Spring MVC 3.x 之中也大力支持 JS…
阅读更多...
Linux ：进程的程序替换

Linux ：进程的程序替换

目录 一、什么是程序替换 1.1程序替换的原理 1.2更改为多进程版本 二、各种exe接口 2.2execlp ​编辑 2.2execv 2.3execle、execve、execvpe 一、什么是程序替换 1.1程序替换的原理 用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往…
阅读更多...
python小项目——时钟模拟

python小项目——时钟模拟

钟表是一种计时的装置&#xff0c;也是计量和指示时间的精密仪器。钟表的样式千变万化&#xff0c;但是用来显示时间的表盘相差无几&#xff0c;大多数钟表表盘的样式由刻度&#xff08;共60个&#xff0c;围成圆形&#xff09;、指针&#xff08;时针、分针和秒针&#xff09;…
阅读更多...
C++ 11是如何封装Thread库的？

C++ 11是如何封装Thread库的？

引言 C11 标准引入了一个重要的特性&#xff0c;即原生线程支持&#xff0c;这标志着C语言在并发编程领域迈出了坚实的步伐。在此之前&#xff0c;开发人员在进行跨平台的多线程编程时&#xff0c;不得不依赖于操作系统提供的特定API&#xff0c;如Windows API或POSIX Threads…
阅读更多...
最新文章

Copyright @ 2022~2023