效果图如下：
泡泡会根据鼠标的移动在鼠标下方会生成泡泡 然后缓缓上升。
可以父子以下代码看一下实际效果。
1、下面是HTML结构
HTML结构很简单，主要是靠css和一点js去实现
<body>
<div>
光标移动查看
</div>
<!-- <span></span> -->
<script src="script.js" ></script>
</body>2、下面是css代码
* {
margin: 0;
padding: 0;
}
body {
background-color: #55b9f3;
overflow: hidden;
}
div {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 50px;
font-family: "楷体";
}
span {
width: 50px;
height: 50px;
background: #55b9f3;
border-radius: 50%;
position: absolute;
box-shadow: 20px 20px 60px #489dcf, -20px -20px 60px #62d5ff;
animation: blow 4s linear infinite;
-webkit-animation: blow 4s linear infinite;
}
/*这里是定义里一个动画效果*/
@keyframes blow {
0% {
transform: translate(-50%, -50%);
/*这里是定义初始透明度为1*/
opacity: 1;
/*
这里是初始滤镜效果
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。
值为0deg，则图像无变化。若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。
*/
filter: hue-rotate(0deg);
/*这里是浏览器兼容*/
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
100% {
/*
2D转化
这里是从自身向上平移
*/
transform: translate(-50%, -1000%);
/*这里是定义结束时透明度为0*/
opacity: 0;
/*
这里是结束滤镜效果
给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。
值为0deg，则图像无变化。若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。
*/
filter: hue-rotate(720deg);
/*这里是浏览器兼容*/
-webkit-transform: translate(-50%, -1000%);
-moz-transform: translate(-50%, -1000%);
-ms-transform: translate(-50%, -1000%);
-o-transform: translate(-50%, -1000%);
-webkit-filter: hue-rotate(720deg);
}
}3、下面是js的相关代码
/*这里是给整个页面添加了一个鼠标移动的监听事件 e为事件对象*/
document.addEventListener(`mousemove`, function (e) {
/*这里获取元素节点*/
let oBody = document.body;
let oSpan = document.createElement(`span`);
/*浏览器兼容*/
e = e || window.Event;
// let x = e.clientX;
// let y = e.clientY;
/*获取相关参数*/
oSpan.style.left = e.clientX + `px`;
oSpan.style.top = e.clientY + `px`;
/*设定随机数存储在size中*/
let size = Math.random() * 120;
/*给节点赋值参数数值*/
oSpan.style.width = 30 + size + `px`;
oSpan.style.height = 30 + size + `px`;
/*在body中添加span标签*/
oBody.appendChild(oSpan);
/*设置定时器 间隔时间为2000毫秒*/
setTimeout(function () {
/*清除ospan节点*/
oSpan.remove();
}, 2000);
});来源：诚通网盘| 密码：9092| 大小：| 下载次数：33次
-- 展开阅读全文 --
测试[呵呵]