css 动画之旋转视差

序:网上看到的一个例子,做一下

效果图:

 

代码:

<style>.content{width: 300px;height: 300px;margin: 139px auto;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);grid-template: "A A B""C D B""C E E";gap: 5px;--r: 360deg;}.item{display: flex;align-items: center;justify-content: center;overflow: hidden;border: 2px solid;border-radius: 20%;}.item:nth-child(1){grid-area: A;}.item:nth-child(2){grid-area: B;}.item:nth-child(3){grid-area: C;}.item:nth-child(4){grid-area: D;}.item:nth-child(5){grid-area: E;}.image{width: 240px;height: 240px;--r: -360deg;}.content,.image{animation: rotation 5s linear infinite;}@keyframes rotation {to{transform: rotate(var(--r));}}
</style>
<div class="content"><div class="item"><img class="image" src="https://image.happyacomma.top/images/2022/12/22/1.jpg" alt="1"/></div><div class="item"><img class="image" src="https://image.happyacomma.top/images/2022/12/22/2.jpg" alt="2"/></div><div class="item"><img class="image" src="https://image.happyacomma.top/images/2022/12/22/3.jpg" alt="3"/></div><div class="item"><img class="image" src="https://image.happyacomma.top/images/2022/12/22/4.jpg" alt="4"/></div><div class="item"><img class="image" src="https://image.happyacomma.top/images/2022/12/22/5.jpg" alt="5"/></div>
</div>

原理比较简单,旋转一顺一逆,效果则出来了

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

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

相关文章

Python 进阶(六):文件读写(I/O)

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 1. 打开文件2. 读取文件2.1 逐行读取文件2.2 读取所有行 3. 写入文件3.1 向文件中写入…

从0到1开发go-tcp框架【1-搭建server、封装连接与业务绑定、实现基础Router、抽取全局配置文件】

从0到1开发go-tcp框架【1-搭建server、封装连接与业务绑定、实现基础Router】 本期主要完成对Server的搭建、封装连接与业务绑定、实现基础Router&#xff08;处理业务的部分&#xff09;、抽取框架的全局配置文件 从配置文件中读取数据&#xff08;服务器监听端口、监听IP等&a…

在CSDN学Golang云原生(Kubernetes集群安全)

一&#xff0c;ABAC授权模式 Kubernetes ABAC&#xff08;Attribute-Based Access Control&#xff09;授权模式是一种基于属性的访问控制模型&#xff0c;它可以根据用户或组的属性决定是否允许他们访问 Kubernetes 集群中的资源。 在使用 ABAC 授权模式时&#xff0c;管理员…

汇编语言基础知识

目录 前言&#xff1a; 汇编语言的产生 汇编语言的组成 内存 指令和数据 cpu对内存的读写操作 地址总线 数据总线 控制总线 内存地址空间 前言&#xff1a; 汇编语言是直接在硬件之上工作的 编程语言&#xff0c;我们首先了解硬件系统的机构&#xff0c;才能有效地应用…

C/C++多线程操作

文章目录 多线程C创建线程join 和detachthis_thread线程操作锁lock_guardunique_lock 条件变量 condition_variablewaitwaitfor C语言线程创建线程同步 参考 多线程 传统的C&#xff08;C11标准之前&#xff09;中并没有引入线程这个概念&#xff0c;在C11出来之前&#xff0c…

PyTorch Lightning教程四:超参数的使用

如果需要和命令行接口进行交互&#xff0c;可以使用Python中的argparse包&#xff0c;快捷方便&#xff0c;对于Lightning而言&#xff0c;可以利用它&#xff0c;在命令行窗口中&#xff0c;直接配置超参数等操作&#xff0c;但也可以使用LightningCLI的方法&#xff0c;更加轻…

WPF实战学习笔记22-添加自定义询问窗口

添加自定义询问窗口 详细代码&#xff1a;https://github.com/DongLiqiang/Mytodo/commit/221de6b2344d5c861f1d3b2fbb2480e3e3b35c26 添加自定义询问窗口显示方法 修改文件Mytodo.Extensions.DialogExtension 添加内容&#xff0c;类中添加内容 /// <summary> /// …

【编译】gcc make cmake Makefile CMakeList.txt 区别

文章目录 一 关系二 gcc2.1 编译过程2.2 编译参数2.3 静态库和动态库1 后缀名2 联系与区别 2.4 GDB 调试器1 常用命令 三 make、makefile四 cmake、cmakelist4.1 语法特性4.2 重要命令4.2 重要变量4.3 编译流程4.4 两种构建方式 五 Vscode5.0 常用快捷键5.1 界面5.2 插件5.3 .v…

使用 docker 一键部署 MySQL

