旋转中的图片视觉差效果

news2024/9/21 11:16:31

Hello，亲爱的宝子们？最近我一个前端架构师却临时顶替产品经理的工作，导致最近一周实在太忙了，都没有来得及更新文章。在这里想大家道歉了！也想厚颜无耻的问问大家想我了吗？(●'◡'●)

今天给大家带来一个非常简单，但是效果却相当炸裂的旋转图片视觉差特效。先看效果：

 

今天咱们就一起来写一下这个特效吧！O(∩_∩)O 

一、网格布局

这样的案例，一眼就可以看出来是五个 div 元素包裹了五张不同的图片。直接写出来：

<div><img src="./img/1.jpg"></div>
<div><img src="./img/2.jpg"></div>
<div><img src="./img/3.jpg"></div>
<div><img src="./img/4.jpg"></div>
<div><img src="./img/5.jpg"></div>

这个时候，是没有任何样式效果的：

 

接下来，我们需要将这五个 div 元素控制成这样穿透性的排版：

 

简单分析一下，要实现这样的排版，首先需要做到三行三列：

 

这样的排版，使用 css 中的 Grid 布局（又叫网格布局）是最方便快捷的，于是我们给五个 div 元素添加一个容器，用于划分网格。

<section>
  <div><img src="./assets/img/1.jpg"></div>
  <div><img src="./assets/img/2.jpg"></div>
  <div><img src="./assets/img/3.jpg"></div>
  <div><img src="./assets/img/4.jpg"></div>
  <div><img src="./assets/img/5.jpg"></div>
</section>

然后，在 css 中给容器设置三行三列的网格布局。

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

想了解更多关于 Grid 布局的知识，可以关注我们之后的文章。或者可以访问我男朋友多年前在慕课网录制的《Grid布局基础》。

 

为了更好的展示效果，我们使用固定定位把容器固定在屏幕中央，并设置相同的宽和高。

section {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 500px;
  height: 500px;
  margin: auto;
}

通过 Chrome 浏览器的开发者工具，我们把五个 div 元素注释了之后，可以看到渲染之后的网格布局。

 

这样，我们已经实现了对容器的三行三列的网格布局，但是和我们需要的布局方式还有点点不同。

 

没错，我们需要类似于合并单元格一样的，存在行和列之间的穿透效果。这里就需要用到 Grid 布局中的网格区域。

grid-template-areas:
  "topLeft topLeft topRight"
  "bottomLeft center topRight"
  "bottomLeft bottomRight bottomRight"
;

我们可以这样定义每一个网格区域，相同的值将会视为同一个区域。但是这样给网格区域命名，有点长了，于是简化一下：

grid-template-areas:
  "TL TL TR"
  "BL CE TR"
  "BL BR BR"
;

这样，就可以在代码的视觉上也可以看出来网格区域的划分：

 

网格区域已经定义好了，接下来就应该让五个 div 元素来认领这五个网格区域了。

section {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "TL TL TR"
    "BL CE TR"
    "BL BR BR"
  ;
  width: 500px;
  height: 500px;
  margin: auto;
}
div {
  overflow: hidden;
}
div:nth-child(1) { grid-area: TL; }
div:nth-child(2) { grid-area: TR; }
div:nth-child(3) { grid-area: BL; }
div:nth-child(4) { grid-area: CE; }
div:nth-child(5) { grid-area: BR; }

这里，我们设置了 div 的溢出为隐藏，这样里面的图片都会局限在对应的 div 范围里面。

基本上布局已经出来了。接下来，我们需要给每一个网格区域之间有一个空隙。

section {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "TL TL TR"
    "BL CE TR"
    "BL BR BR"
  ;
  gap: 10px;
  width: 500px;
  height: 500px;
  margin: auto;
}
div {
  border: 5px solid #696969;
  overflow: hidden;
}

通过 gap 属性控制弹性盒模型的空隙，同时也给 div 一个 5px 的灰色边框，于是我们得到了想要的布局效果：

 

这里，我们再优化一下，让每一个 div 的图片都居中显示：

div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #696969;
  overflow: hidden;
}

看一下效果：

 

感觉，图片大小再控制一下就完美了：

div > img {
  width: 100%;
}

由于我们的网格区域有长大于宽的矩形，也有长小于宽的矩形。如果设置图片的宽度为 100%，将会有部分网格区域中的图片不能填充满整个网格区域。

我这里就直接写成 300% 了。

div > img {
  width: 300%;
}

这就得到了我们需要的效果：

 

于是，我们巧妙的使用 Grid 布局把五张图片做成了个性化的布局。

二、动画效果

布局已经完成，接下来我们就需要实现旋转的动画效果。

很明显，我们是需要让整个容器顺时针匀速旋转，于是我们先定义一个动画为旋转 360deg 的状态：

