[分享]css3实现气泡上升的效果

随着CSS3的不断发展，我们可以轻松地添加一些有趣的效果到我们的网站中。今天，我们将介绍如何使用CSS3动画实现气泡上升的效果。/定义气泡的样式/ .bubble { width: 20px; hei...

随着CSS3的不断发展，我们可以轻松地添加一些有趣的效果到我们的网站中。今天，我们将介绍如何使用CSS3动画实现气泡上升的效果。

/*定义气泡的样式*/
.bubble {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #F5B6CD;
    position: absolute;
    bottom: -20px;
    left: calc(50% - 10px);
    animation: rise 1s ease-out infinite;
}

/*定义上升的动画*/
@keyframes rise {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
} 

这里我们定义了一个类名为"bubble"的样式，这是我们的气泡标签的基本样式，包括了宽度、高度、边框半径、背景颜色以及定位等属性。

接下来，我们使用CSS3动画来实现气泡上升的效果。我们定义了一个名为"rise"的动画，它有3个关键帧：0%表示动画刚开始时气泡的状态，20%表示气泡出现并开始上升的状态，100%表示气泡飞出界面的状态。我们使用了translateY属性来定义气泡沿y轴移动的距离，使用opacity属性定义气泡的透明度变化。

最后，我们将这个动画应用到了气泡的样式中。我们使用了infinite关键字来让动画一直循环播放。

通过上面的代码，我们可以轻松地实现一个气泡上升的效果。你可以修改样式的参数来呈现出不同的气泡效果。