当前位置: 首页 > Web前端 > HTML

CSS移动光标让文字产生多重对比色效果

时间:2023-03-28 16:33:49 HTML

周末浏览codepen的时候,发现了一个不错的动画交互效果。如上图所示,有一个多种颜色的嵌套圆圈跟随鼠标移动,与文字不同。对比色,交互效果给人眼前一亮的感觉,本文将讲解实现过程。动画效果分解根据上面的动画效果图,主要可以分解成以下几个部分:有一个嵌套的圆,三种颜色。嵌套圆跟随鼠标移动。圆周运动时,在圆周运动过程中与文字有对比色效果。有了弹性效果,前两个功能点的实现比较简单,后两个功能点需要对相关知识点有一定的了解,实现起来比较快,然后进入代码实现流程。代码实现了三个圆可以嵌套三个div。这里的样式使用的是SCSS,写法比较简单。@each函数用于循环处理。代码如下:

scss。形状{位置:相对;高度:100vh;宽度:100vw;背景:#2128bd;溢出:隐藏;}.shape{位置:绝对;边界半径:50%;$shapes:(#005ffe:650px,#ffe5e3:440px,#ffcc57:270px);@each$color,$sizein$shapes{&.shape-#{index($shapes,($color$size))}{背景:$color;宽度:$尺寸;高度:$尺寸;保证金:(-$size/2)00(-$size/2);}}}至此,一个简单的多圈嵌套图形就出来了。然后让图形随着鼠标移动,这里只需要监听鼠标移动事件即可。下方光标为圆心原点,形状为三个圆。constcursor=document.querySelector('.cursor')constshape=document.querySelectorAll('.shape')document.body.addEventListener("mousemove",evt=>{constmouseX=evt.clientX;constmouseY=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中的混合模式画面。中文翻译为“筛选色”,计算公式如下:公式中的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=255G=255–(255–0)*(255–0)/255=0B=255–(255–0)*(255–255)/255=255,那么最终的颜色值为RGB(255,0,255),下面是一些直观的特征:任意颜色和黑色进行滤色,或者呈现原色;任何颜色和白色进行颜色过滤得到白色;任何颜色与其他颜色混合都会变浅,类似于漂白效果。回到我们原来的动画效果,随着鼠标移动的圆圈只有在与文字相交时才会出现,其他区域不会出现。然后我们将文本元素的背景颜色设置为白色,因为使用了颜色过滤后,任何颜色和白色都进行颜色过滤得到白色。.content{顶部:0;左:0;位置:绝对;显示:弹性;证明内容:居中;对齐项目:居中;高度:100vh;宽度:100vw;screen;}这个时候我们的基本效果已经实现了,但是动圈这个时候比较生硬。原版效果使用了gsap动画库,跟随鼠标画圈的效果非常流畅舒服。GreenSockAnimationPlatform(GSAP)可以动画一切JavaScript可以操作的东西(CSS属性、SVG、React、canvas、常用对象等),同时解决不同浏览器的兼容性问题,速度极快(比jQuery快20倍).大约1000万个站点和许多主要品牌使用GSAP。使用gsap后的js代码如下,非常简洁:{x:mouseX,y:mouseY})gsap.to(".shape",{x:mouseX,y:mouseY,stagger:-0.1})})代码在线预览:https://code.juejin.cn/pen/71...最后,整体的代码实现就结束了。基于这个逻辑,我们也可以实现类似的效果,比如将圆形的背景修改为渐变色,添加阴影或者替换成其他的图片效果等等,喜欢的赶紧试试吧。如果最后觉得有用,记得点赞收藏,说不定哪天你会用到。专注前端开发,分享前端相关技术干货,公众号:南城大学前端(ID:nanchengfe)参考web前端入门实战:CSSmix-blend-modefiltercolorscreenmixedmodeGSAP官网codepen-carolineartz