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;}
}

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java中的装饰器模式

Java中的装饰器模式

在Java中&#xff0c;装饰器模式允许我们动态地给对象添加新的行为或责任&#xff0c;而无需修改原有类。以下是一个简单的装饰器模式示例&#xff0c;我们将模拟一个咖啡销售系统&#xff0c;其中基础饮料类&#xff08;Component&#xff09;是Coffee&#xff0c;装饰器类&am…
阅读更多...
VC++、GCC、CLANG，INT128有符号整数编译器关键字

VC++、GCC、CLANG，INT128有符号整数编译器关键字

注意INT128为目标平台扩展关键字&#xff0c;不属于C/C语言本身支持特性&#xff0c;每个C/C编译器平台支持上都略有不同&#xff0c;甚至不支持。 可以详细参考本人此篇文章&#xff1a; GUN C/C (GCC/CLANG) 对于 __int128_t &#xff08;128位有符号大整数的扩展支持平台限…
阅读更多...
vue快速入门（三）差值表达式

vue快速入门（三）差值表达式

注释很详细&#xff0c;直接上代码 上一篇 新增内容 插值表达式基本用法插值表达式常用公式 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wid…
阅读更多...
M91HV-EX防爆布控球

M91HV-EX防爆布控球

防爆EX说明 产品介绍 布控球是专为户外无线网络及无供电环境而又需要现场录像取证和远程实时视频监控而打造的一款便携式的智能装备。布控球采用稳定的Linux嵌入式操作系统&#xff0c;运用先进的AI算法技术、5G无线通信技术、AGPS辅助定位技术及H.265视频压缩技术&#xff1b;…
阅读更多...
语言模型进化史（上）

语言模型进化史（上）

由于篇幅原因&#xff0c;本文分为上下两篇&#xff0c;上篇主要讲解语言模型从朴素语言模型到基于神经网络的语言模型&#xff0c;下篇主要讲解现代大语言模型以及基于指令微调的LLM。文章来源是&#xff1a;https://www.numind.ai/blog/what-are-large-language-models 一、语…
阅读更多...
【Linux】进程控制详解

【Linux】进程控制详解

目录 前言 进程创建 认识fork 写时拷贝 再谈fork 进程终止 进程退出码 用代码来终止进程 常见的进程终止的方式 exit _exit 进程等待 进程等待的必要性 进程等待的方式 wait waitpid 详解status参数 详解option参数 前言 本文适合有一点基础的人看的&#…
阅读更多...
5.3.2 实验2：配置交换机端口安全

5.3.2 实验2：配置交换机端口安全

1、实验目的 通过本实验可以掌握&#xff1a; 交换机管理地址配置及接口配置。查看交换机的MAC地址表。配置静态端口安全、动态端口安全和粘滞端口安全的方法。 2、实验拓扑 配置交换机端口安全的实验拓扑如图所示。 配置交换机端口安全的实验拓扑 3、实验步骤 &#xff…
阅读更多...
Excel中文显示问号

Excel中文显示问号

直接上操作步骤&#xff1a; 1&#xff09;打开Excel -> 文件 -> 选项 -> 语言 2&#xff09;Office 显示语言&#xff0c;“中文(简体)”设置为首选。 3&#xff09;Office创作语言和校对&#xff0c;“中文(简体)”设置为首选。 网上用记事本转换的方法&#xff0c;…
阅读更多...
【c++】STl-list使用list模拟实现

【c++】STl-list使用list模拟实现

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;c_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1. list的介绍及使用 1.1 list的介绍 1.2 list的使用 1.2.1 list的构造 1.2.2 list iterator的使用 1.2.3 list capacity 1.2.4 …
阅读更多...
点大商城V2版 2.5.7全开源版 全插件+百度+支付宝+QQ+头条+小程序端+uniapp开源端

点大商城V2版 2.5.7全开源版 全插件+百度+支付宝+QQ+头条+小程序端+uniapp开源端

点大商城V2是一款采用全新界面设计支持多端覆盖的小程序应用&#xff0c;支持H5、微信公众号、微信小程序、头条小程序、支付宝小程序、百度小程序&#xff0c;本程序是点大商城V2独立版&#xff0c;包含全部插件&#xff0c;代码全开源&#xff0c;并且有VUE全端代码。分销&am…
阅读更多...
【Java基础】Java基础知识整合

【Java基础】Java基础知识整合

