js+css水底下鼠标跟随产生气泡上升动画效果代码-html代码-BFW代码库

js+css水底下鼠标跟随产生气泡上升动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css水底下鼠标跟随产生气泡上升动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
	height: 100vh;
	margin: 0;
	display: grid;
	place-items: center;
	background: rgb(222, 191, 244);
	background: linear-gradient(
		213deg,
		rgba(222, 191, 244, 1) 0%,
		rgba(255, 178, 178, 1) 50%,
		rgba(255, 215, 158, 1) 100%
	);
}

body {
	margin: 0 auto;
	cursor: pointer;
	background: linear-gradient(#345, rgb(30,31,38));
	height: 100vh;
}
svg {
	height: 400px;
	width: 400px;
	position: absolute;
}
small {
	padding: 20px;
	color: #ddd;
	font-family: monospace;
	text-align: center;
/* 	width: 100%; */
	position: relative;
	user-select: none;
	pointer-events: none;
}
.c {
	animation: 2s up linear 1;
	animation-fill-mode: forwards;
}
@keyframes up {
  from {transform: translate(-50%, -50%);}
  to {transform: translate(-50%, -220%);}
}
</style>

  
</head>

<body translate="no">
  <small>move around</small>
  
      <script >
const randInt = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function bubble(e) {
	let mouseX, mouseY;
	let event = e;
	if (!e) {
		event = window.event;
		mouseX = window.innerWidth/2;
		mouseY = window.innerHeight/2;
	}
	if (event && (event.pageX || event.pageY)) {
		mouseX = event.pageX;
		mouseY = event.pageY;
	}
	else if (event && (event.clientX || event.clientY))    {
		mouseX = event.clientX + document.body.scrollLeft
			+ document.documentElement.scrollLeft;
		mouseY = event.clientY + document.body.scrollTop
			+ document.documentElement.scrollTop;
	}
	let pp = '';
	let fadeOut = randInt(1500,2500);
	for (let i=0; i<randInt(1,2); i++) {
		let x = 50;
		let y = 55;
		let w = randInt(5, 15);
		let h = randInt(2, 10);
		let d1 = `M ${x} ${y} q ${randInt(w/1.1, w/8)} ${h} ${w} 0`;
		let d2 = `M ${x} ${y + randInt(0,h)} q ${randInt(w/10, w/1.1)} -${h} ${w} 0`;
		let rot = randInt(0,360);
		let sw = randInt(50, 100)/200;
		let p = `<g transform="rotate(${randInt(0,360)} 50 50)">.........完整代码请登录后点击上方下载按钮下载查看