当前位置: 首页 > news >正文

CSS实现文本和图片无限滚动动画

Demo图如下:
在这里插入图片描述

 <style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Poppins', sans-serif;}body {min-height: 100vh;background-color: rgb(11, 11, 11);color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;}.scroll {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;/* 重置字体大小 */font-size: 16px;cursor: pointer;transition: background-color 0.5s;}.scroll>div span:hover {background-color: #f152ec;}.img-box .img {max-width: 150px;cursor: pointer;transition: filter 0.5s;margin: 10px;}.img-box .img:hover {filter: grayscale(1);}.scroll>div {/* 解决空白间隙将字体设置为0 */font-size: 0;white-space: nowrap;animation: animate var(--time) linear infinite;animation-delay: calc(var(--time) * -1);}/*向右移动*/@keyframes animate {0% {transform: translateX(-100%);}100% {transform: translateX(100%);}}/*向左移动*//* @keyframes animate {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}} */.scroll>div:nth-child(2) {animation: animate2 var(--time) linear infinite;animation-delay: calc(var(--time) / -2);}/*向右移动*/@keyframes animate2 {0% {transform: translateX(-200%);}100% {transform: translateX(0);}}/*向左移动*//* @keyframes animate2 {0% {transform: translateX(0);}100% {transform: translateX(-200%);}} */.scroll:hover>div {animation-play-state: paused;}</style>
<div class="scroll" style="--time: 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="--time: 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="--time: 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="--time: 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="--time:25s"><div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div></div><div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img1.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div><div class="img" style="display:inline-block;background:url(./imgs/img2.jpeg) no-repeat center/100% 100%;width: 150px;height:100px;"></div></div></div></div>

相关文章:

CSS实现文本和图片无限滚动动画

Demo图如下&#xff1a; <style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: Poppins, sans-serif;}body {min-height: 100vh;background-color: rgb(11, 11, 11);color: #fff;display: flex;flex-direction: column;justify-content: center;align-i…...

MacOS 无法ping 通 github.com 解决方案

ping github.com 会显示请求超时&#xff1a; PING github.com (192.30.253.112): 56 data bytes Request timeout for icmp_seq 0 Request timeout for icmp_seq 1 Request timeout for icmp_seq 2 Request timeout for icmp_seq 3 Request timeout for icmp_seq 4 Request …...

Mac 也能玩文明6!下载安装详细教程

最近朋友给我分享了一个 Mac 玩文明6的方法&#xff0c;丝毫不卡顿&#xff0c;非常流畅&#xff0c;分享给大家 文明6是最新的文明系列游戏&#xff0c;和以往的文明游戏一样&#xff0c;玩家将从石器时代创建文明&#xff0c;然后迈向信息时代&#xff0c;最终通过军事、经济…...

git tag的用法详解

目录 一、tag标识一个commit 二、查看tag 三、对分支打tag 四、删除tag 五、根据某个tag来clone 一、tag标识一个commit tag是用于去标记一个特定的commit。通常&#xff0c;在进行编译部署之前&#xff0c;我们需要对某一个即将release的版本进行tag&#xff0c;例如tag为…...

TC397 EB MCAL开发从0开始系列 之 [17.1] ETH配置实战 - ping/发送

一、ETH配置1、配置目标2、目标依赖2.1 硬件使用2.2 软件使用2.3 新增模块3、EB配置3.1 配置讲解3.2 模块配置3.2.1 MCU配置3.2.2 PORT配置3.2.3 ETH配置3.2.4 ResourceM配置4、ADS代码编写及调试4.1 工程编译...

Scrapy爬虫在新闻数据提取中的应用

Scrapy是一个强大的爬虫框架&#xff0c;广泛用于从网站上提取结构化数据。下面这段代码是Scrapy爬虫的一个例子&#xff0c;用于从新闻网站上提取和分组新闻数据。 使用场景 在新闻分析和内容聚合的场景中&#xff0c;收集和组织新闻数据是常见需求。例如&#xff0c;如果我…...

【服务器GPT+MJ+GPTs】创建部署GPT+MJ+GPTs程序网站

目录 🌺【前言】 🌺【准备】 🌺【宝塔搭建GPT+MJ+GPTs】 🌼1. 给服务器添加端口 🌼2. 安装宝塔 🌼3. 安装Docker 🌼4. 安装ChatGPT程序 🌼5. 程序更新 🌼6. 修改端口 | 密码 🌼7. 绑定域名+申请SSL证书 🌺【前言】 相信大家都对openai的产品ch…...

C语言零基础入门第2天《 visual studio下载安装教程和搭建开发环境及踩坑指南》(保姆级图文教程)

visual studio下载安装教程和搭建开发环境 1、 项目实战效果图2、简单了解一下目前主流的开发环境3、 visual studio下载地址4、 visual studio安装教程5、 配置visual studio环境变量 6、如何新建一个C项目7、新建第一个C程序8、用代码测试创建的项目是否可用8、如何成功让代码…...

分析Vue3生命周期