目录 1. 前期准备 2. 导入镜像 3. 创建部署脚本文件 4. MySQL 服务器配置文件模板 5. 执行脚本创建容器 6. 后续工作 7. 基本维护 1. 前期准备 新部署前可以从仓库&#xff08;repository&#xff09;下载 MySQL 镜像&#xff0c;或者从已有部署中的镜像生成文件&#x…

Shell错误:/bin/bash^M: bad interpreter: No such file or directory

目录 错误原因和现象 解决方案 错误原因和现象 在执行shell脚本的时候&#xff0c;报错&#xff1a;/bin/bash^M: bad interpreter: No such file or directory。 是由于该脚本文件是在Windows平台编写&#xff0c;然后在MacOS平台中执行。 在Windows平台上文件是dos格式&…

STM32 SPI学习

SPI 串行外设设备接口&#xff08;Serial Peripheral Interface&#xff09;&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线。 SCK时钟信号由主机发出。 SPI接口主要应用在存储芯片。 SPI相关引脚&#xff1a;MOSI&#xff08;输出数据线&#xff…

C语言学习笔记---数组篇章

C语言程序设计笔记---011 C语言数组1、一维数组的创建和初识化2、数组的初识化3、一维数组的使用3.1、一维数组在内存中的存储 4、二维数组的创建和初识化4.1、二维数组的使用4.1.1、打印二维数组的元素例程 4.2、二维数组在内存中的存储4.3、数组越界4.3.1、数组越界例程 4.4、…

深入了解 LoRaWAN® MAC 命令

本文深入探讨了用于 LoRaWAN 网络管理的 MAC 命令。它面向终端设备软件开发人员和使用 LoRa 构建设备的团队经理,这些设备实现了LoRaWAN 链路层规范 v1.0.4。本文帮助您了解不同类型的 MAC 命令、每个命令的用途以及如何解释这些命令。 已经使用LoRaMAC-Node™等软件来处理 MA…

C# Blazor 学习笔记(2):组件模板化/插槽

文章目录 前言组件模板为什么要组件模板不使用组件模板使用后 代码部分 和直接绑定数据有和区别&#xff1f; 前言 组件模板化我们在WPF经常遇到&#xff0c;这里将一下Blazor是如何解决的。 组件模板 为什么要组件模板 虽然组件化了之后&#xff0c;我们写代码的速度已经很…

1.netty介绍

1.介绍 是JBOSS通过的java开源框架是异步的,基于事件驱动(点击一个按钮调用某个函数)的网络应用框架,高性能高可靠的网络IO程序基于TCP,面向客户端高并发应用/点对点大量数据持续传输的应用是NIO框架 (IO的一层层封装) TCP/IP->javaIO和网络编程–>NIO—>Netty 2.应用…

Linux 新硬盘分区,挂载

在Linux系统中&#xff0c;当你插入新的硬盘时&#xff0c;你需要进行一些步骤来使系统识别并使用它。以下是一些常见的步骤&#xff1a; 确保硬盘已正确连接到计算机。检查硬盘的电源和数据线是否牢固连接。 打开终端或命令行界面。 运行以下命令来扫描新硬盘&#xff1a; s…

性能测试必备监控技能windows篇

前言 在手头没有专门的第三方监控时&#xff0c;该怎么监控服务指标呢&#xff1f;本篇就windows下监控进行分享&#xff0c;也是我们在进行性能测试时&#xff0c;必须掌握的。下面我们就windows下常用的三种监视工具进行说明&#xff1a; 任务管理器 资源监视器 性能监视器…

找样机素材,就上这5个网站,免费下载~

设计师经常需要用到各种样机模型来展示直接的作品&#xff0c;今天我就分享几个可以免费下载样机模型的网站&#xff0c;大家赶紧收藏起来&#xff01; 菜鸟图库 https://www.sucai999.com/searchlist/3217.html?vNTYxMjky 菜鸟图库有多种类型的设计素材&#xff0c;像平面、…

Element-plus侧边栏踩坑

问题描述 el-menu直接嵌套el-menu-item菜单&#xff0c;折叠时不会出现文字显示和小箭头无法隐藏的问题&#xff0c;但是实际开发需求中难免需要把el-menu-item封装为组件 解决 vue3项目中嵌套两层template <template><template v-for"item in list" :k…

[ 容器 ] Docker 安全及日志管理

目录 Docker 容器与虚拟机的区别Docker 存在的安全问题Docker 架构缺陷与安全机制Docker 安全基线标准容器相关的常用安全配置方法限制流量流向镜像安全避免Docker 容器中信息泄露DockerClient 端与 DockerDaemon 的通信安全 容器的安全性问题的根源在于容器和宿主机共享内核。…