JavaScript、CSS实现鼠标跟随繁花效果
https://www.bilibili.com/vide...
JavaScript and CSS animation showing flowers following the mouse pointer.
这个效果的灵感来自某些网站，当鼠标移动时，鼠标箭头周围出现气泡、红心或水波的扩散图案，这种效果对网页的访问者有很强的视觉吸引力
我们用原生的 HTML，JavaScript 和 CSS 就能实现这种效果
思路如下：
我们监听mousemove事件，当事件触发时，创建一些 div，花朵，红心和气泡作为div的背景图片。并将他们的位置设置为鼠标指针的位置，然后使用settimeout在几秒钟之后将其删除后：
document.addEventListener("mousemove", function (e) {
let body = document.querySelector("body");
let flower = document.createElement("div");
let x = e.offsetX;
let y = e.offsetY;
flower.style.left = x + "px";
flower.style.top = y + "px";
body.appendChild(flower);
setTimeout(function () {
flower.remove();
}, 2000);
});
为了使这些花儿呈现动态和随机的视觉效果，我们使用
Math.random() 为每朵花儿设置了随机尺寸和随机旋转角度（ Math.random() 在实现类似的效果时总是非常有用）。let size = Math.random() * 80;
flower.style.width = 20 + size + "px";
flower.style.height = 20 + size + "px";
let rotation = Math.random() * 360;
flower.style.transform = `rotate(${rotation}deg)`;
以上就是 JavaScript 的部分了, 我们主要用 JS 进行元素的创建和初始状态的设定。
动画效果的部分使用 CSS 就能做到。总共要实现 3 个动画效果：
- 花儿创建之后淡入
- 花儿被移除之前淡出
- 花儿的移动扩散和旋转
opacity实现：@keyframes fadeInOut {
0%,
100% {
opacity: 0;
}
20%,
80% {
opacity: 1;
}
}移动扩散和旋转用
transform 实现即可：@keyframes move {
0% {
transform: translate(0) rotate(0deg);
}
100% {
transform: translate(300px) rotate(360deg);
}
}这两个
keyframes 设置一样的时常、时间函数都用 linear，重复次数都设置为 infinite:div {
animation: fadeInOutc 2s linear infinite;
}div:before {
animation: move 2s linear infinite;
}最后，还有一个小效果值得一提，即当两片花儿重叠的时候，上面的花要在下面的花上投入一个阴影，这样会显得更逼真，这个效果可以用 drop-shadow 实现。
filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.5));
希望大家喜欢这个效果！
最后附上：
Demo：https://codesteppe.github.io/...
【JavaScript、CSS实现鼠标跟随繁花效果】源码：https://github.com/CodeSteppe...
推荐阅读
- 开发、运维、业务都说好的全栈云原生长这样！
- 汽车指南（福特福克斯RS规格、选项和包装）
- KubeVela|KubeVela 1.3 发布（开箱即用的可视化应用交付平台，引入插件生态、权限认证、版本化等企业级新特性）
- 使用nrm管理多个npm registry地址
- 按下高质量发展快捷键！集团一站式解决方案助你摆脱业务杂、乱、难
- 投稿|数字人民币，摸着微信支付、支付宝过河
- 投稿|COACH入驻快手带货、Burberry循环录播，奢侈品直播还有什么新故事？
- Bug管理的一般标准流程
- 图神经网络的攻击防御
- 看财报|2021年营收、净利首次双降，恒瑞医药何时走出艰难时刻？丨看财报