過年有燃放煙花爆竹禁令那我們用css寫一個仙女棒煙花看看吧

肥晨發表於2022-01-05
CSS

先是去找了一張簡易畫的煙花照片，可以看出主要結構為歪曲的線條結構。

方案一：

彎曲的線條第一反應到的就是“圓角邊框”：

 

 

  width: 200px;
    height: 200px;
    border: rosybrown 100px solid;
    border-radius: 100px;

控制這個圓角大小，就可以獲得不同的曲線。但是，如何隱藏多餘線成了難題。

方案二：

使用徑向漸變完成曲線。

 background-image: radial-gradient(rgba(255, 0, 0, 1), rgba(0, 128, 0, 1), rgba(0, 0, 255, 1));

當兩個相鄰的顏色的漸變半徑相差很小時，較難看出來漸變效果，就幾乎就變成了分隔線：

background-image: radial-gradient(red 50px, green 51px, #a9a9bb 52px);

徑向漸變的內芯，預設是個圓形，但是也可以對其進行設定：

   background: radial-gradient(
      circle at 0 0,
      transparent 150px,
      black 151px,
      transparent 152px
    );

就形成了最簡單的曲線。

方案二明顯優於方案一，就使用徑向漸變來製作：

 

 

部分程式碼

    background: radial-gradient(
        circle at 0 0,
        transparent 147px,
        #fcc593 151px,
        transparent 155px
      ),
      radial-gradient(
        circle at 47px 89px,
        transparent 148px,
        #f9dbd3 151px,
        transparent 154px
      ),
      radial-gradient(
        circle at -10px -50px,
        transparent 146px,
        #b9c76d 151px,
        transparent 154px
      ),
      radial-gradient(
        circle at -15px -80px,
        transparent 148px,
        #66d6f1 151px,
        transparent 153px
      );
    background-size: 100%, 100% 70%, 100% 30%, 100% 70%;
    background-repeat: no-repeat;

 

相關文章