（二十五）巧用CSS3之彩色弹珠

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

还记得小时候玩的弹珠吗，挖个洞，画条线，打堡垒等待都是男孩子的乐趣，当然估计玩过这个游戏的都是90左右的朋友了。

弹珠

小时候常见的弹珠都是中间有条花纹的，稀少的是透明弹，今天来画一个彩色的弹珠。

结构

<div class="marbles"></div>
复制代码

样式

主要是用元素的背景色和阴影特性，来完成弹珠的绘制，如下：

.marbles {
    --size: 5rem;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: radial-gradient(circle at 70% 30%, #fff, #f3ce08 10%, #30daef, transparent);
    box-shadow: 0 0 1rem #fff,
        0 0 1rem #fff inset,
        1rem 0 2rem #03a9f4 inset;
}
复制代码

蓝色弹珠请求发射，所以接下来让我们给它一个向下运动的动画吧，如下：

 .marbles {
    animation: _animate 8s linear infinite;
}

@keyframes _animate {

    0% {
        transform: translateY(-10rem);
    }

    15%,
    35%,
    45%,
    51%,
    100% {
        transform: translateY(10rem);
    }

    25% {
        transform: translateY(-5rem);
    }

    40% {
        transform: translateY(0rem);
    }

    48% {
        transform: translateY(5rem);
    }
}
复制代码

效果

当然，这个轨迹是不完美的，有兴趣的朋友可以弄个自由落体的轨迹，感觉这样会更优美一点。彩色弹珠代码及效果详情，如下：

总结

有时会回忆儿时的时光，感觉那时间很苦，但也很有趣，希望每个人都多一份快乐。言归正传，这个弹珠效果看久了，感觉层次并那么清晰，如果你想要个更好的效果，可以改一下弹珠的阴影，把它的内外阴影都调整一下。

在做效果的时候，如果不确定颜色选取，脑海里可以有个大概的思路，然后在控制台里，用颜色盘慢慢调试。

大珠小珠落玉盘，弹珠时光不复返。珍惜当下，做自己喜欢做的事情，如果真的不知道做什么，可以用CSS画个东西，来表达你此刻的心情。