css3 水波能量球

CSS3 水波能量球是一个很有趣的特效，它可以通过 CSS3 的 transform 和 animation 属性实现。

.ball {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(45deg, #008cff, #3d5283);
    animation: wave 2s ease-in-out infinite;
}
.ball:before,.ball:after {
    content: ';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(255,255,255,.6), rgba(255,255,255,.1));
    z-index: -1;
    transform: scale(1);
    animation: wave 2s ease-in-out infinite;
}
@keyframes wave {
0% {
    transform: scale(1);
    opacity: 0;
}
50% {
    opacity: 1;
}
100% {
    transform: scale(2.5);
    opacity: 0;
}
}
    

代码中，.ball 是球的样式，利用 border-radius 设定为 50% 实现圆形。通过 background 设定渐变色的样式。利用 animation 属性实现动画，设定 wave 为 2s 的周期，并设置为无限循环。

同时，通过 :before 和 :after 伪元素实现水波的效果。利用 scale 属性设定元素的大小变化，取值为从 1 到 2.5，同时利用 opacity 实现透明度变化。

CSS3 水波能量球可以在网页中加入更多有趣的娱乐元素，让你的网站更加吸引人！

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