本期我们要使用css3中的box-shadow属性来作画,相信大家也对box-shadow属性并不陌生,它主要用于在元素的框架上添加阴影效果,但是想没想过单纯使用他来完成图像的 绘制 呢?所以,马上我们就用box-shadow属性跟大家一起来绘制一幅像素动画——像素灯泡。【推荐学习:css视频教程】
代码
正文
1.原理
我们要做的是像素画,像素画又是一个个小像素块组合而成。既然要用 box-shadow 实现绘图,那么我们就先讲讲, box-shadow 可以传 哪些 参数可以让他实现一个小像素块吧。
平时我们使用 box-shadow 往往会传入5个参数,分别为x偏移量, y偏移量, 阴影模糊 半 径, 阴影扩散半径, 阴影颜色 ,接下来,我们绘制一个10 X10 像素的矩形投影(注意:这里 width 和 h ei ght 决定了像素画展示的时候一个像素有多大)。
.box{ width: 10px; height: 10px; background-color: red ; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ box-shadow: 10px 10px 10px 10px black; }
可我们绘制像素画意图是取消其阴影,可以使用可选参数 inset ,如果没有指定 inset ,默认阴影在边框外,即阴影向外扩散。 使用 inset 关键字会使得阴影落在 盒子 内部,这样看起来就像是内容被压低了。 此时阴影会在边框之内 (即使是透明边框)、背景之上、内容之下。
接下来,加入用 inset 再来绘制这个矩形看看变化。
.box{ width: 10px; height: 10px; background-color: red; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 | 阴影向内扩散 */ box-shadow: 10px 10px 10px 10px black inset; }
@H_ 360 _59@
这样一个小像素块就出现了,而且把 原来 的 红色 背景给覆盖掉了,但成也 inset 败也 inset ,正因为他可以压住盒子,同时也被盒子的大小所限制,并不能很好的排列好大量的像素块,所以 放弃 了这种做法。
现在我们换个想法,既然不要阴影显示,那么我们索性不要传入跟阴影有关的信息不就完了么,所以,我们接下来只要传入x偏移量, y偏移量 , 阴影颜色也能实现这个小像素块。
.box{ width: 10px; height: 10px; background-color: red; /* x偏移量 | y偏移量 | 阴影颜色 */ box-shadow: 10px 10px black; }
看我们同样也实现了一个小像素块但又会发现另外一个小问题。
.box{ width: 10px; height: 10px; background-color: red; box-shadow: 0px 0px black, 10px 10px black, 20px 20px black, 30px 30px black, 40px 40px black; }
当我们内联时会发现,原点的像素块是盖不住的,因为他 永远 在下层,即便是主块背景变成透明也是不可以的,但是我们可以庆幸因为只有一个点是这样,我们就把主块的点也填充自然不就解决了。
然后,我们不停地连接 box-shadow 绘制出图形,就会发现一幅像素画就完成了。
2.动画
上一步我们绘制出了灯泡的形状,但是我们要那种一闪一闪的效果,在 box-shadow 里中是如何出来的呢?其实最暴力的一种办法是,再画一个发光的效果,格子隔一段时间全部替换掉,来实现发光效果。
但是灯泡代表什么?代表了灵感,我们怎么可以用暴力的 手段 去绘制呢,那样样式脚本的体积是非常大的,需要优雅 一点 。
所以,我在代码中用 scss 抽离出很多东西来,把灯泡一部分一部分去做拆解,如:
$ Size: 10px; $light-color:rgb(75,73,81); $wick-color:rgb(130,129,136); $line-color:rgb(12,12,12); $bottom-color:rgb(153,152,157); $active-bottom-color:rgb(185,182,193); $active-light-color:rgb(241,218, 126 ); $active-wick-color:rgb(255,236,201); $light-bg: -1*$size 1*$size 0 $light-color, 1*$size 1*$size 0 $light-color, // .. . -3*$size 5*$size 0 $light-color; $wick-active: -1*$size 0 0 rgb(248,203,58), // ... 1*$size 7*$size 0 rgb(246,198,65); $wick: -1*$size 0 0 $wick-color, // ... 1*$size 7*$size 0 $wick-color; // ...more
最后,我们只要把拆出来的这几部分重新组合起来,就又变成灯泡了。当然闪烁动画也是同样拼接组合起来。
.light{ width:$size; height:$size; pos IT ion: 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; } @keyfr am es 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{ &am p; :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 绘制一个个的像素点,非常的消耗时间和精力。这里推荐我之前 制作 的一款在线编辑像素画的软件——PX Drag on ,虽然鸽了很久但是目前还是可以完成一些简单像素画绘制的,也可以 导入图片 自动生成像素画,同时可以导出 css 和 scss 代码来抹除很多机械性费时费力的绘制 任务 ,如果想尝试此类展示可以一试,把创意用于构思构图而非机械劳动。
(学习视频分享:web前端)
以上就是聊聊如何用CSS box-shadow创建像素创意动画的详细内容,更多请关注其它相关文章!
总结
以上是 为你收集整理的 聊聊如何用CSS box-shadow创建像素创意动画 全部内容,希望文章能够帮你解决 聊聊如何用CSS box-shadow创建像素创意动画 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于聊聊如何用CSS box-shadow创建像素创意动画的详细内容...