js+css实现圆形玻璃容器水泡冒泡动画效果代码-html代码-BFW代码库

js+css实现圆形玻璃容器水泡冒泡动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现圆形玻璃容器水泡冒泡动画效果代码

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

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

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

  
  
<style>
:root {
	/* Gold Palette */
	--gold-bright: #faf398;
	--gold-primary: #f9f295;
	--gold-medium: #e0aa3e;
	--gold-dark: #b88a44;
	--gold-deep: #8b6f47;

	/* Paper & Label Colors */
	--paper-base: #f4f1e8;
	--paper-tint: #fdf8f0;
	--paper-shadow: rgba(139, 111, 71, 0.15);
	--paper-edge: rgba(139, 111, 71, 0.25);
	--ink-primary: #2d2419;
	--ink-faded: rgba(45, 36, 25, 0.75);
	--ink-light: rgba(45, 36, 25, 0.6);

	/* Background Colors */
	--bg-dark-primary: #0a0a0a;
	--bg-dark-secondary: #000000;
	--bg-accent: rgba(224, 170, 62, 0.02);

	/* Accent Colors */
	--accent-warm: #d4af37;
	--accent-cool: #4a6741;
	--accent-earth: #8b4513;
	--accent-sage: #9caf88;

	/* Bowl Properties */
	--bowl-size: clamp(180px, 65vw, 420px);
	--bowl-lip-thickness: max(8px, calc(var(--bowl-size) * 0.05));
	--bowl-glass: rgba(255, 255, 255, 0.08);
	--bowl-rim: #444444;

	/* Paper Textures */
	--paper-texture: url("https://www.transparenttextures.com/patterns/old-mathematics.png");
	--paper-overlay: url("https://www.transparenttextures.com/patterns/textured-paper.png");
	--parchment-texture: url("https://www.transparenttextures.com/patterns/vintage-speckles.png");

	/* Shadows & Effects */
	--soft-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	--paper-glow: 0 0 20px rgba(244, 241, 232, 0.1);
	--inner-shadow: inset 0 2px 4px rgba(139, 111, 71, 0.1);

	/* Typography */
	--paper-font: "Segoe Script", "Brush Script MT", cursive;
	--label-font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
	--title-font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem);
}

body {
	background: 
    /* Main atmosphere */ radial-gradient(
			1400px 700px at 50% 25%,
			var(--bg-dark-primary) 0%,
			var(--bg-dark-secondary) 50%,
			#000000 80%
		),
		/* Warm glow from below */
			radial-gradient(
				ellipse 800px 400px at 50% 100%,
				var(--bg-accent) 0%,
				transparent 60%
			),
		/* Cool highlight top right */
			radial-gradient(
				circle at 80% 20%,
				rgba(212, 175, 55, 0.02) 0%,
				transparent 50%
			),
		/* Subtle sage accent */
			radial-gradient(
				circle at 20% 30%,
				rgba(156, 175, 136, 0.008) 0%,
				transparent 40%
			);
	background-attachment: fixed;
	min-height: 100vh;
	margin: 0;
	color-schem.........完整代码请登录后点击上方下载按钮下载查看