整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
下是一个使用HTML和CSS实现绽放的烟花的示例代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>绽放的烟花</title>
<style>
.firework {
position: relative;
width: 100px;
height: 100px;
background-color: #ff0000;
border-radius: 50%;
animation: explode 1s ease-in-out infinite;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="firework"></div>
</body>
</html>
```
这段代码创建了一个`div`元素，并将其样式设置为一个圆形的红色烟花。使用CSS的动画效果，通过`@keyframes`定义了一个名为`explode`的动画，使烟花在1秒钟内以缩放的方式产生绽放效果。动画会无限循环播放，直到页面关闭。
你可以将上述代码保存为一个HTML文件，并在浏览器中打开，就能看到绽放的烟花效果了。希望你喜欢！
查 郭一璞 发自 凹非寺
量子位 报道 | 公众号 QbitAI
HTML不是编程语言，但这并不妨碍精通它的大佬玩出花来。
普通的前端，用HTML+CSS制作网页，元素简单，工具丰富。
大佬级前端，用HTML+CSS绘画，全程不用PS、AI这种图形化的图片编辑器，单纯敲一行行代码纯手工绘制。
把代码转换之后，就变成了鲜嫩的水果：
或者画出洛可可风格的古典女性肖像：
还有弗拉芒巴洛克肖像风格的人物画像，充满了中世纪的禁欲感：
现代的也有，比如这位在粉色灯光下的着礼服的妹子：
以及充满者50年代气息的复古风人物海报：
曲线、光影、渐变，每个元素都相当复杂。
而且，创作过程中不用SVG，只用Atom文本编辑器和Chrome开发者工具。
也就是说，画面上的每一条曲线和渐变、每一处高光和阴影、每一根头发和睫毛、每一片蕾丝和褶皱，都是一行行代码从头敲出来的！
如此精细程度和创造力，让学美术的网友感叹“学画画不如写代码”，让学计算机的同学觉得“别人写的这么艺术，一定是我的教科书打开方式不对”。
真·交叉学科大佬。
它们的作者，是湾区前端大神Diana Smith小姐姐，她目前是企业及软件开发商Atlassian的一名资深Web开发。
Diana在专门讨论CSS的网站CSS-Tricks写下了详细的教程。
画出这样一个图形分成几步？
如果不用CSS，一般都是直接嵌入这个特殊的图形。
如果用CSS，那么就从黑色矩形开始，然后在两侧加上上两个
与白色背景颜色匹配的边框半径元素。
先画出一个黑色矩形，然后两边用圆弧遮挡。有了基础形状后，下一步就是给它添上渐变的背景。但是如果用矩形方式填充，得到的效果就是这样的：
Diana的办法是：在保留矩形的同时，加上两个弯曲的div，把凹进去的部分也填充上。
最后完整的代码是这样的：
div{
width: 500px;
height: 350px;
background: #000;
position: relative;
&::after, &::before{
width: 20%;
height: 100%;
position: absolute;
top: 0;
z-index:2;
content: "";
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}
&::after{
border-radius: 100% 0% 0% 100%;
right: 0;
}
&::before{
border-radius: 0 100% 100% 0;
left: 0;
}
}
body{
background: #1e5799;
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%);
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
}你也可以去这个完成查看CSS样式的实际运行效果：
https://codepen.io/jean-jordan/pen/KeKaBw
刚刚我们画的那幅画像不像人的脖子？好的，我们再回到人像画上，Diana绘制人物的脖子也是类似的过程。
在上面这张图里，我们看到了Diana如何逐步改形状，最终得到了油画中人物的脖子。
但是仅仅会画各种几何形状，是无法生成艺术品的，Diana总结了她在绘图中的5个重要CSS属性。
1、边界半径（border-radius）
边界半径是为了让矩形的边角过渡得更自然，对于大多数网页开发者来说，只需一个参数border-radius，可以设定不同的半径数值。
border-radius: 15px 10px 40px 30px / 40px 10px 15px 30px;2、盒子阴影（box-shadow）
对多个盒子阴影进行分层是增加深度的最佳方法之一。框阴影将粘附到html容器的边缘，也会沿着边界半径定义的边缘。
box-shadow: 6px -11px 20px 1px red, -15px -15px 5px -10px blue, inset 5px 5px 35px 10px green;开发者可以指定模糊半径，以及阴影是向内延伸还是向外延伸。
3、变形（transform）
变形的主要方式有：旋转（rotate）、缩放（scale）和倾斜（skew）
transform: rotate(-45deg)
transform: scale(0.7, 1.3)
transform: skew(25deg, 30deg);此外还有透视，让物体产生远小近大的视觉效果，或者是仅仅为画出一个梯形。
transform: perspective(10px) rotateY(5deg);4、线性梯度（linear-gradient）和径向梯度（radial-gradient）
线性梯度用于定义一个方向上的渐变效果，径向梯度用于定义圆和椭圆形的渐变效果
background-image: linear-gradient(0deg, blue, transparent 60%),
radial-gradient(circle at 70% 30%, purple, transparent 40%);5、层叠（overflow）
层叠是一种将大量杂乱元素填充到一个整齐的包中的方法，可以创建一些有趣的形状。在变形那部分的基础上使用hidden参数，可以把边缘遮盖起来。
overflow: hidden;以上5种元素缺一不可，随便少一种都会产生怪异的效果。
不过即使这样，也很有抽象艺术的美感，仿佛在看毕加索的作品。
不过，由于这是一个纯个人艺术创作，Diana小姐姐并不关心浏览器适配性。
因此，这些代码在Chrome里可以完美展现，但如果用其他浏览器打开，可能就会出现不一样的效果。
比如，MAC上的Safari浏览器打开，妹子的眼睛就方了：
肩膀上的高光，变成了一个大圈圈：
胸前的礼服上，也被泼了一道墨：
如果用早期的Chrome打开，会出现惊悚的头身分离的效果：
早期的Opera浏览器，打开之后脸方了：
Windows 7上从IE 6到IE 11，显示出来的都是这个鬼样子：
浓重的线条，甚至有点抽象艺术的感觉。
同样是早期IE，放到Mac上也一样鬼畜，这是IE 5.1.7的效果：
还有人试了试，在Windows 98系统的IE 7浏览器打开，会变成非常像素风的样子：
最恐怖的是三星手机上的夜间模式打开：
连人种都变了啊！
其他的几张画，换个浏览器打开也比较鬼畜。
妹子你bra里的钢圈出来了啊！
拉夫领变得透明而有光泽，领口的蕾丝干脆断掉了，仿佛是逃难时期的肖像画。
最后，如果你在iPhone上装了Chrome，出来的也是Safari的效果，想看完整效果的话，请在安卓手机或者电脑的Chrome上打开。
因此，有不少网友都觉得，这几幅画可以当成浏览器测试项目，一试就能知道内核用的是谁家的。
CSS太难，学不会？不要紧，虽然我们不能把代码变成图片，但是可以把图片变成代码啊。
没错，就是ASCII艺术，早在DOS时期，就有人用命令行界面来显示图片。直到今天已成为一种流行的互联网文化。
用单色字符来画出世界名画已经不算新鲜事。最近又有个码农开发了一个新的项目Primg，让任何一幅画都可以用质数来表示。
比如蒙拉丽莎，就可以用一个3万位的质数二进制方式绘制出来。
作者的GitHub：https://github.com/cyanharlow
作者博客主页：https://diana-adrianne.com/
教程：https://css-tricks.com/solving-lifes-problems-with-css/
用质数生成任意ASCII艺术：https://github.com/geonnave/primg
— 完 —
量子位 QbitAI · 头条号签约作者
关注我们，第一时间获知前沿科技动态
知道吗，那些使用CSS transform属性添加进HTML的元素是可以实现动画效果的。我们可以使用transition属性和@keyframe动画来实现这个效果，但是更炫酷的是，我们可以使用cubic-bezier()这个timing function，给动画添加一些反弹特效，从而让它看上去更好看。
简单来说，CSS中的cubic-bezier()，就是一个用来创建过渡效果的timing function。它可以定义过渡的速度和其他一些指标，它也可以用来创建动画中的反弹特效。
在这篇文章中，我们首先将会创建一个简单的变换动画，然后我们给它添加cubic-bezier()。在读完这篇文章之后，你将会了解如何创建一个同时使用了扇出效果和反弹特效的动画。
动画链接
1 制作扇叶
这个扇出效果是由5个扇叶所组成的。我们需要使用CSS的圆角(border-radius )属性来制作这些扇叶。具体请参看下图：
圆角属性有很多种不同的语法。在这里我们将会使用一种比较复杂的语法：
border-radius: htl htr hbr hbl / vtl vtr vbr vbl;
HTML
<div class="pinStarLeaf"></div>
CSS
.pinStarLeaf { width: 60px; height: 120px; border-radius: 50%/30% 30% 70% 70%; background-color:#B8F0F5;}
2扩大扇叶数量
由于扇出效果需要5个扇叶，因此我们还需要再制作4个扇叶，并且为他们指定不同的颜色。除此之外，我们还需要指定一个绝对定位(absolute positioning)，让5个扇叶在动画结束的时候重叠在一起。
CSS
#pinStarWrapper{ width: 300px; height: 300px; position: relative;}.pinStarLeaf{ width: 60px; height: 120px; position: absolute; border-radius: 50%/30% 30% 70% 70% ; left:0; right:0; top:0; bottom:0; margin: auto; opacity: .5;}.pinStarLeaf:nth-of-type(1){ background-color:#B8F0F5;}.pinStarLeaf:nth-of-type(2){ background-color:#9CF3DC;}.pinStarLeaf:nth-of-type(3){ background-color:#94F3B0;}.pinStarLeaf:nth-of-type(4){ background-color:#D2F8A1;}.pinStarLeaf:nth-of-type(5){ background-color:#F3EDA2;}
3识别用户点击行为，改进美学效果
我们要使用#pinStarCenterChkBox这个识别符来添加一个checkbox，从而捕捉用户的点击行为。当checkbox被选中之后，扇出效果会马上呈现(扇叶开始旋转)。我们还要用#pinStarCenter识别符来添加一个白色的原型，从而提升美学效果。这个原型要放在扇出效果的最中心。
HTML
我们要先放置checkbox，然后是白色的圆和扇叶：
CSS
由于每一个扇叶都要按照不同的角度沿z轴旋转，因此我们要为它们制定好过渡：rotatez();。我们还要给旋转特性应用transition属性。
仔细看看上面的CSS代码，你会发现#pinStarCenterChkBox:checked ~这个识别符，只有在checkbox被勾选之后(也就是用户点击之后)，动画效果才会开始。
4对旋转的中心进行修改
默认情况下，旋转的中心位于旋转元素的中间。但是在我们的效果中，它应该位于所有扇叶的中心点，因此我们需要对其进行移动。我们可以使用CSS的transform-orgin属性来实现这个目的。
为了让旋转特效正常工作，我们要在CSS文件中的.pinStarLeaf选择器中添加下面两条规则：
.pinStarLeaf{ transform-origin: 30px 30px; transition: transform 1s linear;}
截止到目前为止，旋转特效已经做出来了，但是这个动画还没有使用反弹特效。
动画链接
理解ubic-Bezier()的工作方式
现在我们来添加反弹特效，我们需要将现行的timing function替换为cubic-bezier()。
但是首先，为了更好的了解什么是反弹特效，我们先来试着了解一下cubic-bezier()这个timing function的工作方式。
cubic-bezier()的语法是这样的，d和t分别代表了距离(distance)和时间(time)，他们的值通常是0到1之间的数字：
cubic-bezier (t1, d1, t2, d2)
虽然用距离和时间这样的词汇来解释CSS中的cubic-bezier()并不是非常精确，但是这样说的时候我们比较容易理解。
假设存在一个能在6秒内从A点移动到B点的盒子。我们使用下面的cubic-bezier()来实现这次过渡，令t1=0，d1=1。
/* t1 = 0 , d1 = 1, t2 = 0, d2 = 0 */cubic-bezier(0,1,0,0)
这个盒子会几乎立刻从A点移动到中间点，然后用剩下的时间在移动到B点。
动画连接
现在我们令t1=1，d1=0，在来看看过渡的效果。
你会发现在最初的3秒内，盒子几乎不动，之后它几乎直接跳到了中间点，然后再稳步移动到B点。
动画链接
你也许已经发现了，d1控制的是A点到中间点之间的距离，t1控制的是从A点到中间点所用的时间。
现在我们来添加d2和t2.令t1和d1的值都为1，令t2=2，d2=0。盒子会在前三秒内稳步过渡到中间点(因为t1=1，d1=1)，然后立刻跳到B点。
现在我们来移除t2和d2的值。
盒子会在前三秒内稳步过渡到中间点(因为t1=1，d1=1)，然后停止接近3秒的时间，之后立刻跳到B点。
动画链接
也就是说，d2和t2分别控制了盒子从中间点到B点的距离和时间。
5使用Cubic-Bezier()添加反弹特效
在使用反弹特效的时候，最主要的参数就是以距离，也就是d1和d2。当d1的值小于1时，它会让盒子在想B点移动之前时，先退回到A点之前。
当d2的值大于1时，它会让盒子达到B点之后，再超越B点一段距离，然后再最终回到B点静止。我现在将会在代码中直接添加cubic-bezier()的值，这样你们就可以看到最终效果了。
#pinStarCenterChkBox:checked ~ .pinStarLeaf{ transition: transform 1s cubic-bezier(.8,-.5,.2,1.4);}
最终的效果如下，这就是用CSS制作带有反弹特效的扇出效果的方式：
动画链接
为了让大家更好的了解反弹特效，我做了下面这个动画，请仔细观察盒子的移动轨迹：
*请认真填写需求信息，我们会在24小时内与您取得联系。
