手把手教你实现一个炫酷波纹特效

前言

前段时间在浏览网页的时候看到一个很炫酷的特效，就是通过波纹来产生视觉视差从而吸引用户，留住用户。之后我抱着试试看的心态，找了一些资料，用CSS实现了一个简易的DEMO效果，可以把它称为炫酷波纹效果。话不多说，大家直接看到下面的效果预览。

效果预览

以上就是最终的实现效果了，咱们接下来便一步一步来实现它。

HTML

首先我们看到HTML部分，这里是实现整个效果的基础。相关代码如下。

 <div class="container">
      <div class="box" style="--i: 1"></div>
      <div class="box" style="--i: 2"></div>
      <div class="box" style="--i: 3"></div>
    </div>

创建包含一个父容器（div 元素）和三个具有相同class类名的子盒子元素，如果你想要更多，可以增加div元素的数量。

三个子盒子元素都是<div class="box" style="--i: 1"></div>这样的结构，只不过需要通过内联样式 style="--i: 1"，为该盒子元素设置了一个自定义属性 --i 的值为 1。其余两个则分别设置为2和3。

通过使用自定义属性 --i，可以为每个子盒子元素指定不同的值。这样的使用可以实现对每个盒子元素的个性化样式设置，可以使用CSS变量来根据不同的--i值应用不同的样式。

CSS

HTML基础部分搭建好了，现在就是要给这部分进行装修了，也就是添加CSS样式，这里主要分为两部分，一个是container父元素，一个是box子元素。相关代码如下。

.container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 40px;
  -webkit-box-reflect: below 2px linear-gradient(transparent, #0004);
}

首先是container类的样式。使用经典的三段代码display: flex; justify-content: center; align-items: center为 container 类添加Flex布局，并使其内容水平垂直居中。接着使用gap: 40px来设置子元素之间的间距为40px。这里还是要了reflect的反射效果，从效果上我们能看到，每个盒子下存在一个镜像，这个镜像就是通过reflect实现的反射效果，这么做是使得该特效更加饱满。

.box {
  position: relative;
  width: 200px;
  height: 200px;
  background: linear-gradient(
      45deg,
      skyblue 10%,
      transparent 10%,
      transparent 50%,
      skyblue 50%,
      skyblue 60%,
      transparent 60%,
      transparent 100%
    ),
    linear-gradient(
      135deg,
      blue 10%,
      transparent 10%,
      transparent 50%,
      blue 50%,
      blue 60%,
      transparent 60%,
      transparent 100%
    );
  background-size: 40px 40px;
  filter: hue-rotate(calc(var(--i) * 90deg));
  transform: rotate(calc(var(--i) * 90deg));
  animation: animate 1s linear infinite;
}

然后是box类的样式。首先设置盒子的大小为200px * 200px，并设置为相对定位。然后通过background属性配合一大串的linear-gradient里的相关数据定义了盒子的一个背景渐变效果。接着使用filter: hue-rotate(calc(var(--i) * 90deg))通过hue-rotate滤镜根据--i自定义属性的值来对颜色进行旋转，并且使用rotate变换根据 --i 自定义属性值进行盒子的旋转。最后在每个box中应用了名为 animate 的动画，1秒的持续时间，线性变化，无限循环。这是实现最终效果的关键一步。

@keyframes animate {
  0% {
    background-position: 40px;
  }
  100% {
    background-position: 0px;
  }
}

接着是box类中的@keyframes animate关键帧动画。定义了一个名为 animate 的动画，使背景颜色根据动画从 0% 到 100% 的过程进行移动。在 0% 处，背景位置为 40px；在 100% 处，背景位置为 0px。这样，一个旋转动画效果就实现了。

最后就是一些通用样式了。比如* 选择器：将所有元素的内边距（padding）和外边距（margin）设为0，并将 box-sizing 属性设置为 border-box，以确保元素的尺寸计算包括边框和内边距。还有body元素样式。设置 body 元素的最小高度为视窗的100%，背景颜色为黑色等等。

综上所述，通过数十行CSS代码实现一个页面布局和旋转动画效果，其中内容在页面中央居中显示，而具有 .box 类的元素会显示出旋转动画效果和背景渐变效果。

总结

以上就是整个效果的实现过程了，代码简单易懂，另外，感兴趣的小伙伴们还可以在现有基础上发散思维，比如增加点其他效果等等。关于该效果如果大家有更好的想法欢迎在评论区分享，互相学习。最后，完整代码在码上掘金里可以查看，如果有什么问题大家在评论区里讨论~

原文链接：https://juejin.cn/post/7347668702038671414 作者：一条会coding的Shark