1. 首頁 > 生活百科 > >

聊聊如何用CSS box-shadow創建像素創意動畫

小知識it知識

利用CSS也能創建像素創意動畫！下面本篇文章給大家介紹一下用CSS box-shadow創建像素創意動畫的方法 ， 有一定的參考價值 ， 有需要的朋友可以參考一下 ， 希望對大家有所幫助 。

聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

本期我們要使用css3中的box-shadow屬性來作畫 ， 相信大家也對box-shadow屬性并不陌生 ， 它主要用于在元素的框架上添加陰影效果 ， 但是想沒想過單純使用他來完成圖像的繪制呢？所以 ， 馬上我們就用box-shadow屬性跟大家一起來繪制一幅像素動畫——像素燈泡 。 【推薦學習：css視頻教程】
代碼https://code.juejin.cn/pen/7085301673580560398
正文1.原理我們要做的是像素畫 ， 像素畫又是一個個小像素塊組合而成 。 既然要用 box-shadow實現繪圖 ， 那么我們就先講講 ， box-shadow可以傳哪些參數可以讓他實現一個小像素塊吧 。
平時我們使用 box-shadow往往會傳入5個參數 ， 分別為x偏移量 ， y偏移量 ， 陰影模糊半徑 ， 陰影擴散半徑 ， 陰影顏色 ， 接下來 ， 我們繪制一個10x10像素的矩形投影（注意：這里width 和 height 決定了像素畫展示的時候一個像素有多大） 。
.box{ width: 10px; height: 10px; background-color: red; /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */ box-shadow: 10px 10px 10px 10px black;}
聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

可我們繪制像素畫意圖是取消其陰影 ， 可以使用可選參數 inset ， 如果沒有指定 inset ， 默認陰影在邊框外 ， 即陰影向外擴散 。
使用 inset 關鍵字會使得陰影落在盒子內部 ， 這樣看起來就像是內容被壓低了 。 此時陰影會在邊框之內 (即使是透明邊框）、背景之上、內容之下 。
接下來 ， 加入用 inset 再來繪制這個矩形看看變化 。
.box{ width: 10px; height: 10px; background-color: red; /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 | 陰影向內擴散 */ box-shadow: 10px 10px 10px 10px black inset;}
聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

這樣一個小像素塊就出現了 ， 而且把原來的紅色背景給覆蓋掉了 ， 但成也 inset 敗也 inset ， 正因為他可以壓住盒子 ， 同時也被盒子的大小所限制 ， 并不能很好的排列好大量的像素塊 ， 所以放棄了這種做法 。
現在我們換個想法 ， 既然不要陰影顯示 ， 那么我們索性不要傳入跟陰影有關的信息不就完了么 ， 所以 ， 我們接下來只要傳入x偏移量 ， y偏移量 ， 陰影顏色也能實現這個小像素塊 。
.box{ width: 10px; height: 10px; background-color: red; /* x偏移量 | y偏移量 | 陰影顏色 */ box-shadow: 10px 10px black;}
聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

看我們同樣也實現了一個小像素塊但又會發現另外一個小問題 。
.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;}
聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

當我們內聯時會發現 ， 原點的像素塊是蓋不住的 ， 因為他永遠在下層 ， 即便是主塊背景變成透明也是不可以的 ， 但是我們可以慶幸因為只有一個點是這樣 ， 我們就把主塊的點也填充自然不就解決了 。
然后 ， 我們不停地連接 box-shadow繪制出圖形 ， 就會發現一幅像素畫就完成了 。
聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

2.動畫上一步我們繪制出了燈泡的形狀 ， 但是我們要那種一閃一閃的效果 ， 在 box-shadow 里中是如何出來的呢？其實最暴力的一種辦法是 ， 再畫一個發光的效果 ， 格子隔一段時間全部替換掉 ， 來實現發光效果 。
聊聊如何用CSS 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

推薦閱讀