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

简介: 笔记

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

方案一:

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

20.png

 width: 200px;
    height: 200px;
    border: rosybrown 100px solid;
    border-radius: 100px;

控制这个圆角大小,就可以获得不同的曲线。但是,如何隐藏多余线成了难题。

方案二:

使用径向渐变完成曲线。

21.png

background-image: radial-gradient(rgba(255, 0, 0, 1), rgba(0, 128, 0, 1), rgba(0, 0, 255, 1));

当两个相邻的颜色的渐变半径相差很小时,较难看出来渐变效果,就几乎就变成了分隔线:

23.png

background-image: radial-gradient(red 50px, green 51px, #a9a9bb 52px);

径向渐变的内芯,默认是个圆形,但是也可以对其进行设置:

24.png

 background: radial-gradient(
      circle at 0 0,
      transparent 150px,
      black 151px,
      transparent 152px
    );

就形成了最简单的曲线。

方案二明显优于方案一,就使用径向渐变来制作:

25.png

部分代码

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;

 

 

目录
相关文章
|
1月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
26 0
JS+CSS3点击粒子烟花动画js特效
|
1月前
|
前端开发 安全 JavaScript
html+css+js实现的新年烟花
html+css+js实现的新年烟花
39 0
两种过年烟花,你喜欢哪一种(HTML+CSS+JS)
两种过年烟花,你喜欢哪一种(HTML+CSS+JS)
83 0
两种过年烟花,你喜欢哪一种(HTML+CSS+JS)
|
4天前
|
安全 JavaScript
旋转木马轮播图 html+css+js
旋转木马轮播图 html+css+js
|
4天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
8天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
6天前
|
XML 前端开发 JavaScript
HTML、CSS、JavaScript有什么区别
HTML、CSS、JavaScript有什么区别
|
12天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
32 5
|
16天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
26 2
|
15天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)