一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

手把手教你用上SVG来实现裂变的方块

前言

马上就要放假了,不知道还有没有在公司的。我趁着在公司站好最后几天岗的摸鱼时间,学习了几个新的CSS特效,于是把它们整理成文章,这段时间会陆续发出。而这次首先带来的是一个关于裂变方块的效果。

这个裂变方块和普通的方块不一样,由于它加入了SVG,因此会让它看起来更高级一些。

效果预览


以上就是整个效果的预览状态,接下来将带大家实现这个不一样的方块。

HTML

首先我们来看到HTML部分的搭建,我们设定了四个div元素,代表裂变后的四个小方块。

 <div class="cubes">
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
      <div class="cube"></div>
    </div>

每个方块都有一个类名为cubediv元素。这四个方块都是嵌套在一个类名为cubesdiv元素中。总的来说,这里创建了一个简单的方块组合。

CSS && SVG

有了HTML,接下来我们就可以来设计CSS样式了。这里代码会比较多,因此会省略一部分代码和只介绍关键重要的部分,完整代码大家可以前往码上掘金查看。

.cubes {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.cube {
  position: absolute;
  background: skyblue;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  border-radius: 25px;
  animation: cube-left-top-anim cubic-bezier(0.75, 0, 0.175, 1) 4s infinite;
}
@keyframes cube-left-top-anim {
  0% {
    transform: scale(1.1) translate(0, 0);
  }
  33% {
    transform: scale(0.9) translate(-65px, 0);
  }
  62% {
    transform: scale(0.7) translate(-65px, -65px);
  }
  94% {
    transform: scale(1.1) translate(0, 0);
  }
}
.cube:nth-child(2) {
  animation-name: cube-right-top-anim;
}
@keyframes cube-right-top-anim {
  0% {
    transform: scale(1.1) translate(0, 0);
  }
  33% {
    transform: scale(0.9) translate(65px, 0);
  }
  62% {
    transform: scale(0.7) translate(65px, -65px);
  }
  94% {
    transform: scale(1.1) translate(0, 0);
  }
}
34同理
......

我们定义了一个名为cube-left-top-anim的关键帧动画。这个关键帧动画包含了四个关键帧,分别是0%、33%、62%和94%。每个关键帧对应着动画在不同时间点的样式变化。

0% 关键帧,元素的transform属性被设置为scale(1.1) translate(0, 0),这表示元素在原始大小的基础上进行了1.1倍的缩放,并且没有进行任何位移。

33% 关键帧,元素的transform属性被设置为scale(0.9) translate(-65px, 0),这表示元素在原始大小的基础上进行了0.9倍的缩放,并且向左移动了65像素。

62% 关键帧,元素的transform属性被设置为scale(0.7) translate(-65px, -65px),这表示元素在原始大小的基础上进行了0.7倍的缩放,并且向左上方移动了65像素。

94% 关键帧,元素的transform属性被设置为scale(1.1) translate(0, 0),这表示元素在原始大小的基础上进行了1.1倍的缩放,并且没有进行任何位移。

总体来说,这里通过CSS动画实现了四个方块在页面中的不断变换位置和大小的效果。

接下来就是SVG的加入了,通过SVG可以给页面增加了一些动态和视觉上的吸引力。

 <svg>
      <defs>
        <filter id="goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
            result="goo"
          />
          <feBlend in="SourceGraphic" in2="goo" />
        </filter>
      </defs>
    </svg>

这里我们使用了两个滤镜效果:高斯模糊和颜色矩阵。首先,使用feGaussianBlur滤镜将原始图形进行高斯模糊处理,stdDeviation属性定义了模糊的程度。

然后,使用feColorMatrix滤镜对模糊后的图形进行颜色矩阵处理。values属性中的矩阵数值可以调整图像的颜色和亮度。这里的矩阵数值将原始图形的红、绿、蓝通道的值分别乘以1、0、0,0、1、0,0、0、1,0、0、0,最后一行的数值将图形进行了拉伸和偏移。

最后,使用feBlend将原始图形和经过颜色处理后的图形进行混合,得到最终的效果。
另外我们需要记住要在CSS中应用上去,否则看不到效果。

.cubes {
  filter: url(#goo);
 ......
}

这个滤镜效果可以通过将其应用到SVG元素的filter属性上,例如<rect filter="url(#goo)" />,来实现粘性液体的效果,在此之前我也实现过一个关于SVG的黏糊糊效果,感兴趣的朋友可以去我主页看看。

总结

以上就是整个效果的实现过程,代码简单易懂,不仅适合入门学习基础知识,而且还可以了解到SVG方面的内容。关于SVG方面的内容在之前也发过一些相关的文章,欢迎大家去主页搜索阅读。最后,该效果的完整代码在码上掘金里可以查看,如果有什么问题欢迎大家在评论区里讨论~

(PS:这最后几天,都没心思写公司的代码了,只能在公司慢慢地摸鱼了)

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

(0)
上一篇 2024年2月8日 下午4:05
下一篇 2024年2月8日 下午4:17

相关推荐

发表评论

登录后才能评论