css3按钮泡泡动画

CSS3按钮泡泡动画是一种非常流行的网页动效展示，它可以让按钮在用户交互时增加趣味性、吸引人眼球，提高用户体验效果。

.btn {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    background: #0099ff;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0px 6px 0px #007acc;
    transition: box-shadow 300ms;
}
.btn:hover {
    box-shadow: 0px 8px 0px #007acc;
}
.btn:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 500ms, height 500ms;
}
.btn:hover:before {
    width: 200px;
    height: 200px;
}
.btn:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 500ms, height 500ms, opacity 500ms;
    opacity: 0;
}
.btn:hover:after {
    width: 300px;
    height: 300px;
    opacity: 1;
}
    

代码中，我们定义了一个btn类作为按钮的基本样式，它拥有背景颜色、字体颜色和各种样式属性，包括边框、圆角、阴影等。然后，在.btn:before和.btn:after中定义了按钮的前置和后置动画，包括气泡的初始大小和颜色，以及动画过渡的时间。在.btn:hover和.btn:hover:before和.btn:hover:after中定义了悬浮时，气泡动画的变化效果。

这种按钮泡泡动画具有简单的HTML代码，易于掌握的CSS技巧和强大的视觉效果。它给用户一种有趣、愉悦和创新的视觉感受，大大提高了用户的点击量和与网站的互动程度。

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