<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Animated Bubbles Background</title><style>/* 全局样式 */body {font-family: Arial, sans-serif;margin: 0;padding: 0;background: linear-gradient(135deg, #0f3443 0%, #34e89e 100%);display: flex;justify-content: center;align-items: center;min-height: 100vh;overflow: hidden;}/* 气泡容器样式 */.bubbles-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}/* 单个气泡样式 */.bubble {position: absolute;border-radius: 50%;background: rgba(255, 255, 255, 0.3);border: 1px solid rgba(255, 255, 255, 0.5);animation: float 8s infinite ease-in-out;backdrop-filter: blur(3px);transition: transform 0.3s ease;}/* 气泡悬停效果 */.bubble:hover {transform: scale(1.2);box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);}/* 标题样式 */h1 {color: white;text-align: center;text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);font-size: clamp(2rem, 5vw, 3.5rem);font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;z-index: 1;}</style></head><body><div class="bubbles-container" id="bubblesContainer"></div><h1>Animated Bubbles</h1><script>// 气泡配置const BUBBLE_COUNT = 7; // 气泡数量const COLORS = ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.4)', 'rgba(255, 255, 255, 0.5)'];// 创建气泡function createBubbles() {const container = document.getElementById('bubblesContainer');for (let i = 0; i < BUBBLE_COUNT; i++) {const bubble = document.createElement('div');bubble.className = 'bubble';// 随机大小const size = Math.random() * 80 + 20; // 20px 到 100pxbubble.style.width = `${size}px`;bubble.style.height = `${size}px`;// 随机位置const left = Math.random() * 100; // 0% 到 100%const top = Math.random() * 100; // 0% 到 100%bubble.style.left = `${left}%`;bubble.style.top = `${top}%`;// 随机颜色const color = COLORS[Math.floor(Math.random() * COLORS.length)];bubble.style.background = color;// 随机动画延迟和持续时间const delay = Math.random() * 5; // 0s 到 5sconst duration = Math.random() * 10 + 10; // 10s 到 20sbubble.style.animationDelay = `${delay}s`;bubble.style.animationDuration = `${duration}s`;// 添加自定义数据属性bubble.dataset.directionX = Math.random() > 0.5 ? 1 : -1; // 水平方向bubble.dataset.directionY = Math.random() > 0.5 ? 1 : -1; // 垂直方向bubble.dataset.speed = Math.random() * 0.5 + 0.1; // 移动速度container.appendChild(bubble);}// 启动气泡动画animateBubbles();}// 气泡随机游动动画function animateBubbles() {const bubbles = document.querySelectorAll('.bubble');const container = document.getElementById('bubblesContainer');const containerRect = container.getBoundingClientRect();function updateBubblePosition(bubble) {const rect = bubble.getBoundingClientRect();let left = parseFloat(bubble.style.left);let top = parseFloat(bubble.style.top);const directionX = parseFloat(bubble.dataset.directionX);const directionY = parseFloat(bubble.dataset.directionY);const speed = parseFloat(bubble.dataset.speed);// 更新位置left += directionX * speed;top += directionY * speed;// 边界检测 - 水平方向if (left < 0 || left + rect.width > containerRect.width) {bubble.dataset.directionX = -directionX; // 反转水平方向}// 边界检测 - 垂直方向if (top < 0 || top + rect.height > containerRect.height) {bubble.dataset.directionY = -directionY; // 反转垂直方向}// 确保气泡不会超出容器left = Math.max(0, Math.min(left, containerRect.width - rect.width));top = Math.max(0, Math.min(top, containerRect.height - rect.height));// 更新样式bubble.style.left = `${left}px`;bubble.style.top = `${top}px`;}// 动画循环function animate() {bubbles.forEach(bubble => updateBubblePosition(bubble));requestAnimationFrame(animate);}animate();}// 页面加载完成后创建气泡window.addEventListener('DOMContentLoaded', createBubbles);// 窗口大小变化时重新计算气泡位置window.addEventListener('resize', () => {const bubbles = document.querySelectorAll('.bubble');bubbles.forEach(bubble => {bubble.style.left = `${parseFloat(bubble.style.left) * window.innerWidth / 100}px`;bubble.style.top = `${parseFloat(bubble.style.top) * window.innerHeight / 100}px`;});});</script></body></html>
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