@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}

然后，我们对整个容器调用该动画：

section {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "TL TL TR"
    "BL CE TR"
    "BL BR BR"
  ;
  gap: 10px;
  width: 500px;
  height: 500px;
  margin: auto;
  animation: rotation 10s linear infinite;
}

这里，我们还是一样设置了 infinite，让其动画可以不断重复。

 

录制一圈的 GIF 图片大小已经超过 5MB 了，所以我就只录制这一段了，望大家体谅。大家可以代码实现了之后看完整效果。

我们会发现，图片也跟着容器在旋转了。有什么办法让图片不跟着容器一起旋转呢？最简单的办法莫过于“相对运动”。

灵感来源于生活，编程的灵感亦如此。设想一下，当我们和朋友以相同的速度朝着同一个方向迈步向前走的时候，相对于朋友来说，我们就是静止的。同样的道理，如果我们和朋友同样以相同的速度朝着相反的方向迈步走的时候，相对于朋友来说，我们就是以两倍的速度在远离。

物理知识科普完成，回到案例中。现在容器是以顺时针在旋转，图片也跟着容器在顺时针旋转，所以图片相对于容器来说是静止的。但是相对于我们的浏览器窗口，图片和容器都是在顺时针旋转。这个时候，如果我们让图片以相同的角速度逆时针旋转，那么，图片相对于容器来说就是以两倍的角速度逆时针旋转，但是相对于我们的浏览器窗口来说，却刚好与容器的角速度相抵，所以是静止的。

div > img {
  width: 300%;
  animation: rotation 10s linear infinite reverse;
}

我们在图片中也调用旋转的动画，然后设置 reverse 值，让其动画反向执行，以达到图片逆时针旋转的效果。

 

至此，我们所需要的效果就已经达到了。

完整源码

还是一样，毫不吝啬的将完整的源代码共享出来。(￣▽￣)"

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转中的视觉差效果 - CSS3</title>
<style type="text/css">
section {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "TL TL TR"
    "BL CE TR"
    "BL BR BR"
  ;
  gap: 10px;
  width: 500px;
  height: 500px;
  margin: auto;
/*  animation: rotation 10s linear infinite;*/
}
div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #696969;
  overflow: hidden;
}
div:nth-child(1) { grid-area: TL; }
div:nth-child(2) { grid-area: TR; }
div:nth-child(3) { grid-area: BL; }
div:nth-child(4) { grid-area: CE; }
div:nth-child(5) { grid-area: BR; }
div > img {
  width: 100%;
/*  animation: rotation 10s linear infinite reverse;*/
}
@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body>
  <section>
    <div><img src="./assets/img/1.jpg"></div>
    <div><img src="./assets/img/2.jpg"></div>
    <div><img src="./assets/img/3.jpg"></div>
    <div><img src="./assets/img/4.jpg"></div>
    <div><img src="./assets/img/5.jpg"></div>
  </section>
</body>
</html>

另外，除了使用 reverse 控制动画反向执行，还可以使用 CSS4 中的变量实现。这里不做展开，附上完整的源代码供大家参考。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转中的视觉差效果 - CSS4</title>
<style type="text/css">
section {
  --deg: 360deg;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "TL TL TR"
    "BL CE TR"
    "BL BR BR"
  ;
  gap: 10px;
  width: 500px;
  height: 500px;
  margin: auto;
  animation: rotation 10s linear infinite;
}
div {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid #696969;
  overflow: hidden;
}
div:nth-child(1) { grid-area: TL; }
div:nth-child(2) { grid-area: TR; }
div:nth-child(3) { grid-area: BL; }
div:nth-child(4) { grid-area: CE; }
div:nth-child(5) { grid-area: BR; }
div > img {
  --deg: -360deg;
  width: 300%;
  animation: rotation 10s linear infinite;
}
@keyframes rotation {
  to {
    transform: rotate(var(--deg));
  }
}
</style>
</head>
<body>
  <section>
  <div><img src="./assets/img/1.jpg"></div>
  <div><img src="./assets/img/2.jpg"></div>
  <div><img src="./assets/img/3.jpg"></div>
  <div><img src="./assets/img/4.jpg"></div>
  <div><img src="./assets/img/5.jpg"></div>
  </section>
</body>
</html>

↓

↓

↓

尽管共享了我男朋友讲的有关 Grid 布局的课程，但是也是几年前的课程了，如今又有了新的思路，我将会梳理完整的知识点后做系列视频课程分享给大家！让我们尽情期待吧！

关注“临界程序员”微信公众号，为您送上更多精彩内容！ 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue 使用 Element UI 组件库

Vue 使用 Element UI 组件库

https://andi.cn/page/621589.html
阅读更多...
RAG介绍

