【CSS】旋转中的视差效果

效果

在这里插入图片描述

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-templategrid-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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/23107.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

docker【安装、存储、镜像、仓库、网络、监控】

docker-0110.0.0.51docker-0210.0.0.52docker-0310.0.0.53 【1】docker安装 docker-01 [rootdocker-01 ~]# vim /etc/yum.conf [main] cachedir/var/cache/yum/$basearch/$releasever keepcache1 debuglevel2 logfile/var/log/yum.log exactarch1 obsoletes1 gpgcheck1 plugin…

HDFS的QJM方案

Quorum Journal Manager仲裁日志管理器 介绍主备切换&#xff0c;脑裂问题解决---ZKFailoverController&#xff08;zkfc&#xff09;主备切换&#xff0c;脑裂问题解决-- Fencing&#xff08;隔离&#xff09;机制主备数据状态同步问题解决 HA集群搭建集群基础环境准备HA集群规…

Unity 3D ScrollRect和ScrollView回弹问题的解决

你是否是这样&#xff1f; Content高度 < 全部Cell加在一起的总高 他就认为你的全部Cell加起来就跟Content一样大&#xff0c;所以才出现了这种完全回弹 我该怎么办&#xff1f; 很简单&#xff0c;改变Content的长度跟所有Cell的和一样大 void RefreshSize(){float allD…

【BASH】回顾与知识点梳理(四)

【BASH】回顾与知识点梳理 四 四. Bash Shell 的操作环境4.1 路径与指令搜寻顺序4.2 bash 的进站与欢迎讯息&#xff1a; /etc/issue, /etc/motd4.3 bash 的环境配置文件login与non-login shell/etc/profile (login shell 才会读)~/.bash_profile (login shell 才会读)source &…

好奇心驱使下试验了 chatGPT 的 js 代码的能力

手边的项目中有个函数&#xff0c;主要实现图片分片裁剪功能。可以优化一下。 也想看看 chatGPT 的代码理解能力&#xff0c;优化能力&#xff0c;实现能力&#xff0c;用例能力。 于是有了这篇文章。 实验结果总结&#xff1a; chatGPT 确实强大&#xff0c;提供的答案可以借…

LeetCode 每日一题 2023/7/31-2023/8/6

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 7/31 143. 重排链表8/1 2681. 英雄的力量8/2 822. 翻转卡片游戏8/3 722. 删除注释8/4 980. 不同路径 III8/58/6 7/31 143. 重排链表 快慢指针找到链表中间位置 反转后半截链…

C++学习笔记总结:算法

算法 参考文献 C进阶&#xff1a;STL算法总结C标准库STL算法 1 泛型算法概览 说明 容器的迭代器使得算法不依赖于容器。但算法依赖于元素类型的操作。标准库仅仅提供了100多个算法 头文件 头文件功能<algorithm>算法函数<numeric>数值算法<functional>函…

WebSocket整合直播

由于浏览器不支持对于rtmp协议推拉流&#xff0c;所以需要后台对传输的数据进行处理&#xff0c;将数据转接&#xff0c;为了实现其实时性&#xff0c;使用websocket将数据传输 先使用obs和vlc测试正常的推拉流是否正常 然后在跑本地后台传输视频 使用JavaCV技术传输音视频 …

opencv基础40-礼帽运算(原始图像减去其开运算)cv2.MORPH_TOPHAT

礼帽运算是用原始图像减去其开运算图像的操作。礼帽运算能够获取图像的噪声信息&#xff0c;或者得到比原始图像的边缘更亮的边缘信息。 例如&#xff0c;图 8-22 是一个礼帽运算示例&#xff0c;其中&#xff1a; 左图是原始图像。中间的图是开运算图像。右图是原始图像减开运…

python数据处理程序代码,如何用python处理数据

大家好&#xff0c;给大家分享一下python数据处理程序代码&#xff0c;很多人还不知道这一点。下面详细解释一下。现在让我们来看看&#xff01; 要求&#xff1a;分别以james&#xff0c;julie&#xff0c;mikey&#xff0c;sarah四个学生的名字建立文本文件&#xff0c;分别存…

