（三十九）巧用CSS3之进击的青豆

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

大家小时候有没有玩过丢沙包的游戏呢，丢沙包其中的一个玩法是绕着圈跑，一直跑到最中心位置，在跑出来，今天就来模拟一个类似的场景。

进击的青豆

一个青豆绕着圈跑，一直跑到中心点。

结构

一个元素就完成了，如下：

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

样式

首先，我们要利用背景色径向渐变和重复的特性来画出跑道，跑道有25个点，每次移动一个位置，当然如果你想添加更多的点也是可以的，但是青豆的运动动画也要发生变化，如下：

.container {
    --size: 10rem;
    width: var(--size);
    height: var(--size);
    background: radial-gradient(cyan, transparent 20%);
    --grid:calc(var(--size) * 0.2);
    background-size: var(--grid) var(--grid);
    position: relative;
}

然后，我们要利用伪元素before来画出青豆的效果，跟跑道点的大小是一样的，然后给个稍微大点的径向渐变，如下：

.container::before{
    content: '';
    width: var(--grid);
    height: var(--grid);
    background: radial-gradient(cyan,rgb(9, 81, 129) 40%,transparent 50%);
    position: absolute;
    animation: _animate 8s linear infinite;
}

最后，我们需要给青豆加上动画，青豆的运动轨迹是需要计算的，我们按照移动一次花费总时间的2%来计算，如下：

.container::before{
    animation: _animate 8s linear infinite;
}

@keyframes _animate {
    0% {
        left: 0;
        top: 0;
    }
    8%{
        left:calc(var(--grid) * 4) ;
        top: 0;
    }
    16%{
        left:calc(var(--grid) * 4) ;
        top: calc(var(--grid) * 4) ;
    }
    24%{
        left:0;
        top: calc(var(--grid) * 4) ;
    }
    30%{
        left:0;
        top: calc(var(--grid) * 1) ;
    }
    36%{
        left:calc(var(--grid) * 3);
        top: calc(var(--grid) * 1) ;
    }
    40%{
        left:calc(var(--grid) * 3);
        top: calc(var(--grid) * 3) ;
    }
    44%{
        left:calc(var(--grid) * 1);
        top: calc(var(--grid) * 3) ;
    }
    46%{
        left:calc(var(--grid) * 1);
        top: calc(var(--grid) * 2) ;
    }
    48%{
        left:calc(var(--grid) * 2);
        top: calc(var(--grid) * 2) ;
        box-shadow: none
    }
    50%{
        box-shadow: 0 0 1rem cyan inset;
    }
}

效果

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

总结

我们利用背景色重复的特效可以做成很多有趣的效果，它可以帮我们省去很多其他的操作。