彩色圆点气泡跟随鼠标光标动画特效

效果图如下：
泡泡会根据鼠标的移动在鼠标下方会生成泡泡然后缓缓上升。
可以父子以下代码看一下实际效果。

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);
});

感谢阅读！

彩色圆点气泡跟随鼠标光标动画特效相关推荐

html5动态效果随鼠标动,html5+CSS3心形动画跟随鼠标光标运动特效
html5+CSS3心形动画跟随鼠标光标运动特效代码片段: this.update = function () { var lastPoint = { x: _this.x, y: _this.y ...
html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
html5随鼠标移动动画,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...
html飞机动画,html5 canvas纸飞机跟随鼠标飞行动画
这是一款效果很酷的html5 canvas纸飞机跟随鼠标飞行动画.插件中使用了paper.js来构建场景中的各种元素. HTML html结构只需要一个canvas,并给它一个id triangle- ...
html5给页面添加树叶特效,html5 canvas树叶光标动画特效
特效描述:html5 canvas树叶光标动画特效.html5 canvas虚幻的树叶光标动画. 代码结构 1. 引入JS 2. HTML代码 // Hold mouse down to enter ...
情人节程序员用HTML网页表白【彩色酷炫的空间背景动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
圆点自动跟随鼠标移动
<canvas>绘制思路:在画布上绘制一个圆点,在移动鼠标时用背景图覆盖上一次的图片,然后再在这张背景图上绘制一个原点,利用定时器每隔10ms进行一次刷新<!doctype html ...
HTML5 SVG彩色斑点缓缓落下背景动画js特效
下载地址 HTML5 SVG彩色斑点缓缓落下背景动画特效是一款漂亮唯美的彩色斑点雨落下动画特效. dd:
prototype鼠标指针_html5鼠标点击页面光标圆点动画特效
特效描述:html5 鼠标点击页面光标圆点动画特效.html5圆点动画,光标动画,鼠标点击页面事件. 代码结构 1. 引入JS 2. HTML代码点击任何地方看效果 'use strict'; v ...

彩色圆点气泡跟随鼠标光标动画特效

彩色圆点气泡跟随鼠标光标动画特效

彩色圆点气泡跟随鼠标光标动画特效相关推荐

最新文章

热门文章

彩色圆点气泡跟随 鼠标光标动画特效

彩色圆点气泡跟随 鼠标光标动画特效

彩色圆点气泡跟随 鼠标光标动画特效相关推荐

最新文章

热门文章

彩色圆点气泡跟随鼠标光标动画特效

彩色圆点气泡跟随鼠标光标动画特效

彩色圆点气泡跟随鼠标光标动画特效相关推荐