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;}
}
相关文章：
CSS3 实现文本与图片横向无限滚动动画
文章目录 1. 实现效果2.html结构3. css代码 1. 实现效果 gif录屏比较卡，实际很湿滑，因为是css动画实现的 2.html结构 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"…...
Android 性能优化之黑科技开道（一）
1. 缘起 在开发电视版智家 App9.0 项目的时候，发现了一个性能问题。电视系统原本剩余的可用资源就少，而随着 9.0 功能的进一步增多，特别是门铃、门锁、多路视频同屏监控后等功能的增加，开始出现了卡顿情况。 经过调研分析发现有…...
Successive Convex Approximation算法的学习笔记
文章目录 一、代码debug二、原理 本文主要参考了CSDN上的 另一篇文章，但规范了公式的推导过程和修缮了部分代码 一、代码debug 首先，我们将所有的代码放到MATLAB中，很快在命令行中出现了错误信息 很显然有问题，但是我不知道发生…...
IoT数采平台2：文档
IoT数采平台1：开篇IoT数采平台2：文档IoT数采平台3：功能IoT数采平台4：测试 【平台功能】 基础配置、 实时监控、 规则引擎、 告警列表、 系统配置 消息通知：Websocket 设备上线、设备下线、 数据变化、 告警信息、 实时…...
Vue监听器watch的基本用法
文章目录 1. 作用2. 格式3. 示例3.1 value 值为字符串3.2 value 值为函数3.3 value 值为对象 4. 与计算属性对比 1. 作用 监视数据变化，执行一些业务逻辑或异步操作。 2. 格式 监听器 watch 内部以 key ：value 的形式定义，key 是 data 中的…...
MySQL UPDATE JOIN 根据一张表或多表来更新另一张表的数据
当使用MySQL时，经常需要根据一张表或多张表的数据来更新另一张表的数据。这种情况下，我们可以使用UPDATE语句结合JOIN操作来实现这一需求。本文将介绍MySQL中使用UPDATE JOIN的技术。 什么是UPDATE JOIN UPDATE JOIN是MySQL中一种结合UPDATE语句和JOIN…...
JS实现继承的方式ES6版
上一篇：JS实现继承的方式原生版 ES6的继承 主要是依赖extends关键字来实现继承，且继承的效果类似于寄生组合继承。 class Parent() { }class Child extends Parent {constructor(x, y, color) {super(x, y);this.color color;} }子类必须在construct…...
elementui 左侧或水平导航菜单栏与main区域联动
系列文章目录 一、elementui 导航菜单栏和Breadcrumb 面包屑关联 二、elementui 左侧导航菜单栏与main区域联动 三、elementui 中设置图片的高度并支持PC和手机自适应 四、elementui 实现一个固定位置的Pagination（分页）组件 文章目录 系列文章目录…...
YUNBEE云贝-技术分享：PostgreSQL分区表
引言 PostgreSQL作为一款高度可扩展的企业级关系型数据库管理系统，其内置的分区表功能在处理大规模数据场景中扮演着重要角色。本文将深入探讨PostgreSQL分区表的实现逻辑、详细实验过程，并辅以分区表相关的视图查询、分区表维护及优化案例，…...
5.2 通用代码，数组求和，拷贝数组，si配合di翻转数组
5.2 通用代码，数组求和，拷贝数组，si配合di翻转数组 1. 通用代码 通用代码类似于一个用汇编语言写程序的一个框架，也类似于c语言的头文件编写 assume cs:code,ds:data,ss:stack data segmentdata endsstack segmentstack endsco…...
Oracle23免费版简易安装攻略
installation-guide 1 安装 root用户下 wget https://yum.oracle.com/repo/OracleLinux/OL8/developer/x86_64/getPackage/oracle-database-preinstall-23c-1.0-1.el8.x86_64.rpm wget https://download.oracle.com/otn-pub/otn_software/db-free/oracle-database-free-23c-1…...
《论文阅读》一种基于反事实推理的会话情绪检测无训练去偏框架 EMNLP 2023
《论文阅读》一种基于反事实推理的会话情绪检测无训练去偏框架 EMNLP 2023 前言简介相关工作模型构架Basic ClassificationBias ExtractionUnbiased Inference实验结果前言 亲身阅读感受分享，细节画图解释，再也不用担心看不懂论文啦~ 无抄袭，无复制，纯手工敲击键盘~ 今天…...
【编译lombok问题】已解决：编译突然找不到符号问题-get/set找不到符号
一、场景：编译突然找不到符号 报错信息： 找不到符号 符号：方法getName() 二、原因： 没有使用lombok支持的编译器 三、解决方法： 打开File-Settings，按以下步骤进行设置； 修改：-Djp…...
第四篇：3.3 无效流量（Invalid traffic) - IAB/MRC及《增强现实广告效果测量指南1.0》
翻译计划 第一篇概述—IAB与MRC及《增强现实广告效果测量指南》之目录、适用范围及术语第二篇广告效果测量定义和其他矩阵之- 3.1 广告印象（AD Impression）第三篇广告效果测量定义和其他矩阵之- 3.2 可见性 （Viewability）第四篇广…...
PyTorch示例——使用Transformer写古诗
文章目录 PyTorch示例——使用Transformer写古诗1. 前言2. 版本信息3. 导包4. 数据与预处理数据下载先看一下原始数据开始处理数据，过滤掉异常数据定义 词典编码器 Tokenizer定义数据集类 MyDataset测试一下MyDataset、Tokenizer、DataLoader 5. 构建模型位置编码器…...
vue 视频添加水印
1.需求背景 其实腾讯云点播的api也支持视频水印，但是只有单个水印，大概效果是这样子的，不满足我们的需求，我们的需求是需要视频中都是水印。 腾讯云点播水印 项目需求的水印（主要是防录屏,最后的实现效果是这样&…...
Web Animations API 动画
Element.animate() dom.animate动画可以避免污染dom原有的css动画 参考资料 Element.animate() - Web API 接口参考 | MDN Element: getAnimations() method - Web APIs | MDN .tunnel{width:200px;height:200px;background-color:#38f;}<div class"tunnel" …...
【大数据存储】实验五：Mapreduce
实验Mapreduce实例——排序（补充程序） 实验环境 Linux Ubuntu 16.04 jdk-8u191-linux-x64 hadoop-3.0.0 hadoop-eclipse-plugin-2.7.3.jar eclipse-java-juno-SR2-linux-gtk-x86_64 实验内容 在电商网站上，当我们进入某电商页面里浏览…...
日志服务 HarmonyOS NEXT 日志采集最佳实践
作者：高玉龙（元泊） 背景信息 随着数字化新时代的全面展开以及 5G 与物联网（IoT）技术的迅速普及，操作系统正面临前所未有的变革需求。在这个背景下，华为公司自主研发的鸿蒙操作系统（…...
Educational Codeforces Round 133 (Rated for Div. 2) (C dp D前缀和优化倍数关系dp)
A：能用3肯定用三，然后分类讨论即可 #include<bits/stdc.h> using namespace std; const int N 2e510,M2*N,mod998244353; #define int long long typedef long long LL; typedef pair<int, int> PII; typedef unsigned long long ULL; usi…...
【讲解下如何Stable Diffusion本地部署】
🎥博主：程序员不想YY啊 💫CSDN优质创作者，CSDN实力新星，CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益，如有不足之处，欢迎在评论区提出…...
wps斜线表头并分别打字教程
wps斜线表头怎么做并分别打字： 1、首先选中我们想要设置的表头。 2、接着右键选中它，点击“设置单元格格式” 3、然后点击上方“边框”选项卡。 4、随后选择图示的斜线，点击“确定” 5、设置完成后，我们只要在其中打字就可以在斜…...
2024第八届全国青少年无人机大赛暨中国航空航天科普展览会
2024第八届全国青少年无人机大赛暨中国航空航天科普展览会 邀请函 主办单位： 中国航空学会 重庆市南岸区人民政府 招商执行单位： 重庆港华展览有限公司 为更好的培养空航天产业人才，汇聚航空教育产业创新科技，丰富和完善航…...
fastadmin学习08-查询数据渲染到前端
index.php查询，这个是前台的index.php public function index() {$slideImgs Db::name("slideimg")->where("status",,normal)->limit(5)->order(sort,desc)->select();$productList Db::name("product")->where(…...
实验报告答案
基本任务（必做） 先用普通用户（自己的姓名拼音）登录再操作 编程有代码截图和执行过程结果截图 代写获取： https://laowangall.oss-cn-beijing.aliyuncs.com/studentall.pdf 1. Linux的Shell编程 （1&am…...
PDF编辑和格式转换工具 Cisdem PDFMaster for Mac
Cisdem PDFMaster for Mac是一款功能强大的PDF编辑和格式转换工具。它为用户提供了直观且易于使用的界面，使常用功能触手可及，从而帮助用户轻松管理、编辑和转换PDF文件。 软件下载：Cisdem PDFMaster for Mac v6.0.0激活版下载 作为一款完整的…...
E-魔法猫咪（遇到过的题，做个笔记）
题解： 来自学长们思路： 其中一种正解是写单调队列。限制队列内的数单调递增，方法为每当新来的数据比当前队尾数据小时队 尾出列，直到能够插入当前值，这保证了队头永远是最小值。因此总体思路是队尾不断插入新值的同时 …...
keil创建工程 芯源半导体CW32F003E4P7
提前下载keil 安装步骤 1、下载CW32F003固件库 芯源半导体官网下载固件库 下载好后右键解压 CW32F003_StandardPeripheralLib_V1.5\IdeSupport\MDK 进入MDK文件夹 双击WHXY.CW32F003_DFP.1.0.4.pack安装固件库 点击next然后finish安装结束 keil创建工程 点击new uVision P…...
学习鸿蒙基础（12）
目录 一、网络json-server配置 （1）然后输入： （2）显示下载成功。但是输入json-server -v的时候。报错。 （3）此时卸载默认的json-server （4）安装和nodejs匹配版本的js…...
做企业官网需要多少钱/seo营销技巧培训班
小练习，小练习哈，直接上代码，上课上的太无聊了，来玩一玩vue来了~ <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"…...
梅州网站建设/seo外包方案
select * from slot_value_temp force index(idx_slot_type_id) WHERE slot_type_id xxxxxx; 不定期更新转载于:https://www.cnblogs.com/zhzhang/p/8127586.html...
常州网站制作公司排名/怎样做企业推广
各位同学们大家好，我是雪山凌狐，欢迎学习python3小白课。上一节课咱们下载好了python3.8.2 64位的安装包到本地，本节课我们就来简单几步教会大家如何进行安装。实际操作，来啦~首先打开我们下载好的python安装包的目录，…...
网站建设的素材/seo网站关键词排名优化公司
我思考了一下上一个程序为什么会失败，可能还是太远了，所以这次弄近一点。把5000米改成1000米吧。。。其他的还是不变 function的持续不变，在这里就不重复写了，具体参照上一篇博客 主函数：关于亮点1 % clc;close all;cl…...
找建筑网站/互联网推广好做吗
传送门...
网站管理教程/今日国际新闻摘抄
孙广东：2015-2-6/2:28 转载请注明出处：http://blog.csdn.net/u010019717 更全的内容请看我的游戏蛮牛地址：http://www.unitymanual.com/space-uid-18602.html 先看一下效果：区别就是一个2d一个3d. 2d就…...