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

【CSS】旋转中的视差效果

news 2026/4/3 16:29:03

效果

在这里插入图片描述

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title> Document </title><link type="text/css" rel="styleSheet" href="index.css" /></head><body><div class="container"><!--Emmet缩写: div.item*5>img[src=./$.png] --><div class="item"><img src="./1.jpg" alt=""></div><div class="item"><img src="./2.jpg" alt=""></div><div class="item"><img src="./3.jpg" alt=""></div><div class="item"><img src="./4.jpg" alt=""></div><div class="item"><img src="./5.jpg" alt=""></div></div></body>
</html>

index.css

.container{width: 500px;height: 500px;margin: 0 auto;margin-top: 120px;/*设置item元素布局为网关布局*/display: grid;/*设置container元素的3列，宽度为1fr--r*/grid-template-columns: repeat(3,1fr);/*设置container元素的3行，高度为1fr--r*/grid-template-rows: repeat(3,1fr);/*设置container元素的网格布局模版--r*/grid-template: 'A A B''C D B''C E E';/*设置container元素的网格间距--r*/grid-gap: 5px;/*设置container元素的变量--r*/--r: 360deg;/*rotation: 给img元素设置旋转动画,其中变量为--r= -360deg 逆时针旋转*//*10s: 动画总耗时10s*//*linear: 动画使用线性过度*//*infinite: 循环执行动画*/animation: rotation 10s linear infinite;
}/* 设置第1个item item 在grid-template对应的区域A*/
.item:nth-child(1){grid-area: A;
}/* 设置第2个item item 在grid-template对应的区域B*/
.item:nth-child(2){grid-area: B;
}/* 设置第3个item item 在grid-template对应的区域C*/
.item:nth-child(3){grid-area: C;
}/* 设置第4个item item 在grid-template对应的区域D*/
.item:nth-child(4){grid-area: D;
}/* 设置第5个item item 在grid-template对应的区域E*/
.item:nth-child(5){grid-area: E;
}.item {/*设置item元素布局为弹性布局*/display: flex;/*设置item元素水平居中*/justify-content: center;/*设置item元素垂直居中*/align-items: center;overflow: hidden;/*设置item元素边框*//*2px: 宽度2px*//*solid: 线型为实线*/border:  2px solid;
}.item img{/*设置img元素的变量--r*/--r: -360deg;/*设置img元素旋转的图像尺寸，解决旋转过程中的白边问题*/width: 260%;height: 260%;/*保持图像的宽高比*/object-fit: cover;/*rotation: 给img元素设置旋转动画,其中变量为--r= -360deg 逆时针旋转*//*10s: 动画总耗时10s*//*linear: 动画使用线性过度*//*infinite: 循环执行动画*/animation: rotation 10s linear infinite;
}/*旋转动画 旋转 变量--r*/
@keyframes rotation {to {transform: rotate(var(--r));}
}

知识点

1. grid-template 与 grid-area 搭配使用快速布局

.grid-container {display: grid;grid-template:"header header" auto"sidebar main" 1fr"footer footer" auto; /* 定义网格的结构 */grid-gap: 10px; /* 设置行和列之间的间隔为10px */height: 500px;
}.item {background-color: #ccc;padding: 20px;
}.item1 {grid-area: header; /* 放置在名为 "header" 的区域 */
}.item2 {grid-area: sidebar; /* 放置在名为 "sidebar" 的区域 */
}.item3 {grid-area: main; /* 放置在名为 "main" 的区域 */
}.item4 {grid-area: footer; /* 放置在名为 "footer" 的区域 */
}

在这个示例中，我们使用 grid-template 属性来定义网格的结构。通过使用字符串，我们指定了网格的行和列，以及它们的名称。每一行和列都可以具有不同的大小和单位。

通过给每个网格项设置相应的 grid-area 值，我们将它们放置在指定的区域中。这里的区域名称对应于 grid-template 中定义的行和列的名称。

这个示例中的网格布局结构如下：

headerheader
sidebarmain
footerfooter

通过以上示例，您可以看到如何使用 grid-template 和 grid-area 属性创建一个具有命名区域的网格布局，并将网格项放置在指定的位置,相同名称将会合并成一个区域。

2. 巧用变量和反向旋转

在源代码动画中使用变量--r，是的顺时针旋转父元素.container和逆时针旋转子元素.item img共用一个rotation 动画。
这里子元素采用与父元素的反向旋转以抵消整体旋转导致子元素内部图片旋转，改善视觉体验。

