CSS3動態氣泡背景是現代網頁設計中常見的一個效果,它能夠為頁面增加趣味性和生動性。下面是一個實現這個效果的示例代碼:
/* 定義氣泡的樣式 */ .bubble { position: absolute; /* 絕對定位 */ background-color: #fff; /* 背景顏色 */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 陰影效果 */ border-radius: 50%; /* 圓形 */ animation: float 5s ease-in-out infinite; /* 浮動動畫 */ } /* 定義浮動動畫 */ @keyframes float { from { transform: translateY(0); } 50% { transform: translateY(-20px); } to { transform: translateY(0); } } /* 生成氣泡 */ for (let i = 0; i< 20; i++) { let bubble = document.createElement('div'); bubble.classList.add('bubble'); bubble.style.width = Math.floor(Math.random() * 20 + 10) + 'px'; /* 隨機大小 */ bubble.style.height = bubble.style.width; bubble.style.top = Math.floor(Math.random() * 100) + '%'; /* 隨機位置 */ bubble.style.left = Math.floor(Math.random() * 100) + '%'; document.body.appendChild(bubble); }
上面是一個簡單的實現氣泡背景效果的代碼,其中用到了CSS3的動畫和隨機數生成等技術。通過這種方式生成氣泡,可以使頁面更加有趣和生動,吸引用戶的注意力。
下一篇css3加黑色遮罩