对了旁边的时钟是自定义插件，源码还未完成尽情期待~
CSS部分：
*{
margin:0;
padding:0;
font-family:'微软雅黑',sans-serif; /* 没有衬线 */
box-sizing: border-box;
}
body{
overflow: hidden;
height: 100vh;
}
span{
position: absolute;
width: 10px;
height: 10px;
background: #ff0000;
pointer-events: none;
background: url(img/花.png);
background-size: cover;
transform:translate(-50%,-50%);
border-radius: 50%;
animation: animate 4s linear infinite;
}
@keyframes animate{
0%{
transform:translate(-50%,-50%);
opacity: 1;
}
100%{
transform:translate(-50%,-1000%);
opacity: 0;
}
}
HTML+JS部分：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标炫酷特效</title>
<link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
<script type="text/javascript">
document.addEventListener('mousemove',e=>//方法用于向指定元素添加事件句柄
{
let body=document.querySelector('body')//方法返回文档中匹配指定 CSS 选择器的一个元素。
let bubbles=document.createElement('span')//方法通过指定名称创建一个元素
let x=e.offsetX//设置或获取鼠标指针位置相对于当前窗口的x坐标
let y=e.offsetY//设置或获取鼠标指针位置相对于当前窗口的坐标
bubbles.style.left=20+x+'px'//bubbles气泡插件
bubbles.style.top=20+y+'px'
let size=Math.random()*100
bubbles.style.width=size+'px'
bubbles.style.height=size+'px'
body.appendChild(bubbles)//方法可向节点的子节点列表的末尾添加新的子节点。
setTimeout(()=>
{
bubbles.remove()
},10000)
})
</script>
</body>
</html>