.container{--r: 360deg;animation: rotation 10s linear infinite;
}.item img{--r: 360deg;animation: rotation 10s linear infinite;
}@keyframes rotation {to {transform: rotate(var(--r));}
}

资源

1.jpg

在这里插入图片描述

2.jpg

在这里插入图片描述

3.jpg

在这里插入图片描述

4.jpg

在这里插入图片描述

5.jpg

在这里插入图片描述

相关文章：

【CSS】旋转中的视差效果

效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"/><meta http-equiv"X-UA-Compatible" content"IEedge"/><meta name"viewport" content"widthdevice-…...

编程日记 2023/8/8 4:35:51

【ASP.NET MVC】使用动软（一）（9）

一、解决的问题 前文为解决数据库操作设计的 TestMysql 类&#xff0c;仅简单地封装了一个Query函数&#xff0c;代码如下&#xff1a; public class TestMysql{public static string SqlserverConnectStr "server127.0.0.1;charsetutf8;user idroot;persistsecurityin…...

编程日记 2023/8/8 4:34:49

【Jsp课设】3款基于JavaWeb的学生选课管理系统

项目介绍&#xff1a;后端采用JspServlet。前端使用的是Layui的一个网站模板。开发一个在线的学生选课管理系统&#xff0c;用于课程设计的使用。 项目类型&#xff1a;JavaWeb源码 用户类型&#xff1a;2个角色&#xff08;管理员学生&#xff09; 主要技术&#xff1a;JspSe…...

编程日记 2023/8/8 4:33:45

系统架构设计师笔记第35期：表现层框架设计

表现层框架设计是指在软件系统中&#xff0c;将用户界面&#xff08;UI&#xff09;和用户交互逻辑与后端业务逻辑分离&#xff0c;使用特定的框架来组织和管理表现层的功能和结构。下面是表现层框架设计的一般步骤和常用技术&#xff1a; 确定需求和功能&#xff1a;首先&…...

编程日记 2023/8/8 4:32:43

力扣 -- 467. 环绕字符串中唯一的子字符串

一、题目 二、解题步骤 下面是用动态规划的思想解决这道题的过程&#xff0c;相信各位小伙伴都能看懂并且掌握这道经典的动规题目滴。 三、参考代码 class Solution { public:int findSubstringInWraproundString(string s) {int ns.size();vector<int> dp(n,1);int re…...

编程日记 2023/8/8 4:31:41

Hi3798MV200 恩兔N2 NS-1 (四): 制作 Debian rootfs

目录 Hi3798MV200 恩兔N2 NS-1 (一): 设备介绍和刷机说明Hi3798MV200 恩兔N2 NS-1 (二): HiNAS海纳思使用和修改Hi3798MV200 恩兔N2 NS-1 (三): 制作 Ubuntu rootfsHi3798MV200 恩兔N2 NS-1 (四): 制作 Debian rootfs 关于 Debian rootfs Debian 没有像 Ubuntu 提供 Ubuntu-…...

编程日记 2023/8/8 4:30:39

面试热题（字符串相加）

给定两个字符串形式的非负整数 num1 和num2 &#xff0c;计算它们的和并同样以字符串形式返回。 你不能使用任何內建的用于处理大整数的库&#xff08;比如 BigInteger&#xff09;&#xff0c; 也不能直接将输入的字符串转换为整数形式。 输入&#xff1a;num1 "11"…...

编程日记 2023/8/8 4:29:38

我的创作纪念日【第一个2048day】

机缘 初心&#xff1a;研究生期间&#xff0c;帮老师做一个项目&#xff0c;过程中学习的东西想记录下来&#xff0c;于是&#xff0c;就选择了CADN让技术分享成为工作的一部分 收获 获得了1800多粉丝的关注获得了63万的访问量&#xff0c;其中《C#设计模式》专栏深受大家喜欢…...

编程日记 2023/8/8 4:28:36

内网穿透-————SSH远程连接树莓派

