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

【CSS】旋转中的视差效果

news 2025/9/16 23:43:15

效果

在这里插入图片描述

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/9/16 21:55:15

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/6/15 22:22:18

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

编程新知 2025/9/8 2:13:23

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

编程新知 2025/7/20 9:15:14

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/9/14 10:43:41

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/8/26 13:03:54

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/8/24 22:00:49

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57