共计 2525 个字符，预计需要花费 7 分钟才能阅读完成。
周末浏览 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