前言 文章目录 前言内网穿透实现公网SSH远程连接树莓派1. 在树莓派上安装[cpolar客户端](https://www.cpolar.com/)2. 在树莓派浏览器中输入本地9200端口3. 在公共互联网的电脑的命令行界面输入命令 内网穿透实现公网SSH远程连接树莓派 随着科技的进步和信息技术的发展&#x…...

编程日记 2023/8/8 4:27:34

一键开启ChatGPT“危险发言”

‍ ‍ 大数据文摘授权转载自学术头条 作者&#xff1a;Hazel Yan 编辑&#xff1a;佩奇 随着大模型技术的普及&#xff0c;AI 聊天机器人已成为社交娱乐、客户服务和教育辅助的常见工具之一。 然而&#xff0c;不安全的 AI 聊天机器人可能会被部分人用于传播虚假信息、操纵舆…...

编程日记 2023/8/8 4:26:33

RISC-V基础之函数调用（一）简单的函数调用（包含实例）

高级语言支持函数&#xff08;也称为过程或子程序&#xff09;来重用通用的代码&#xff0c;以及使程序更加模块化和可读。函数可以有输入&#xff0c;称为参数&#xff0c;和输出&#xff0c;称为返回值。函数应该计算返回值&#xff0c;并且不产生其他意外的副作用。 在一个…...

编程日记 2023/8/8 4:25:32

apt、aptitude、apt-get/apt-cache语法的区别

apt句法 aptitude句法 apt-get/apt-cache语法 描述 apt update aptitude update apt-get update 更新包存档元数据 apt install foo ap...

编程日记 2023/8/8 4:24:31

华为认证 | HCIA和HCIP有啥区别？

HCIA和HCIP都是华为认证体系里的&#xff0c;所以它们的考试流程大同小异&#xff0c;唯一区别的话&#xff0c;那可能就是课程内容方面的区别较大了。 那么HCIA和HCIP考试有啥区别呢&#xff1f;下面我们就来跟随小编来了解一下吧。 01 HCIA和HCIP考试有啥区别 ★ 等级不同 …...

编程日记 2023/8/8 4:23:29

JavaScript基础知识

JavaScript基础知识 一、变量与数据类型1. 变量2. 数据类型 二、表达式与运算符1.字面量2.表达式3.运算符3.1 算术运算符3.2 比较运算符3.3 逻辑运算符3.4 赋值运算符 三、条件语句1. 控制流程2. 语句块3. if 语句3. switch 语句4. 条件运算符 四、循环语句1. while2. do...whi…...

编程日记 2023/8/8 4:22:28

vue2 todoapp案例(静态)

1.创建三个子组件(TodoHeader、TodoMain、TodoFooter)和两个(index.css、base.css)样式&#xff1b; TodoHeader页面 <template><header class"header"><h1>todos</h1><input id"toggle-all" class"toggle-all" typ…...

编程日记 2023/8/8 4:21:27

qt5.14 和 qt5.15的区别

Qt 5.14 和 Qt 5.15 是两个不同的 Qt 版本&#xff0c;它们之间有一些区别和改进。 以下是一些 Qt 5.15 相对于 Qt 5.14 的变化和改进&#xff1a; 性能改进&#xff1a;Qt 5.15 引入了一些性能改进&#xff0c;包括提高渲染性能和减少内存占用。 Qt 3D&#xff1a;Qt 5.15 对…...

编程日记 2023/8/8 4:20:26

如何使用自己域名进行远程访问内网群晖NAS 6.X

使用自己的域名远程访问内网群晖NAS 6.X【内网穿透】 文章目录 使用自己的域名远程访问内网群晖NAS 6.X【内网穿透】 在之前的文章中&#xff0c;我们向大家演示了如何使用cpolar&#xff0c;创建一条固定的、能够在公共互联网登录内网群晖NAS的数据隧道。这条隧道已经能够应对…...

编程日记 2023/8/8 4:19:20

PHP判处重复延长队列执行时间

需求是这样&#xff1a; 14:00的时候&#xff0c;需要给1000个门店执行发券操作&#xff0c;有的门店需要发3个场景&#xff0c;开放平台的接口有请求频次限制&#xff0c;他是按照门店的场景发券需要间隔10秒。比如说&#xff0c;AB两个门店同时发a券&#xff0c;但不能 A门店…...

编程日记 2023/8/8 4:18:19

flask中的应用上下文

flask中的应用上下文 Flask应用上下文主要包含两个对象&#xff1a;current_app和g。这两个对象在处理请求期间都是全局可访问的&#xff0c;但在每个请求结束时都会被重置。 current_app&#xff1a;这是当前激活的Flask应用的实例。在大多数情况下&#xff0c;你可以将其视为…...

编程日记 2023/8/8 4:17:17

cocos creator 的input.on 不生效

序&#xff1a; 1、执行input.on的时候发现不生效 2、一直按控制台也打印不出来console.log 3、先收藏这篇&#xff0c;因为到时候cocos要开发serveApi的时候&#xff0c;你得选一款趁手的后端开发并且&#xff0c;对习惯用ts写脚本的你来说&#xff0c;node是入门最快&#xf…...

编程日记 2023/8/8 4:16:14

Visual C++运行库全解析：从问题诊断到高效部署的完整指南

Visual C运行库全解析&#xff1a;从问题诊断到高效部署的完整指南 【免费下载链接】vcredist AIO Repack for latest Microsoft Visual C Redistributable Runtimes 项目地址: https://gitcode.com/gh_mirrors/vc/vcredist 问题诊断&#xff1a;运行库故障的典型表现与…...

编程新知 2026/4/3 15:08:53

Dubbo 框架核心解析与手写实现思路

在微服务架构中&#xff0c;远程服务调用是最基础、最核心的能力。RPC 作为分布式系统的通信基石&#xff0c;让跨进程、跨机器的方法调用像本地调用一样简单。Apache Dubbo 作为国内最主流的 Java RPC 框架&#xff0c;从单纯的远程调用组件&#xff0c;逐步演进为一站式微服务…...

编程新知 2026/4/3 13:49:21

Qwen2.5-14B-Instruct部署案例：高校戏剧系用像素剧本圣殿教学实践

Qwen2.5-14B-Instruct部署案例&#xff1a;高校戏剧系用像素剧本圣殿教学实践 1. 项目背景与价值 在戏剧创作教学中&#xff0c;传统剧本创作方式面临诸多挑战&#xff1a;学生创意受限、格式不规范、修改成本高。某高校戏剧系引入基于Qwen2.5-14B-Instruct深度优化的"像…...

编程新知 2026/4/3 13:25:07

Phi-3-mini-4k-instruct-gguf效果实测：单卡3090上并发3路问答的延迟与显存占用

Phi-3-mini-4k-instruct-gguf效果实测&#xff1a;单卡3090上并发3路问答的延迟与显存占用 1. 测试背景与模型介绍 Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本&#xff0c;专为问答、文本改写、摘要整理和简短创作等场景优化。作为一款开箱即…...

编程新知 2026/4/3 13:10:52

快马AI助力：十分钟用开yun技术栈搭建微服务电商原型

最近尝试用开yun技术栈快速搭建微服务电商原型&#xff0c;发现结合InsCode(快马)平台的AI辅助功能&#xff0c;整个过程比想象中顺畅很多。记录下这个十分钟搭建原型的实践过程&#xff0c;特别适合需要快速验证想法的场景。 技术选型思路 开yun技术栈作为云原生领域的热门选…...

编程新知 2026/4/3 12:58:50

3步解决视频转PPT难题：智能幻灯片提取工具全攻略

3步解决视频转PPT难题&#xff1a;智能幻灯片提取工具全攻略 【免费下载链接】extract-video-ppt extract the ppt in the video 项目地址: https://gitcode.com/gh_mirrors/ex/extract-video-ppt 在数字化学习与办公场景中&#xff0c;从视频中提取PPT内容一直是效率瓶…...

编程新知 2026/4/3 12:16:23

Max抢票机器人：2025终极抢票神器，让热门门票不再错过

Max抢票机器人&#xff1a;2025终极抢票神器&#xff0c;让热门门票不再错过 【免费下载链接】tix_bot Max搶票機器人(maxbot) help you quickly buy your tickets 项目地址: https://gitcode.com/gh_mirrors/ti/tix_bot 还在为抢不到演唱会门票而烦恼吗&#xff1f;每次…...

编程新知 2026/4/3 11:54:11

3个核心功能揭秘：MPC-BE如何成为Windows平台最强开源播放器

3个核心功能揭秘&#xff1a;MPC-BE如何成为Windows平台最强开源播放器 【免费下载链接】MPC-BE MPC-BE – универсальный проигрыватель аудио и видеофайлов для операционной системы Windows. 项目地址…...

编程新知 2026/4/3 11:21:54

Translumo：跨场景实时翻译解决方案的技术实践与应用指南

Translumo&#xff1a;跨场景实时翻译解决方案的技术实践与应用指南 【免费下载链接】Translumo Advanced real-time screen translator for games, hardcoded subtitles in videos, static text and etc. 项目地址: https://gitcode.com/gh_mirrors/tr/Translumo 语言障…...

编程新知 2026/4/3 11:03:41

OBS模糊插件终极指南：如何用obs-composite-blur提升直播画面专业度

OBS模糊插件终极指南&#xff1a;如何用obs-composite-blur提升直播画面专业度 【免费下载链接】obs-composite-blur A comprehensive blur plugin for OBS that provides several different blur algorithms, and proper compositing. 项目地址: https://gitcode.com/gh_mir…...

编程新知 2026/4/3 10:57:36