RAG介绍

一&#xff0c;RAG概述 RAG&#xff08;Retrieval-Augmented Generation&#xff0c;检索增强生成&#xff09;是一种结合了信息检索与生成任务的技术&#xff0c;它通过将外部知识库与大模型的生成能力相结合&#xff0c;提高了生成内容的准确性和丰富性。以下是关于RAG应用的…
阅读更多...
【产品那些事】固件安全-关于OTA升级包分析

【产品那些事】固件安全-关于OTA升级包分析

文章目录 前言什么是OTA？升级包(固件)的类型和架构案例tp-link路由器升级包怎么解包分析？binwalk安装及使用ubi_reader安装及使用unsquashfs安装及使用某车企OTA升级包通用Android OTA解包相关分区第二层解包前言 什么是OTA？ OTA（Over-the-Air）是一种通过无线通信网络（…
阅读更多...
go的Mutex实现原理及演进

go的Mutex实现原理及演进

下面的这个是对于昨天晚上读的几篇关于go中锁的文章知识点的总结 文章目录 1. 引言1.1 并发编程的挑战1.2 Mutex 的角色1.3 Mutex 设计的演进1.4 技术追求的美妙 引言部分详细解释引言部分注意点引言部分流程图 2. Mutex 架构演进2.1 初版 Mutex 设计2.2 性能优化 - 给新人机会…
阅读更多...
【ffmpeg】一篇文章搞定YUV

【ffmpeg】一篇文章搞定YUV

文章目录 前言YUV是什么&#xff1f;YUV的用途YUV采样格式采样格式是什么YUV采样格式有哪些YUV采样格式的区别 YUV与RGBRGB 颜色空间YUV 颜色空间RGB 与 YUV 的比较RGB 转 YUV 公式YUV 转 RGB 公式注意事项 YVU数据计算通用公式4:4:4 采样格式4:2:2 采样格式4:2:0 采样格式实例…
阅读更多...
win10删除鼠标右键选项

win10删除鼠标右键选项

鼠标右键菜单时&#xff0c;发现里面的选项特别多&#xff0c;找一下属性&#xff0c;半天找不到。删除一些不常用的选项&#xff0c;让右键菜单变得干净整洁。 1、按下键盘上的“winR”组合按键&#xff0c;调出“运行”对话框&#xff0c;输入“regedit”命令&#xff0c;点击…
阅读更多...
达梦数据库的系统视图v$rapply_log_task

达梦数据库的系统视图v$rapply_log_task

达梦数据库的系统视图v$rapply_log_task 达梦数据库的V$RAPPLY_LOG_TASK视图是一个动态性能视图&#xff0c;主要用于在备库上查询。该视图需要在备库上查询&#xff08;DMDSC 备库需要在控制节点&#xff08;重演节点&#xff09;上查询&#xff09;&#xff0c;用于查询备库…
阅读更多...
专业PDF编辑工具：Acrobat Pro DC 2024.002.20933绿色版，提升你的工作效率！

专业PDF编辑工具：Acrobat Pro DC 2024.002.20933绿色版，提升你的工作效率！

软件介绍 Adobe Acrobat Pro DC 2024绿色便携版是一款功能强大的PDF编辑和转换软件&#xff0c;由Adobe公司推出。它是Acrobat XI系列的后续产品&#xff0c;提供了全新的用户界面和增强功能。用户可以借助这款软件将纸质文件转换为可编辑的电子文件&#xff0c;便于传输、签署…
阅读更多...
RocketMQ单结点安装/Dashboard安装

RocketMQ单结点安装/Dashboard安装

目录 1.安装NameServer 2.安装Broker 3.使用自带工具测试数据发送 4.使用DashBoard进行查看 5.关闭相关设备 前置条件&#xff1a;两台虚拟机CentOS Linux release 7.5.1804(ps:当然也可以都部署在一台机器上) RocketMq属于天生集群。需要同时启动nameServer和Broker进行…
阅读更多...
STP（802.1D）

STP（802.1D）

802.1D&#xff1a;也成为生成树协议&#xff08;Spanning Tree Protocol&#xff0c;STP&#xff09;&#xff0c;是一种工作在数据链路层的通信协议 作用&#xff1a;防止交换机冗余链路产生的环路&#xff0c;确保以太网中无环路的逻辑拓扑结构&#xff0c;从而避免广播风暴…
阅读更多...
MacBook电脑远程连接Linux系统的服务器方法

MacBook电脑远程连接Linux系统的服务器方法

一、问题简介 Windows 操作系统的电脑可使用Xshell等功能强大的远程连接软件。通过连接软件&#xff0c;用户可以在一台电脑上访问并控制另一台远程计算机。这对于远程技术支持、远程办公等场景非常有用。但是MacBook电脑的macOS无法使用Xshell。 在Mac上远程连接到Windows服…
阅读更多...
昇思25天学习打卡营第18天 | 基于MindSpore的GPT2文本摘要

