先是去找了一张简易画的烟花照片,可以看出主要结构为歪曲的线条结构。
方案一:
弯曲的线条第一反应到的就是“圆角边框”:
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;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;