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

一个蛋糕🍰就那么大，你如果吃得多，别人就吃得少；反之，亦然。这个现象就像两国交战，争夺城池以壮大自身，所以今天就做个你争我夺的效果。

你争我夺

肥了自己，瘦了他人。

结构

一个元素作为战场，两个伪元素作为两军，结构如下：

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

样式

首先，我们要把容器也就是战场给规定一个范围，如下：

.container {
    --size: 20rem;
    width: var(--size);
    height: var(--size);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

然后，我们要使用两个军团的大小给画出来，它们遵循一个规律：直径之和等于容器的大小，也就是说当一方增大的，另一方就要减少，如下：

.container::before,
.container::after {
    content: '';
    display: block;
    border-radius: 50%;
}

.container::before {
    background-color: wheat;
    animation: _animate1 4s linear infinite;
}

.container::after {
    background-color: yellow;
    animation: _animate2 4s linear infinite;
}

未绘制完成的时候，可以先把animation取消掉，两个军团的动画效果如下：

@keyframes _animate1{
    0%,100%{
        width: calc(var(--size) * 0.25);
        height: calc(var(--size) * 0.25);
    }
    50%{
        width: calc(var(--size) * 0.75);
        height: calc(var(--size) * 0.75);
    }
}
@keyframes _animate2{
    0%,100%{
        width: calc(var(--size) * 0.75);
        height: calc(var(--size) * 0.75);
    }
    50%{
        width: calc(var(--size) * 0.25);
        height: calc(var(--size) * 0.25);
    }
}

_animate1代表一个军团的动画效果，_animate2代表另一个军团的动画效果，从设置的动画中我们可以看出，当_animate1最大的时候，_animate2最小。

最后，我们给容器加上动画，让它不停的旋转，代表两个军团在不停的交手，再给个颜色变化，代表他们打的很激烈，如下：

.container {
    animation: _animate 4s linear infinite;
}
@keyframes _animate{
    100%{
        transform: rotate(360deg);
        filter: hue-rotate(360deg);
    }
}

效果

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

总结

这效果中，要注意两个伪元素的长度之和是恒定的且要等于容器长度。