CSS3氣泡點擊爆開動畫是一種實現醒目動態效果的方式,本文將介紹如何使用CSS3實現這一效果。
.bubble { width: 40px; height: 40px; background-color: #FF7043; border-radius: 50%; position: relative; animation: pop 0.5s ease-out; } @keyframes pop { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
首先,我們定義一個圓形的氣泡元素,并給它加上一個自定義的類名bubble。然后,我們使用CSS屬性 width 和 height 來設置氣泡的大小,并使用 background-color 屬性設置氣泡的背景顏色。border-radius 屬性用于設置氣泡的圓角,讓其更像一個真正的氣泡。
接下來,我們使用 position:relative 屬性使氣泡的位置可以被設置為相對于其父元素的左上角的位置。我們還通過 animation 屬性向氣泡添加彈出動畫效果。這里我們設置動畫名稱為pop,持續時間為0.5秒,動畫速度緩慢結束。
當動畫開始時,我們使用關鍵幀 @keyframes 規則來描述氣泡的變化。在0%處,我們將氣泡的縮放比例設置為0,不透明度設置為0。在50%處,我們將氣泡的縮放比例設置為1.2,不透明度設置為1,這時氣泡已經有了彈出的效果。最后,在100%處,我們將氣泡的縮放比例設置為1,不透明度再次設置為0,這時氣泡消失。
使用以上代碼,我們就能夠在頁面中實現一個簡單的氣泡動畫效果,當用戶點擊氣泡時,氣泡將會以醒目的方式彈出!
下一篇css3歡迎動畫