2

过年有燃放烟花爆竹禁令那我们用css写一个烟花看看吧

 2 years ago
source link: https://www.cnblogs.com/naitang/p/15766160.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

过年有燃放烟花爆竹禁令那我们用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;

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK