CSS精美氣泡是網頁的常見特效之一,它可以為網站增添生動的效果,使用戶在訪問網站時更加愉悅。實現氣泡的方法有多種,下面我們來了解一種簡單的實現方式。
.bubble-wrapper{ position: relative; margin: 20px auto; width: 300px; height: 260px; background-color: #00BFFF; overflow: hidden; } .bubble{ position: absolute; width: 60px; height: 60px; background-color: #ffffff; border-radius: 50%; box-shadow: 0px 0px 11px -3px rgba(0,0,0,0.75); animation: bubble 5s ease-in-out infinite; transform-origin: center center; } @keyframes bubble { 0% { transform: scale(0.5); opacity: 0.5; } 30% { transform: scale(1); opacity: 1; } 100% { opacity: 0; transform: scale(1.8); } } .bubble-1{ left: 15%; top: 35%; animation-delay: 0s; } .bubble-2{ left: 45%; top: 25%; animation-delay: 1s; } .bubble-3{ right: 20%; top: 15%; animation-delay: 2s; } .bubble-4{ right: 15%; bottom: 20%; animation-delay: 3s; } .bubble-5{ right: 50%; bottom: 5%; animation-delay: 4s; }
以上代碼使用了關鍵幀動畫來實現氣泡的動態效果,并且對不同的氣泡設置不同的位置和延時時間,最終展現出一個美妙的氣泡效果。
總體來看,這種實現方式簡單易懂,適用于需要添加少量氣泡特效的場景。同時,我們也可以根據實際情況對其進行修改,實現更多種類的氣泡效果。
上一篇css精通教程
下一篇mysql 重建從庫