过年有燃放烟花爆竹禁令那我们用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;复制代码OS：原本想搞个仙女棒烟花的，发现怎么都拼不出仙女棒的样子，emo了。。。。。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2022-08-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读