【NLP PyTorch】字符级RNN循环网络模型姓氏对应国家分类(项目详解)

字符级RNN模型姓氏对应国家分类 1 序言1 数据来源与加载1.1 数据来源1.2 数据加载2 数据预处理2.1 单个字符数据处理标准2.2 单词的张量构造3 模型创建4 模型训练5 模型检验6 模型预测7 模型部署1 序言 本文的任务主要来源于PyTorch的官方教程,即给定各国人名的数据集,你需要…

shell指令的应用

整理思维导图判断家目录下&#xff0c;普通文件的个数和目录文件的个数输入一个文件名&#xff0c;判断是否为shell脚本文件&#xff0c;如果是脚本文件&#xff0c;判断是否有可执行权限&#xff0c;如果有可执行权限&#xff0c;运行文件&#xff0c;如果没有可执行权限&…

测试平台——项目模块模型类设计

这里写目录标题 一、项目应用1、项目包含接口&#xff1a;2、创建子应用3、项目模块设计a、模型类设计b、序列化器类设计c、视图类设计 4、接口模块设计a、模型类设计b、序列化器类设计c、视图类设计 5、环境模块设计6、DRF中的通用过滤6.1、设置过滤器后端 一、项目应用 1、项…

SpringBoot统一功能处理(拦截器)

1.用户登录权限校验 1.1自定义拦截器 写一个类去实现HandlerInterceptor接口表示当前类是一个拦截器,再重写HandlerInterceptor接口中的方法,preHandle为在方法执行前拦截,postHandle为方法执行中拦截,afterCompletion为方法执行中拦截.需要在什么时候拦截就重写什么方法 Co…

百度智能云“千帆大模型平台”最新升级:接入Llama 2等33个模型!

今年3月&#xff0c;百度智能云推出“千帆大模型平台”。作为全球首个一站式的企业级大模型平台&#xff0c;千帆不但提供包括文心一言在内的大模型服务及第三方大模型服务&#xff0c;还提供大模型开发和应用的整套工具链&#xff0c;能够帮助企业解决大模型开发和应用过程中的…

人工智能可解释性分析导论(初稿)

目录 思维导图 1.黑箱所带来的问题 2.从应用面论述为什么要进行可解释性分析 2.1可解释性分析指什么 2.2可解释性分析的必要性 2.3可解释性分析应用实例 2.4 可解释性分析的脑回路&#xff08;以可视化为例如何&#xff09; 3.如何研究可解释性分析 3.1使用好解释的模型 3…

Redis-2

Redis 持久化 Redis 为了保证效率&#xff0c;数据缓存在了内存中&#xff0c;但是会周期性的把更新的数据写入磁盘或者把修改操作写入追加的记录文件中&#xff0c;以保证数据的持久化。总的目的把数据保存到硬盘&#xff0c;有 RDB 和 AOF 两种。 RDB 持久化方案: RDB 是一…

ClickHouse SQL与引擎--基本使用(一)

1.查看所有的数据库 show databases; 2.创建库 CREATE DATABASE zabbix ENGINE Ordinary; ATTACH DATABASE ck_test ENGINE Ordinary;3.创建本地表 CREATE TABLE IF NOT EXISTS test01(id UInt64,name String,time UInt64,age UInt8,flag UInt8 ) ENGINE MergeTree PARTI…

mysql高级(尚硅谷-夏磊)

目录 内容介绍 Linux下MySQL的安装与使用 Mysql逻辑架构 Mysql存储引擎 Sql预热 索引简介 内容介绍 1、Linux下MySQL的安装与使用 2、逻辑架构 3、sql预热 Linux下MySQL的安装与使用 1、docker安装docker run -d \-p 3309:3306 \-v /atguigu/mysql/mysql8/conf:/etc/my…

VGG卷积神经网络-笔记

VGG卷积神经网络-笔记 VGG是当前最流行的CNN模型之一&#xff0c; 2014年由Simonyan和Zisserman提出&#xff0c; 其命名来源于论文作者所在的实验室Visual Geometry Group。 测试结果为&#xff1a; 通过运行结果可以发现&#xff0c;在眼疾筛查数据集iChallenge-PM上使用VGG…