过年有燃放烟花爆竹禁令那我们用css写一个烟花看看吧
CSS 一个 我们 看看 烟花 禁令 过年
2023-06-13 09:11:07 时间
先是去找了一张简易画的烟花照片,发现主要结构为歪曲的线条结构。
方案一:
弯曲的线条第一反应到的就是“圆角边框”:
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了。。。。。
相关文章
- 使用CSS gradient制作绚丽渐变纹理背景效果
- css 更改所有text,CSS之cssText「建议收藏」
- ESBuild压缩CSS引发的一个兼容性Bug的解决姿势
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- 【CSS教程】简约渐变色登陆布局html+css代码
- Thinking -- CSS从根解决选择前一个兄弟元素
- 「CSS畅想」好友想回忆童年,安排~为她做了一个果宝特攻的换装
- Media Query 在 CSS 中使用的一个具体例子
- CSS 介绍
- CSS-选择器
- css实现梯形详解编程语言
- 器使用Oracle CSS服务器提升业务效率(oracle css服务)
- 一个自动居中的导航条实例与相关问题DIV+CSS
- 用JS实现一个页面多个css样式实现
- 20行代码实现的一个CSS覆盖率测试脚本
- js和css写一个可以自动隐藏的悬浮框