手把手教你用纯CSS实现液体球特效-五八三

前言

这次给大家带来的是一个具有视觉效果的液体球特效。液体球特效是一种视觉特效，它可以模拟出液体在球体中运动的效果，让大家感觉到液体在球体内部自由流动、变形、翻滚等动态效果，从而增强画面的视觉冲击力和真实感。

效果预览

纯CSS实现效果

这个效果是通过纯CSS实现的，我们首先定义一个圆形的容器，并给它设计蓝色背景和阴影，相关代码如下。

<div class="loader"></div>

.loader{
    position: relative;
    width: 200px;
    height: 200px;
    background: #2196f3;
    border-radius: 50%;
    box-shadow: inset 0 0 50px #000;
    overflow: hidden;
}

其实不难发现，水波液体肯定是少不了动画效果的。在这里我们为这个圆形的容器创建了一个半透明的圆形元素，它会在其父元素的左上角位置分别向上偏移和向左偏移，并且设置它的宽度和高度是其父元素的两倍。然后在该元素上无限循环地执行一个名为animate的动画，该动画后续会介绍。

.loader::before{
    content: "";

    position: absolute;

    top: -150%;

    left: -50%;

    width: 200%;

    height: 200%;

    border-radius: 40%;

    background: #111;

    opacity: 0.8;
    animation: animate 12s linear infinite;
}

前面使用了伪元素::before，这里我们还需要使用伪元素::after来创建一个圆形的背景，通过设置position: absolute将其定位在父元素的中心位置。然后使用border-radius属性将其变成一个圆形。接下来定义一个名为animate1的动画效果，它的执行时间为 5 秒，匀速运动，并且设置为无限循环执行。这个动画效果的具体实现是通过改变top和left属性来实现的，从而使其在父元素中心位置不断地旋转。同时，使用opacity属性设置透明度，让该效果看起来是半透明的。

.loader::after{
    content: "";

    position: absolute;

    top: -150%;

    left: -50%;

    width: 200%;

    height: 200%;

    border-radius: 40%;

    background: #111;

    opacity: 0.9;
    animation: animate1 5s linear infinite;
}

动画效果

这里是关于animate和animate1动画效果的介绍，相关代码如下。

@keyframes animate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes animate1 {
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
}

这两个动画的效果其实都是一样的，在 0% 关键帧时，元素将被旋转360度，而在 100% 关键帧时，元素将被旋转回原始位置。这样就可以达到元素在页面上旋转的效果。