css3 模仿水中泡泡

CSS3可以创建许多漂亮的效果，如今我们来模仿一下水中泡泡的效果

/*创建一个泡泡的div*/.bubble{
    width: 40px;
    height: 40px;
    position: relative;
    background-color: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 #ffffff;
    animation: bubbleUp 1s forwards ease-in-out infinite;
}
/*泡泡动画*/@keyframes bubbleUp {
0% {
    transform: scale(0.8) translate(0, 0);
    opacity: 0;
}
50% {
    transform: scale(1.2) translate(0, -20px);
    opacity: 1;
}
100% {
    transform: scale(0.8) translate(0, -40px);
    opacity: 0;
}
}
    

通过使用border-radius属性让div呈现圆形，使用box-shadow属性来模拟泡泡的阴影效果，使用动画属性来实现泡泡从底部往上升的效果。

接下来，在html代码中创建几个泡泡：

div class="bubble">
    /div>
    div class="bubble">
    /div>
    div class="bubble">
    /div>
    div class="bubble">
    /div>
    div class="bubble">
    /div>
    

最终效果展示如下：

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！