昇思25天学习打卡营第18天 | 基于MindSpore的GPT2文本摘要

昇思25天学习打卡营第18天 | 基于MindSpore的GPT2文本摘要 文章目录 昇思25天学习打卡营第18天 | 基于MindSpore的GPT2文本摘要数据集创建数据集数据预处理Tokenizer 模型构建构建GPT2ForSummarization模型动态学习率 模型训练模型推理总结打卡 数据集 实验使用nlpcc2017摘要数…
阅读更多...
详解MLOps，从Jupyter开发到生产部署

详解MLOps，从Jupyter开发到生产部署

大家好&#xff0c;Jupyter notebook 是机器学习的便捷工具&#xff0c;但在应用部署方面存在局限。为了提升其可扩展性和稳定性&#xff0c;需结合DevOps和MLOps技术。通过自动化的持续集成和持续交付流程&#xff0c;可将AI应用高效部署至HuggingFace平台。 本文将介绍MLOps…
阅读更多...
网安播报|Python 的 GitHub 核心资源库 token 意外曝光，风险巨大

网安播报|Python 的 GitHub 核心资源库 token 意外曝光，风险巨大

1、Python 的 GitHub 核心资源库 token 意外曝光&#xff0c;风险巨大 网络安全专家发现了意外泄露的 GitHub token&#xff0c;能以最高权限访问 Python 语言、Python 软件包索引&#xff08;PyPI&#xff09;和 Python 软件基金会&#xff08;PSF&#xff09;存储库。如果该 …
阅读更多...
如何确保微型导轨电能表的精准计量？

如何确保微型导轨电能表的精准计量？

微型导轨电能表是一种小型化的电表&#xff0c;通常用于精密仪器和设备中。采用模数化设计&#xff0c;精确度高&#xff0c;具有体积小&#xff0c;易安装&#xff0c;易组装等优点。易于实现终端照明电能计量&#xff0c;便于照明系统加装电度表的改造。 对于用户来说&#x…
阅读更多...
2024北京国际智能工厂及自动化展览会亮点前瞻

2024北京国际智能工厂及自动化展览会亮点前瞻

随着“工业创新&#xff0c;智造未来”的浪潮席卷而来&#xff0c;2024年度北京国际智能工厂及自动化与工业装配展览会定于8月1日至3日在中国国际展览中心&#xff08;顺义新馆&#xff09;盛大开幕。本次展会汇聚了智能制造与自动化技术的最新成果&#xff0c;通过三展联动的创…
阅读更多...
ozon计算器5.0版本，ozon计算器5.0定价产品价格

ozon计算器5.0版本，ozon计算器5.0定价产品价格

在跨境电商的浩瀚星海中&#xff0c;俄罗斯Ozon电商平台以其庞大的市场规模和快速增长的势头&#xff0c;成为了众多卖家竞相布局的蓝海。然而&#xff0c;在这片充满机遇的土地上&#xff0c;如何精准定价&#xff0c;确保利润最大化&#xff0c;同时又能吸引消费者&#xff0…
阅读更多...
【Git分支管理】分支策略 | Bug分支

【Git分支管理】分支策略 | Bug分支

目录 1.分支策略 2.特殊场景-Bug分支 2.1 master出现bug ​2.2 dev2正在开发☞stash区域 2.3 dev2正在开发master出现bug 2.3.1 fix_bug修复bug和master合并 2.3.2 dev2分支开发完和master合并 合并冲突&#xff1a;merge☞手动解决☞提交没有合并冲突&#xff1a;mer…
阅读更多...
基于Go语言快速开发抖音小程序 提高性能、效率和降低成本开发框架 让开发变得极简单 开箱即用省时又省钱

基于Go语言快速开发抖音小程序 提高性能、效率和降低成本开发框架 让开发变得极简单 开箱即用省时又省钱

前言 用Go语言Arco Design集成后台框架&#xff0c;我们把日常开发常用的基础开发成基础包&#xff0c;等到有项目时安装、下载基础代码就可以马上开发业务&#xff0c;您可以快速搭建好抖音小程序应用开发&#xff0c;为大家搭建抖音后台管理、抖音原生开发模板、小程序登录、…
阅读更多...
大模型-Bert+PET实战

大模型-Bert+PET实战

PET&#xff08;Pattern-Exploiting Training&#xff09; 背景&#xff1a;预训练语言模型&#xff08;比如BERT&#xff09;知识全面&#xff0c;但是没有针对下游任务做针对训练&#xff0c;所以效果一般&#xff0c;所以需要根据任务做微调。 核心思想&#xff1a;根据先…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023