一.什么是生命周期 在Vue中&#xff0c;生命周期是组件从创建到销毁的整个过程中的不同阶段。Vue组件的生命周期主要由一系列的钩子函数&#xff08;hook functions&#xff09;组成。 以下是Vue组件生命周期的主要阶段&#xff1a; 1. 创建阶段&#xff1a; - beforeCre…...

Android 13.0 Launcher3 禁止在HotSeat创建Folder文件夹功能实现

1.概述 在13.0的系统rom定制化开发中,在laucher3的某些功能中,在拖拽item时 靠近某个图标时会形成文件夹(folder), 而根据客户需求不想再hotseat形成文件夹, 这就要从workspace.java从来寻找解决方案了分析hotseat是怎么变成 folder的,接下来具体实现相关功能 2.Launch…...

大模型训练 - 华为机试真题第二题(200分)

考试平台&#xff1a; 时习知 题目类型&#xff1a; 3 道编程题 &#xff08;100分 200分 300分&#xff09; 考试时间&#xff1a; 2024-01-24 &#xff08;两小时&#xff09; AI大模型学习大量的训练样本&#xff0c;通过大量参数拟合出样本背后复杂的高维概率密度分布关系…...

创作活动(九十三)———ChatGPT 和文心一言哪个更好用?

#ChatGPT 和文心一言哪个更好用&#xff1f;# 根据提供的搜索结果&#xff0c;ChatGPT和文心一言各有特点和优势&#xff0c;选择哪一个更好用取决于具体的应用场景和个人需求。以下是两者的对比&#xff1a; ChatGPT&#xff1a; 适用场景&#xff1a;适合需要生成大量知识性…...

Spring 声明式事务 @Transactional(详解)【面试重点,小林出品】

关于 Transactional 注解的基本使用&#xff0c;推荐看Spring 声明式事务 Transactional&#xff08;基本使用&#xff09; 概述 本篇博客主要学习 Transactional 注解当中的三个常⻅属性: 1. rollbackFor:异常回滚属性.指定能够触发事务回滚的异常类型.可以指定多个异常类型 …...

CSS之高度塌陷和外边距塌陷

目录 1.高度塌陷&#xff08;原因&#xff0c;如何解决&#xff09; 【概念介绍】 【解决办法】 【概念介绍-BFC】 【拓展-BFC的触发条件】 2.外边距塌陷 &#xff08;原因&#xff0c;如何解决&#xff09; 【概念介绍】 【两种情况】 1.相邻块元素 2.嵌套块元素 【…...

基于SpringBoot Vue美食网站系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…...

哪吒汽车与经纬恒润合作升级,中央域控+区域域控将于2024年落地

近日&#xff0c;在2024哪吒汽车价值链大会上&#xff0c;哪吒汽车与经纬恒润联合宣布合作升级&#xff0c;就中央域控制器和区域域控制器展开合作&#xff0c;合作成果将在山海平台新一代车型上发布。 哪吒汽车首席技术官戴大力、经纬恒润副总裁李伟 经纬恒润在智能驾驶领域拥…...

php学习-实战项目

登录注册 login_db_connect.php 连接数据库 <?php //用于登录界面数据库连接 //设置字符集 header(Content-type:text/html;charsetutf8);//连接数据库 $conmysqli_connect("localhost","root","root","lms"); if (mysqli_conne…...

【项目日记(四)】第一层: 线程缓存的具体实现

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:项目日记-高并发内存池⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你做项目   &#x1f51d;&#x1f51d; 开发环境: Visual Studio 2022 项目日…...

海思 tcpdump 移植开发详解

目录 前言 一、开发环境 二、tcpdump 源码下载 三、交叉编译 libpcap 四、交叉编译 tcpdump 五、tcpdump 移植到板子运行 前言 本章内容将讲解&#xff0c;如何在海思平台交叉编译、移植&#xff0c;并基于静态库生成的 tcpdump 网络抓包工具。 一、开发环境 SS…...

Javascript--流程控制

目录 数据类型转换 自动类型转换 强制类型转换 流程控制语句 顺序流程 选择流程 单分支 双分支 多分支 switch 循环流程 for循环 while循环 do...while循环 如何选择 continue和break 循环案例 数据类型转换 由于 javascrip 这个语言它是弱类型语言&#xff0c…...

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API&#xff0c;用于在函数组件中使用 state 和其他 React 特性&#xff08;例如生命周期方法、context 等&#xff09;。Hooks 通过简洁的函数接口&#xff0c;解决了状态与 UI 的高度解耦&#xff0c;通过函数式编程范式实现更灵活 Rea…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

.Net框架,除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

webpack面试题

面试题&#xff1a;webpack介绍和简单使用 一、webpack&#xff08;模块化打包工具&#xff09;1. webpack是把项目当作一个整体&#xff0c;通过给定的一个主文件&#xff0c;webpack将从这个主文件开始找到你项目当中的所有依赖文件&#xff0c;使用loaders来处理它们&#x…...