聊聊如何用CSS box-shadow创建像素创意动画( 二 ) _生活百科

最后，我们只要把拆出来的这几部分重新组合起来，就又变成灯泡了。当然闪烁动画也是同样拼接组合起来。
.light{ width:$size; height:$size; position: absolute; left:50%; top:50%; transform: translate(-50%,-$size*2); background-color:$light-color; box-shadow: $line, $wick, $light-bg, $light-bottom; animation:flash 2s linear infinite;}@keyframes flash { 0%,48%,58%,78%,94%,100%{ background-color:$light-color; box-shadow: $line, $wick, $light-bg, $light-bottom; } 50%,80%{ background-color:$active-wick-color; box-shadow: $line-active, $wick-active, $light-bg-active, $light-bottom-active; }}

文章插图

最后，我们还要加入一个手动点亮的效果也是非常的简单。就是利用 checkbox 当选中时的 checked 伪类来找到 div.light 触发点亮效果，当然其样式依然需要你提前绘制拼接好。
.point{ &:checked + .light{ animation:none; background-color:$active-wick-color; box-shadow: $line-active, $wick-active, $light-bg-active, $light-bottom-active, $light-star; }}

文章插图

结语现在看绘制的像素画，我们会发现其实并不难，只是想好要创作出什么画面，然后机械性的用 box-shadow 绘制一个个的像素点，非常的消耗时间和精力。这里推荐我之前制作的一款在线编辑像素画的软件——PXDragon ，虽然鸽了很久但是目前还是可以完成一些简单像素画绘制的，也可以导入图片自动生成像素画，同时可以导出 css 和 scss 代码来抹除很多机械性费时费力的绘制任务，如果想尝试此类展示可以一试，把创意用于构思构图而非机械劳动。