【CSS】旋转中的视差效果

效果

index.html

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

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 搭配使用快速布局

css 复制代码
.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-templategrid-area 属性创建一个具有命名区域的网格布局,并将网格项放置在指定的位置,相同名称将会合并成一个区域。

2. 巧用变量和反向旋转

在源代码动画中使用变量--r,是的顺时针旋转父元素.container和逆时针旋转子元素.item img共用一个rotation 动画。

这里子元素采用与父元素的反向旋转以抵消整体旋转导致子元素内部图片旋转,改善视觉体验。

js 复制代码
.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

相关推荐
景天科技苑4 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星12515 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12522 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00131 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿38 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron
yqcoder1 小时前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架