周末浏览codepen时发现一个不错的动画交互成果，如上图所示，有一个多个色彩的嵌套圆形追随鼠标挪动，且和文字造成不同的反差色，交互成果给人眼前一亮的感觉，本文将开展阐明其实现过程。

动画成果合成

基于下面的动画效果图能够次要合成为以下几块内容：

  • 有一个三种色彩的嵌套圆形
  • 嵌套圆形追随鼠标挪动
  • 圆形挪动过程中和文字产生反差色成果
  • 圆形挪动过程中随同弹性成果

后面两个性能点实现较为简单，前面两个性能点须要对相干知识点有肯定的理解，实现起来绝对较快，接下来进入代码实现过程。

代码实现

实现三个圆形嵌套就三个div即可，此处款式应用SCSS，写法绝对简洁，应用@each函数循环解决，代码如下：

<div class="shapes">  <div class="shape shape-1"></div>  <div class="shape shape-2"></div>  <div class="shape shape-3"></div></div>

scss

.shapes {  position: relative;  height: 100vh;  width: 100vw;  background: #2128bd;  overflow: hidden;}.shape {  position: absolute;  border-radius: 50%;    $shapes: (#005ffe: 650px, #ffe5e3: 440px, #ffcc57: 270px);    @each $color, $size in $shapes {    &.shape-#{index($shapes, ($color $size))} {      background: $color;      width: $size;      height: $size;      margin: (-$size/2) 0 0 (-$size/2);    }  }}

到此一个简略的多个圆形嵌套的图形就进去了。

而后就是让该图形追随鼠标挪动起来，这里只须要监听鼠标挪动事件即可实现。上面的 cursor 是核心的原点， shape 则是三个圆形。

const cursor = document.querySelector('.cursor')const shape = document.querySelectorAll('.shape')document.body.addEventListener("mousemove", evt => {  const mouseX = evt.clientX;  const mouseY = evt.clientY;  cursor.style = `transform: translate(${mouseX}px, ${mouseY}px);`    shape.forEach(item => {    item.style = `transform: translate(${mouseX}px, ${mouseY}px);`  })})

接下来实现圆形和文字的反差色成果，这里用到了CSS3中的混合模式 mix-blend-mode 中的混合模式 screen，中文翻译为“滤色”，计算公式如下：

公式中的C示意最终混合的RGB色值（范畴是0-255），A和B示意用来混合的两个色彩的RGB色值（范畴也是0-255）。从公式的内容能够看出，滤色混合模式的色彩，是将两个色彩的互补色的像素值相乘，而后除以255的互补色值。

例如有一个红色，其RGB值是(255,0,0)，还有一个蓝色，其RGB值是(0,0,255)，则这两个色彩应用滤色混合模式之后的色彩色值是：

  • R = 255 – (255 – 255) * (255 – 0) / 255 = 255
  • G = 255 – (255 – 0) * (255 – 0) / 255 = 0
  • B = 255 – (255 – 0) * (255 – 255) / 255 = 255

则最终的色值是 RGB(255,0,255)，以下是一些直观的个性：

  • 任何色彩和彩色执行滤色，还是出现原来的色彩；
  • 任何色彩和红色执行滤色失去的是红色；
  • 任何色彩和其余色彩执行滤色模式混合后的色彩会更浅，有点相似漂白的成果。

回到咱们最开始的动画成果，追随鼠标挪动的圆形只会在和文字相交的时候才会呈现，而在其余的区域是不见的，那么咱们将设置文本元素的背景色为红色，因为应用滤色后，任何色彩和红色执行滤色失去的是红色。

.content {  top: 0;  left: 0;  position: absolute;  display: flex;  justify-content: center;  align-items: center;  height: 100vh;  width: 100vw;  background: #fff;  mix-blend-mode: screen;}

此时咱们的根本成果曾经实现了，但此时挪动的圆形绝对比拟僵硬，原成果中应用了gsap动画库，圆形追随鼠标的成果十分晦涩难受。

GreenSock动画平台（GSAP）能够对JavaScript能够操作的所有内容进行动画解决（CSS属性，SVG，React，画布，通用对象等），同时解决了不同浏览器上存在的兼容性问题，而且速度极快（比jQuery 快20倍）。大概有1000万个站点和许多次要品牌都应用 GSAP。

应用gsap后的js代码如下，十分简洁：

document.body.addEventListener("mousemove", evt => {  const mouseX = evt.clientX;  const mouseY = evt.clientY;    gsap.set(".cursor", {    x: mouseX,    y: mouseY  })    gsap.to(".shape", {    x: mouseX,    y: mouseY,    stagger: -0.1  })})

代码在线预览：
https://code.juejin.cn/pen/71...

最初

整体的代码实现就到此结束了，基于此逻辑咱们还能够实现相似的成果，比方批改圆形的背景为渐变色，减少暗影或更换为其余图片成果等，喜爱的连忙本人尝试看看吧。

看到最初如果感觉有用，记得点个赞珍藏起来吧，说不定哪天就用上啦。

专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）

参考

web前端入门到实战：CSS mix-blend-mode滤色screen混合模式

GSAP官网

codepen - carolineartz