文章目录 1. 转义字符2. 变量2.1 字符串与整型相加2.2 byte和short的区别2.3 float和double的区别2.4 char类型2.5 boolean类型2.6 自动类型转换及运算2.7 强制类型转换2.8 String的转换2.9 除法运算2.10 取模规则 3. 自增4. 逻辑运算符5. 赋值运算 6. 三元运算符&#xff1a;7…
阅读更多...
babyAGI(7)-babyCoder源码阅读3（任务执行相关agent）

babyAGI(7)-babyCoder源码阅读3（任务执行相关agent）

1. 任务分配agent 该agent会根据&#xff0c;objective和task的内容自动分配要执行的agent code_writer_agent 编写新代码或增加新功能使用该agentcode_reactor_agent 任务涉及到修改或优化执行该agentcommand_executor_agent 任务涉及到文件操作执行该agent 整个任务分配的…
阅读更多...
前端的拖拽序列(drag)

前端的拖拽序列(drag)

html和css代码如下 <style>.item {width: 200px;height: 50px;background: rgb(15, 226, 219);margin: 10px 0;padding-left: 20px;border-radius: 10px;line-height: 50px;}.item.move {background: transparent;color: transparent;border: 1px dashed #ccc;}</sty…
阅读更多...
关于ubuntu18.04 ARM架构更换源失败的问题

关于ubuntu18.04 ARM架构更换源失败的问题

更换源后报错&#xff1a; E: Failed to fetch http://mirrors.tuna.tsinghua.edu.cn/ubuntu/dists/trusty-security/main/binary-arm64/Packages 404 Not Found [IP: 2402:f000:1:400::2 80] E: Failed to fetch http://mirrors.tuna.tsinghua.edu.cn/ubuntu/dists/trusty-…
阅读更多...
C++(12): std::mutex及其高级变种的使用

C++(12): std::mutex及其高级变种的使用

1. 简述 在多线程或其他许多场景下&#xff0c;同时对一个变量或一段资源进行读写操作是一个比较常见的过程&#xff0c;保证数据的一致性和防止竞态条件至关重要。 C的标准库中为我们提供了使用的互斥及锁对象&#xff0c;帮助我们实现资源的互斥操作。 2. std::mutex及其衍…
阅读更多...
QT - 日志：qDebug/qInfo/qWarning/qCritical

QT - 日志：qDebug/qInfo/qWarning/qCritical

篇一、日志打印函数 头文件&#xff1a; #include <QDebug> 代码&#xff1a;qDebug()<<"hello world!"; 其他打印级别&#xff1a; qInfo(): 普通信息 qDebug(): 调试信息 qWarning(): 警告信息 qCritical(): 严重错误 qFatal(): 致命错误 1. qDebug…
阅读更多...
【Leetcode】279.完全平方数

【Leetcode】279.完全平方数

一、题目 1、题目描述 给你一个整数 n ，返回 和为 n 的完全平方数的最少数量。 完全平方数 是一个整数，其值等于另一个整数的平方；换句话说，其值等于一个整数自乘的积。例如，1、4、9 和 16 都是完全平方数，而 3 和 11 不是。 示例1： 输入：n = 12 输出：3 解释：1…
阅读更多...
Vue ElementPlus Form、Form-item 表单

Vue ElementPlus Form、Form-item 表单

Form 表单 由输入框、选择器、单选框、多选框等控件组成&#xff0c;用以收集、校验、提交数据&#xff0c;组件升级采用了 flex 布局&#xff0c;以替代旧版本的 float 布局。 在 Element Plus 中&#xff0c;el-form 是一个表单组件&#xff0c;用于创建表单以便用户填写和提…
阅读更多...
东方 - 循环（2） - 求和计数

东方 - 循环（2） - 求和计数

目录 解析部分&#xff1a;求和计数1002. 编程求解123...n问题描述解题思路代码实现代码解析 1741. 求出1~n中满足条件的数的个数和总和问题描述解题思路代码实现代码解析 1003. 编程求 \(1 3 5 ... n\)问题描述解题思路代码实现代码解析 1004. 编程求1*2*3*...*n问题描述解…
阅读更多...
C语言：文件操作（一）

C语言：文件操作（一）

目录 前言 1、为什么使用文件 2、什么是文件 2.1 程序文件 2.2 数据文件 2.3 文件名 3、文件的打开和关闭 3.1 文件指针 3.2 文件的打开和关闭 结&#xff08;一&#xff09; 前言 本篇文章将介绍C语言的文件操作&#xff0c;在后面的内容讲到&#xff1a;为什么使用文…
阅读更多...
最新文章

Copyright @ 2022~2023