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

【CSS】旋转中的视差效果

news 文章来源：https://blog.csdn.net/chenlu5201314/article/details/132101220 2025/5/5 16:09:28

效果

在这里插入图片描述

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 中定义的行和列的名称。

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

header	header
sidebar	main
footer	footer

通过以上示例，您可以看到如何使用 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 类，仅简单地封装了一个Query函数，代码如下： public class TestMysql{public static string SqlserverConnectStr "server127.0.0.1;charsetutf8;user idroot;persistsecurityin…...

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

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

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

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

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

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

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

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

一、题目二、解题步骤下面是用动态规划的思想解决这道题的过程，相信各位小伙伴都能看懂并且掌握这道经典的动规题目滴。三、参考代码 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 ，计算它们的和并同样以字符串形式返回。你不能使用任何內建的用于处理大整数的库（比如 BigInteger）， 也不能直接将输入的字符串转换为整数形式。输入：num1 "11"…...

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

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

机缘初心：研究生期间，帮老师做一个项目，过程中学习的东西想记录下来，于是，就选择了CADN让技术分享成为工作的一部分收获获得了1800多粉丝的关注获得了63万的访问量，其中《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“危险发言”

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

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

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

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

编程日记 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都是华为认证体系里的，所以它们的考试流程大同小异，唯一区别的话，那可能就是课程内容方面的区别较大了。那么HCIA和HCIP考试有啥区别呢？下面我们就来跟随小编来了解一下吧。 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)样式； 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 版本，它们之间有一些区别和改进。以下是一些 Qt 5.15 相对于 Qt 5.14 的变化和改进： 性能改进：Qt 5.15 引入了一些性能改进，包括提高渲染性能和减少内存占用。 Qt 3D：Qt 5.15 对…...

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

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

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

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

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

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

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

flask中的应用上下文

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

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

cocos creator 的input.on 不生效

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

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

WFPlayer

WFPlayer WFPlayer 可以实现分析音视频生成音频波形图在线demo地址: demo WFPlayer支持： 在不加载整个媒体文件的情况下创建波形自定义光标、进度、网格、标尺显示和颜色加载媒体url和加载媒体dom元素（视频标签和音频标签）颜色或宽度等实时…...

编程日记 2023/8/8 4:15:12

Netty面试题

1.BIO、NIO 和 AIO 的区别？ BIO：一个连接一个线程，客户端有连接请求时服务器端就需要启动一个线程进行处理。线程开销大。伪异步 IO：将请求连接放入线程池，一对多，但线程还是很宝贵的资源。 NIO&#x…...

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

基于Home Assistant远程开门

基于Home Assistant远程开门 1.购买云服务器 1.1 阿里云服务器本人使用的是阿里云服务器，其他的腾讯云，百度云都可以如果你想要一个建议的话： 推荐在打折优惠的时候买，比如双十一阿里云最近有一个飞天计划，在校…...

编程日记 2023/8/8 4:13:09

Docker相关的参数配置

Docker的配置文件/etc/docker/daemon.json中的大部分配置项如下所示 ： {"allow-nondistributable-artifacts": [],"api-cors-header": "","authorization-plugins": [],"bip": "","bridge"…...

编程日记 2023/8/8 4:12:06