怎么用CSS box-shadow創(chuàng)建像素創(chuàng)意動(dòng)畫

本篇內(nèi)容介紹了“怎么用CSS box-shadow創(chuàng)建像素創(chuàng)意動(dòng)畫”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

代碼

正文

1.原理

我們要做的是像素畫，像素畫又是一個(gè)個(gè)小像素塊組合而成。既然要用 box-shadow實(shí)現(xiàn)繪圖，那么我們就先講講， box-shadow可以傳哪些參數(shù)可以讓他實(shí)現(xiàn)一個(gè)小像素塊吧。

平時(shí)我們使用 box-shadow往往會(huì)傳入5個(gè)參數(shù)，分別為x偏移量， y偏移量， 陰影模糊半徑，  陰影擴(kuò)散半徑， 陰影顏色 ，接下來，我們繪制一個(gè)10x10像素的矩形投影（注意：這里width 和 height 決定了像素畫展示的時(shí)候一個(gè)像素有多大）。

.box{
    width: 10px;
    height: 10px;
    background-color: red;
    /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴(kuò)散半徑 | 陰影顏色 */
    box-shadow: 10px 10px 10px 10px black;
}

可我們繪制像素畫意圖是取消其陰影，可以使用可選參數(shù) inset  ，如果沒有指定 inset，默認(rèn)陰影在邊框外，即陰影向外擴(kuò)散。 使用 inset 關(guān)鍵字會(huì)使得陰影落在盒子內(nèi)部，這樣看起來就像是內(nèi)容被壓低了。 此時(shí)陰影會(huì)在邊框之內(nèi) (即使是透明邊框）、背景之上、內(nèi)容之下。

接下來，加入用 inset  再來繪制這個(gè)矩形看看變化。

.box{
    width: 10px;
    height: 10px;
    background-color: red;
    /* x偏移量 | y偏移量 | 陰影模糊半徑 | 陰影擴(kuò)散半徑 | 陰影顏色 | 陰影向內(nèi)擴(kuò)散 */
    box-shadow: 10px 10px 10px 10px black inset;
}

這樣一個(gè)小像素塊就出現(xiàn)了，而且把原來的紅色背景給覆蓋掉了，但成也 inset 敗也 inset ，正因?yàn)樗梢詨鹤『凶?，同時(shí)也被盒子的大小所限制，并不能很好的排列好大量的像素塊，所以放棄了這種做法。

現(xiàn)在我們換個(gè)想法，既然不要陰影顯示，那么我們索性不要傳入跟陰影有關(guān)的信息不就完了么，所以，我們接下來只要傳入x偏移量， y偏移量 ， 陰影顏色也能實(shí)現(xiàn)這個(gè)小像素塊。

.box{
    width: 10px;
    height: 10px;
    background-color: red;
    /* x偏移量 | y偏移量 | 陰影顏色 */
    box-shadow: 10px 10px black;
}

看我們同樣也實(shí)現(xiàn)了一個(gè)小像素塊但又會(huì)發(fā)現(xiàn)另外一個(gè)小問題。

.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;
}

當(dāng)我們內(nèi)聯(lián)時(shí)會(huì)發(fā)現(xiàn)，原點(diǎn)的像素塊是蓋不住的，因?yàn)樗肋h(yuǎn)在下層，即便是主塊背景變成透明也是不可以的，但是我們可以慶幸因?yàn)橹挥幸粋€(gè)點(diǎn)是這樣，我們就把主塊的點(diǎn)也填充自然不就解決了。

然后，我們不停地連接 box-shadow繪制出圖形，就會(huì)發(fā)現(xiàn)一幅像素畫就完成了。

2.動(dòng)畫

上一步我們繪制出了燈泡的形狀，但是我們要那種一閃一閃的效果，在 box-shadow 里中是如何出來的呢？其實(shí)最暴力的一種辦法是，再畫一個(gè)發(fā)光的效果，格子隔一段時(shí)間全部替換掉，來實(shí)現(xiàn)發(fā)光效果。

但是燈泡代表什么？代表了靈感，我們怎么可以用暴力的手段去繪制呢，那樣樣式腳本的體積是非常大的，需要優(yōu)雅一點(diǎn)。

所以，我在代碼中用 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

最后，我們只要把拆出來的這幾部分重新組合起來，就又變成燈泡了。當(dāng)然閃爍動(dòng)畫也是同樣拼接組合起來。

.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;
  }
}

最后，我們還要加入一個(gè)手動(dòng)點(diǎn)亮的效果也是非常的簡單。就是利用 checkbox 當(dāng)選中時(shí)的 checked 偽類來找到 div.light 觸發(fā)點(diǎn)亮效果，當(dāng)然其樣式依然需要你提前繪制拼接好。

.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創(chuàng)建像素創(chuàng)意動(dòng)畫”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！