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

·  阅读 2969

PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛

先是去找了一张简易画的烟花照片,发现主要结构为歪曲的线条结构。

方案一:

弯曲的线条第一反应到的就是“圆角边框”:

 

 

    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;
复制代码

OS:原本想搞个仙女棒烟花的,发现怎么都拼不出仙女棒的样子,emo了。。。。。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改