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

今天看到一个元宝的图案，突然想到一个画面，一粒金粒在一个类似元宝的容器里摇来摇去，这样来的话，它不仅仅是一个创意动画，还可以当成一个loading效果。

金粒摇

金粒摇，金粒摇，摇摇晃晃就不倒。

结构

别看物体挺多，但是我们只需要一个dom就好了，如下：

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

样式

首先，我们先把盛放金粒容器的样式给写出来，如下：

.container {
    --size: 5rem;
    width: var(--size);
    height: var(--size);
    box-sizing: border-box;
    border: calc(var(--size) * 0.025) solid #4caf50;
    border-right-width: calc(var(--size) * 0.25);
    border-bottom-width: calc(var(--size) * 0.25);
    border-radius: 50% 0;
}

这里需要注意一下border-radius的值，它表示图形的对角发生了圆角变化，如下：

然后，我们需要把金粒的样式写出来，金粒嘛，当然要闪闪发光的，所以用到了阴影的效果，如下：

.container::before {
    content: '';
    width: calc(var(--size) * 0.1);
    height: calc(var(--size) * 0.1);
    border-radius: 50%;
    background: gold;
    box-shadow: 0 0 calc(var(--size) * 0.1) gold,
        0 0 calc(var(--size) * 0.2) gold,
        0 0 calc(var(--size) * 0.3) gold;
    position: absolute;
}

最后，我们要给金粒容器、金粒加上动画，如下：

1. 金粒容器的动画没什么，只需要在一定角度范围内晃动就可以了

@keyframes _rotate {
    0%,
    100% {
        transform: rotate(20deg);
    }

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

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

2. 金粒的动画我们需要注意一下，要计算好它的运动轨迹，还要注意弧角的过度

@keyframes _move {
    0%,
    100% {
        left: 0;
        bottom: 0;
    }

    24%,
    75% {
        left: calc(var(--size) * 0.525);
        bottom: 0;
    }

    25%,
    74% {
        left: calc(var(--size) * 0.625);
        bottom: calc(var(--size) * 0.1);
    }

    50% {
        left: calc(var(--size) * 0.625);
        bottom: calc(var(--size) * 0.625);
    }
}

效果

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

总结

这个效果我们需要注意两点：一是对角给圆角效果，二是金粒的运动轨迹。