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

金粒摇

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

结构

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

 
1

样式

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

.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;
} 
1
2
3
4
5
6
7
8
9
10

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ijk26ipz-1658297080989)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18972344cb1d42c09edb7c1597dfbb42~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

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

.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
2
3
4
5
6
7
8
9
10
11

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

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

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

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

    50% {
        transform: rotate(70deg);
    }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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);
    }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果

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

总结

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