1. 首頁 > 生活百科 > >

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

小知識it知識

最后 ， 我們只要把拆出來的這幾部分重新組合起來 ， 就又變成燈泡了 。 當然閃爍動畫也是同樣拼接組合起來 。
.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; }}

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

文章插圖

最后 ， 我們還要加入一個手動點亮的效果也是非常的簡單 。 就是利用 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; }}
聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

結語現在看繪制的像素畫 ， 我們會發現其實并不難 ， 只是想好要創作出什么畫面 ， 然后機械性的用 box-shadow 繪制一個個的像素點 ， 非常的消耗時間和精力 。 這里推薦我之前制作的一款在線編輯像素畫的軟件——PXDragon ， 雖然鴿了很久但是目前還是可以完成一些簡單像素畫繪制的 ， 也可以導入圖片自動生成像素畫 ， 同時可以導出 css 和 scss 代碼來抹除很多機械性費時費力的繪制任務 ， 如果想嘗試此類展示可以一試 ， 把創意用于構思構圖而非機械勞動 。
聊聊如何用CSS box-shadow創建像素創意動畫

文章插圖

（學習視頻分享：web前端）
以上就是聊聊如何用CSS box-shadow創建像素創意動畫的詳細內容 ， 更多請關注電腦自學網其它相關文章！
【聊聊如何用CSS box-shadow創建像素創意動畫】

推薦閱讀