持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

俗话说：“一瓶子不满，半瓶子咣当”，今天我们就来实现一个半瓶咣当水效果。

半瓶咣当水

一个瓶子半瓶水，摇摇晃晃还挺美。

结构

需要一个瓶子和一个水的元素就好，如下：

<div class="container">
    <div class="water"></div>
</div>

样式

首先，我们需要把瓶子给画出来，瓶子由瓶身和瓶口组成。

瓶身

给瓶身一个背景色，还有一个瓶身反光色，瓶身反光色是使用伪元素after来完成的，代码如下：

.container {
    --size: 10rem;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: calc(var(--size) * 0.05) solid transparent;
    background-color: rgba(255, 255, 255, 0.1);
    position: relative;
}

.container::before,
.container::after {
    content: '';
    width: 50%;
    height: 20%;
    border-radius: 50%;
    box-sizing: border-box;
    position: absolute;
    left: 25%;

}

.container::after {
    background-color: rgba(255, 255, 255, 0.1);
    top: 30%;
}

瓶身的效果，如下图所示：

半瓶水

半瓶水是使用伪元素before实现的，里面用到了阴影效果，如下：

.container::before {
    box-shadow: 0 0 1rem rgba(255, 255, 255, 0.1);
    border: calc(var(--size) * 0.05) solid rgba(255, 255, 255, 0.3);
    top: calc(var(--size) * -0.05);
}  

最后，我们需要给瓶子和水加上动画，瓶子的旋转角度区间是 [-30deg，30deg]，水的旋转角度区间是 [-15deg，15deg]，具体代码如下：

@keyframes _animate {

    0%,
    100% {
        transform: rotate(-30deg);
    }

    25%,
    75% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(30deg);
    }
}

@keyframes _animate2 {

    0%,
    100% {
        transform: rotate(15deg);
        filter: hue-rotate(360deg);
    }

    25%,
    75% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-15deg);
        filter: hue-rotate(0deg);

    }
}

效果

效果及其代码详情，如下：

总结

在这个效果中，我们需要注意的是瓶子和水的旋转角度的方向是相反的，另外在旋转的过程中增加了水颜色变换的效果，这样就变成了一个多彩的半瓶咣当水效果。