橙色气泡（不停的产生气泡，一直向上浮动）

最新推荐文章于 2023-05-28 00:22:59 发布

时光飞逝，岁月依然

最新推荐文章于 2023-05-28 00:22:59 发布

阅读量426

点赞数 1

分类专栏： css js jquery 文章标签： javascript jquery css html

本文链接：https://blog.csdn.net/qq_43260038/article/details/108689789

版权

css 同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

橙色气泡（不停的产生气泡，一直向上浮动）

动态中的静态截图：
在这里插入图片描述

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body {
	background-color: #f98033;
}

.soda {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	perspective: 50vw;
	transform: translateZ(-99999px);
	transform-style: preserve-3d;
}

.bubble {
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-image: radial-gradient(rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 1) 80%);
	transform: translateX(-50%);
	will-change: top, left;
}

.bubble::after {
	content: '';
	position: absolute;
	top: 20%;
	right: 25%;
	width: 33%;
	height: 33%;
	border: 3px solid;
	border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
	border-radius: 50%;
	transform: rotate(45deg);
}
  </style>
 </HEAD>

 <BODY>
  <div class='soda'>
</div>
  <script>
  const
floatOn = (options) => {
		let
		el = options.el,
		x = options.x,
		xIsPos = options.xIsPos || Math.floor(Math.random()),
		updateX = options.updateX || Math.floor(Math.random()),
		curTop = parseInt(el.style.top),
		curLeft = parseInt(el.style.left);
		
		if (curTop > -50) {
			el.style.top = `${--curTop}px`;
		} else {
			el.style.top = `${innerHeight + 50}px`;
		}
	
		if (updateX) {
			if (xIsPos) {
				if (curLeft > x + 10) { 
					xIsPos = false;
				} else {
					el.style.left = `${++curLeft}px`;
				}
			} else {
				if (curLeft < x - 10) {
					xIsPos = true;
				} else {
					el.style.left = `${--curLeft}px`;
				}
			}
		}
	
		updateX = updateX ? false : true;
		
		requestAnimationFrame(floatOn.bind(null, {el: el, x: x, xIsPos: xIsPos, updateX: updateX}));
};

class Bubble {
	constructor (target, i) {
		this.bubble = document.createElement('div');
		this.bubble.classList.add('bubble');
		this.x = Math.floor(Math.random() * innerWidth);
		this.y = Math.floor(Math.random () * innerHeight);
		this.scale = Math.random();
		this.pos = Math.round(Math.random());
		
		this.bubble.style.top = `${this.y}px`;
		this.bubble.style.left = `${this.x}px`;
		this.bubble.style.transform = `translateZ(${this.pos ? '' : '-'}${this.scale.toFixed(2) * 1000}px)`;
		
		setTimeout(() => { target.appendChild(this.bubble); }, i * 50);
		setTimeout(floatOn.bind(null, {el: this.bubble, x: this.x}), i * 50);
	}
}

for (let i = 0; i < 100; i++) {
	new Bubble(document.querySelector('.soda'), i);
}
  </script>
 </BODY>
</HTML>

时光飞逝，岁月依然

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
橙色气泡（不停的产生气泡，一直向上浮动）

橙色气泡（不停的产生气泡，一直向上浮动）动态中的静态截图：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=
复制链接

扫一扫