https://www.bilibili.com/video...JavaScript和CSS实现鼠标跟随花朵的动画效果。这种效果的灵感来自于一些网站。当鼠标移动时，鼠标箭头周围会出现气泡、红心或水波的漫射图案。这种效果对网页的访问者具有强烈的视觉吸引力。我们可以使用原生HTML、JavaScript和CSS来实现这种效果。思路如下：我们监听mousemove事件，当事件触发时，创建一些div，花朵，心形，泡泡作为div的背景图片。并将它们的位置设置为鼠标指针的位置，然后在几秒钟后使用settimeout将它们删除：document.addEventListener("mousemove",function(e){letbody=document.querySelector("body");=document.createElement("div");让x=e.offsetX;让y=e.offsetY;flower.style.left=x+"px";flower.style.top=y+"px";身体。appendChild(flower);setTimeout(function(){flower.remove();},2000);});为了使花看起来动态和随机，我们为每朵花使用Math.random()花被赋予随机尺寸和随机旋转（Math.random()在实现类似效果时总是很有用）。让大小=Math.random()*80;flower.style.width=20+size+"px";flower.style.height=20+size+"px";letrotation=Math.random()*360;flower.style.transform=`rotate(${rotation}deg)`;以上是JavaScript部分，我们主要使用JS来创建元素和设置初始状态。动画部分可以使用CSS来完成。一共需要实现3个动画效果：花朵创建后淡入，花朵移除前淡出，移动spread旋转淡入淡出通过设置几个节点的不透明度：@keyframesfadeInOut{0%,100%{不透明度:0;}20%,80%{不透明度:1;}}Move扩散和旋转可以用transform实现：@keyframesmove{0%{transform:translate(0)rotate(0deg);}100%{transform:translate(300px)rotate(360deg);}}这两个关键帧设置相同的时间，时间函数是线性的，重复次数设置为infinite:div{animation:fadeInOutc2slinearinfinite;}div:before{animation:move2slinearinfinite;}最后，还有一个值得一提的小效果，就是当两朵花重叠时，上面的花应该在下面的花上投下阴影，这样看起来会更逼真。这种效果可以使用阴影实现。过滤器：阴影（0015pxrgba（0、0、0、0.5））；我希望你喜欢这个效果！最后附上：Demo：https://codesteppe.github.io/...源码：https://github.com/CodeSteppe...
