likes
comments
collection
share

旋转的视差效果

作者站长头像
站长
· 阅读数 24

我们来看一个非常有意思的视差效果。

旋转的视差效果

实现这个效果的过程可以锻炼很多 CSS 的常见技巧，所以子辰觉得很有必要把它拿出来讲一讲。

话不多说，咱们这就开始

首先是 html：

<body>
  <div class="container">
    <div class="item">
      <img src="./assets/1.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="./assets/2.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="./assets/3.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="./assets/4.jpeg" alt="" />
    </div>
    <div class="item">
      <img src="./assets/5.jpeg" alt="" />
    </div>
  </div>
</body>

结构很简单，就是一个容器里边包含五个子元素，每个子元素里包含一张图片。

接下来我们来分析一下布局：

旋转的视差效果

这种布局我们可以用 grid，将容易分成九宫格，然后让一些子元素跨越多行或者多列，整体的思路就是网格布局。

.container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-top: 100px;
  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';
  /* 设置四周的间隔为 5px */
  gap: 5px;
}
.item {
  overflow: hidden;
  border: 2px solid;
}

旋转的视差效果

现在的效果就是这样的，接了下来我们就要让指定的元素占据指定的区域了：

/* etc... */
.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;
}

旋转的视差效果

现在基本的布局已经没问题了，但是图片的尺寸不对，我们把图片的大小设置一下：

/* etc... */
.item img {
  width: 100%;
  height: 100%;
  /* 保持原有尺寸比例 */
  object-fit: cover;
}

旋转的视差效果

这样就好看多了，接下来就是实现动画了。

首先父元素有一个旋转是吧？我们先搞定父元素：

/* etc... */
.container {
  animation: rotation 10s linear infinite;
}
@keyframes rotation {
  to {
    transform: rotate(360deg);
  }
}

旋转的视差效果

你看现在就旋转起来了，但是父元素旋转之后，它里边的子元素特别是这个图片也跟着旋转了，这不是我们想要的效果，所以我们可以来这么一招。

就是父元素顺时针旋转，图片逆时针选择，这样就相互抵消就看不出图片的旋转了：

/* etc... */
.container {
  --r: 360deg;
  animation: rotation 10s linear infinite;
}
.item img {
  --r: -360deg;
  animation: rotation 10s linear infinite;
}
/* 通过变量来复用动画 */
@keyframes rotation {
  to {
    transform: rotate(var(--r));
  }
}

旋转的视差效果

现在就实现了这样一个效果，这是因为图片旋转了，和容器不匹配了，所以我们要把图片的宽高设置为大于容器对对角线的尺寸，图片放大以后还要让图片居中，这样在旋转的时候就不会露白了：

.container {
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-top: 100px;
  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;
}
.item {
  /* 图片居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border: 2px solid;
}
.item img {
  /* 将图片放大 */
  width: 260%;
  height: 260%;
  object-fit: cover;
}
.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;
}
.container {
  --r: 360deg;
  animation: rotation 10s linear infini
}
.item img {
  --r: -360deg;
  animation: rotation 10s linear infini
}
@keyframes rotation {
  to {
    transform: rotate(var(--r));
  }
}

旋转的视差效果

现在效果就很完美啦！

总结

这就是我们今天要分享的内容，通过这个案例，我们学习了 grid 布局、object-fit 属性、CSS 变量、动画等技巧，希望对大家有所帮助。

本文来源

本文来源自渡一官方公众号:Duing，欢迎关注，获取最新、最全、最深入的技术讲解

感谢你阅读本文，如果你有任何疑问或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！