【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.rhkb.cn/news/82466.html

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

相关文章

【算法|数组】快慢指针

算法|数组——快慢指针 引入 给你一个数组 nums 和一个值 val&#xff0c;你需要 原地 移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须仅使用 O(1) 额外空间并 原地 修改输入数组。 元素的顺序可以改变。你…

图像的平移变换之c++实现(qt + 不调包)

1.基本原理 设dx为水平偏移量&#xff0c;dy为垂直偏移量&#xff0c;则平移变换的坐标映射关系为下公式&#xff0c;图像平移一般有两种方式。 1.不改变图像大小的平移&#xff08;一旦平移&#xff0c;相应内容被截掉&#xff09; 1&#xff09;当dx > width、dx < -wi…

hive编译报错整理

背景 最近在修hive-1.2.0的一个bug&#xff0c;需要修改后重新打包部署到集群&#xff0c;打包的时候报下面的错误&#xff0c;原因很简单&#xff0c;从远程仓库里面已经拉不到这个包了。 org.pentaho:pentaho-aggdesigner-algorithm:jar:5.1.5-jhyde was not found in http…

用 docker 创建 jmeter 容器,能做性能测试?

我们都知道&#xff0c;jmeter 可以做接口测试&#xff0c;也可以用于性能测试&#xff0c;现在企业中性能测试也大多使用 jmeter。docker 是最近这些年流行起来的容器部署工具&#xff0c;可以创建一个容器&#xff0c;然后把项目放到容器中&#xff0c;就可以构建出一个独立的…

基于react-native的简单消息确认框showModel

基于react-native的简单消息确认框showModel 效果示例图组件代码ShowModel/index.jsx使用案例device.js安装线性渐变色 效果示例图 组件代码ShowModel/index.jsx import React, {forwardRef, useImperativeHandle, useState} from react; import {View,Text,Modal,TouchableOp…

安全防御(3)

1.总结当堂NAT与双机热备原理&#xff0c;形成思维导图 2.完成课堂nat与双机热备试验 引用IDS是指入侵检测系统&#xff0c;它可以在网络中检测和防御入侵行为。IDS的签名是指根据已知入侵行为的特征制定的规则&#xff0c;用于检测和警告可能存在的入侵行为。签名过滤器可以根…

4.2 Windows终端数据安全

数据参考&#xff1a;CISP官方 目录 系统备份与还原数据备份数据粉碎数据加密 一、系统备份与还原 为什么需要系统备份 系统越用越慢系统故障导致不稳定系统无法登录 系统备份重新部署 (重装系统、重置系统) 丟失配置&#xff0c;需要重新配置个人数据丢失的风险 系统…

MySQL数据库基础

目标&#xff1a; 1.数据库操作&#xff1a;创建数据库&#xff0c;删除数据库 2.常用数据类型 3.表的操作&#xff1a;创建表&#xff0c;删除表 数据库操作 &#xff08;1&#xff09;显示数据库 show databases&#xff1b; &#xff08;2&#xff09;创建数据库 创建一个…

论文笔记:SUPERVISED CONTRASTIVE REGRESSION

2022arxiv的论文&#xff0c;没有中&#xff0c;但一作是P大图班本MIT博&#xff0c;可信度应该还是可以的 0 摘要 深度回归模型通常以端到端的方式进行学习&#xff0c;不明确尝试学习具有回归意识的表示。 它们的表示往往是分散的&#xff0c;未能捕捉回归任务的连续性质。…

【C++】右值引用

文章目录 右值引用值得形式返回对象的缺陷移动语句移动赋值 右值引用 能够取地址、能够被修改的被称之为左值。 不能够取地址、不能够被修改、以及将亡值被称之为右值。 普通类型的变量&#xff0c;因为有名字&#xff0c;可以取地址&#xff0c;都认为是左值。const修饰的常量…

Oracle以逗号分隔的字符串拆分为多行数据实例详解

前言 近期在工作中遇到某表某字段是可扩展数据内容&#xff0c;信息以逗号分隔生成的&#xff0c;现需求要根据此字段数据在其它表查询相关的内容展现出来&#xff0c;第一想法是切割数据&#xff0c;以逗号作为切割符&#xff0c;以下为总结的实现方法&#xff0c;以供大家参…

ORB-SLAM2学习笔记6之D435i双目IR相机运行ROS版ORB-SLAM2并发布位姿pose的rostopic

文章目录 0 引言1 D435i相机配置2 新增发布双目位姿功能2.1 新增d435i_stereo.cc代码2.2 修改CMakeLists.txt2.3 新增配置文件D435i.yaml 3 编译运行和结果3.1 编译运行3.2 结果3.3 可能出现的问题 0 引言 ORB-SLAM2学习笔记1已成功编译安装ROS版本ORB-SLAM2到本地&#xff0c…

搭建Repo服务器

1 安装repo 参考&#xff1a;清华大学开源软件镜像站:Git Repo 镜像使用帮助 2 创建manifest仓库 2.1 创建仓库 git init --bare manifest.git2.2 创建default.xml文件 default.xml文件内容&#xff1a; <?xml version"1.0" encoding"UTF-8" ?…

4.2、Flink任务怎样读取文件中的数据

目录 1、前言 2、readTextFile&#xff08;已过时&#xff0c;不推荐使用&#xff09; 3、readFile&#xff08;已过时&#xff0c;不推荐使用&#xff09; 4、fromSource(FileSource) 推荐使用 1、前言 思考: 读取文件时可以设置哪些规则呢&#xff1f; 1. 文件的格式(tx…

【C++】数据结构与算法:常用排序算法

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍常用排序算法。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路&#x1…

单片机、嵌入式的大神都平时浏览什么网站?

我平时也喜欢收藏些有关嵌入式的学习网站&#xff0c;压箱底的记录翻出来总结下 1、综合网站 哔哩哔哩 (゜-゜)つロ 干杯~-bilibili//B站是一个有很多好资料的网站 https://github.com/nhivp/Awesome-Embedded //github开源项目网站&#xff0c;这个是我找到嵌入式综合相关的…

PS的一些智能对象是怎么用的?用于包装设计该怎么使用?

大家都对一些效果图不太理解&#xff0c;我现在就献丑给大家讲一下&#xff0c;教程都是网友盛传的&#xff0c;我自己学习并且有所体会。 一般做的非常好的PS效果图都是外国人自己做的&#xff0c;所以大多数效果图都是英文&#xff0c;细心的网友会发现&#xff0c;中文的是一…

chatGPT能力培训,客户最关注的99个方向

前言&#xff1a; chatGPT的主要应用&#xff0c;包括文本生成、图像生成和图文关联三大核心方向&#xff1a; 用户的在实际的工作和学习过程中&#xff0c;最关心的内容&#xff0c;可以按照上述类别进行划分&#xff0c;我们总结了&#xff0c;相关的插头GPT能力培训的相关主…

基于OFDM通信系统的低复杂度的资源分配算法matlab性能仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 .......................................................................%子载波分配[~,po…

MySQL:表的约束和基本查询

表的约束 表的约束——为了让插入的数据符合预期。 表的约束很多&#xff0c;这里主要介绍如下几个&#xff1a; null/not null,default, comment, zerofill&#xff0c;primary key&#xff0c;auto_increment&#xff0c;unique key 。 空属性 两个值&#xff1a;null&am…