过年有燃放烟花爆竹禁令那我们用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;

 

 

目录
相关文章
|
7月前
|
JavaScript
JS+CSS3点击粒子烟花动画js特效
JS+CSS3点击粒子烟花动画js特效
51 0
JS+CSS3点击粒子烟花动画js特效
|
7月前
|
前端开发 安全 JavaScript
html+css+js实现的新年烟花
html+css+js实现的新年烟花
75 0
两种过年烟花,你喜欢哪一种(HTML+CSS+JS)
两种过年烟花,你喜欢哪一种(HTML+CSS+JS)
97 0
两种过年烟花,你喜欢哪一种(HTML+CSS+JS)
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
19天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
42 7
|
19天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
29 6
|
19天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
31 5
|
19天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
25 5