过年有燃放烟花爆竹禁令那我们用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;
过年有燃放烟花爆竹禁令那我们用css写一个仙女棒烟花看看吧的更多相关文章
- 过年7天乐,学nodejs 也快乐
自从上次接触nodejs 已经好长时间了,但是年底公司太忙了 ,没时间看, 上次文章在ubuntu上安装nodejs[开启实时web时代] http://www.cnblogs.com/qqlovin ...
- 要过年啦,用canvas做了个烟火效果
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 要过年了,过年想到的就是放烟火啦....于是就用canvas写了个放烟火的效果,鼠标点击也会产生烟火,不过不要产生太多烟火哦,一个烟火散出 ...
- 一生伏首拜阳明------<明朝那些事儿>
一生伏首拜阳明. 王守仁,字伯安,别号阳明. 成化八年(1472),王守仁出生在浙江余姚,大凡成大事者往往出身贫寒,小小年纪就要上山砍柴,下海捞鱼,家里还有几个生病的亲属,每日以泪洗面.这差不多也是惯 ...
- 痞子衡嵌入式:PCM编码与Waveform音频文件(.wav)格式详解
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是PCM编码及Waveform音频文件格式. 嵌入式里有时候也会和音频打交道,比如最近特别火的智能音箱产品,离不开前端的音频信号采集.降噪 ...
- Python读取网页表格数据
学会了从网格爬取数据,就可以告别从网站一页一页复制表格数据的时代了. 说个亲身经历的事: 以前我的本科毕业论文是关于"燃放烟花爆竹和空气质量"之间关系的,就要从环保局官网查资料. ...
- DailyTick 开发实录 —— 开始
2009 年我读了李笑来老师的<把时间当朋友>,知识了柳比歇夫的时间记录法.当时激动坏了,马上动手实践起来.一开始的时候,是用一个小本子,走到哪儿都带着.完成一件事,就记录一下花费的时间. ...
- 【Win 10 应用开发】共享目标(UWP)
在开始吹牛之前,先给大伙伴们拜个年,祝各位身体健康.生活愉快.[码]到功成. ------------------------------------------------------------- ...
- 用CIL写程序:定义一个叫“慕容小匹夫”的类
前文回顾: <用CIL写程序:你好,沃尔德> <用CIL写程序:写个函数做加法> 前言: 今天是乙未羊年的第一天,小匹夫先在这里给各位看官拜个年了.不知道各位看官是否和匹夫一样 ...
- PHP预定义接口之 ArrayAccess
最近这段时间回家过年了,博客也没有更新,感觉少学习了好多东西,也错失了好多的学习机会,就像大家在春节抢红包时常说的一句话:一不留神错过了好几亿.废话少说,这篇博客给大家说说关于PHP预定义接口中常用到 ...
随机推荐
- OC-封装,继承,多态
主要内容概括 标号 主题 内容 一 封装 面向对象三大特性;封装的概念/原因/好处/原则 二 *getter和setter setter / getter方法;注意点 三 自定义代码段 如何自定义代码 ...
- 【Linux】【Basis】用户、组和权限管理
1. 概念: 1.1. 每个使用者都有,用户标识UID和密码:并且有身份(Authentication),授权(Authorization),审计(Audition):组(用户组,用户容器) 1.2. ...
- RPC 框架
RPC 谁能用通俗的语言解释一下什么是 RPC 框架? - 远程过程调用协议RPC(Remote Procedure Call Protocol) RPC就是要像调用本地的函数一样去调远程函数. 推荐 ...
- Jsp/servlet分页五要素
分页5要素: * 1)pageIndex 当前页 * 2)startIndex 从第几条数据开始 * 3)countAll 总条目数 * 4)pageSize 每页大小 * 5)pageCount 总 ...
- input type="file"多图片上传
单个的input type="file"表单也是可以实现多图片上传的 代码如下: <form action="manypic.php" method=&q ...
- set env export区别
set env export区别 set,env和export这三个命令都可以用来显示shell变量,区别[root@localhost root]# aaa=bbb[root@localhost r ...
- DIgSILENT PowerFactory 15.1.7 破解过程
将dll文件复制到安装路径下:
- 如何把整张表格的数据通过form表单的方式传回后台
开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现 ...
- 多线程多进程学习threading,queue线程安全队列,线程间数据状态读取。threading.local() threading.RLock()
http://www.cnblogs.com/alex3714/articles/5230609.html python的多线程是通过上下文切换实现的,只能利用一核CPU,不适合CPU密集操作型任务, ...
- Log4j2 消停了,Logback 开始塌房了?
今天一早,还没起床,拿起手机赫然看到一个头条信息,标题着实让我心理咯噔了一下! 马上起床,直奔官网,看看到底什么问题?塌的有多厉害? 既然是1.2.9版本以下问题,那就直接找到1.2.9版本修复了些啥 ...