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

前言

前段时间在浏览网页的时候看到一个很炫酷的特效,就是通过波纹来产生视觉视差从而吸引用户,留住用户。之后我抱着试试看的心态,找了一些资料,用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。其余两个则分别设置为23

通过使用自定义属性 --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: centercontainer 类添加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

(0)
上一篇 2024年3月18日 下午5:16
下一篇 2024年3月19日 上午10:05

相关推荐

发表评论

登录后才能评论