基于HTML/CSS/Echarts的会议展览、业务监控、风险预警、数据分析展示等多种展示需求可视化集合
完整代码下载地址：11套烟花代码，多种方式实现的烟花代码
运行效果：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>烟花合集</title>
<style>
body {
background: #000;
}
.header {
width: 1000px;
margin: 0 auto;
}
.header p.p1 {
width: 60px;
height: 60px;
margin: 0 auto;
margin-top: 110px;
}
.header p.p2 {
height: 40px;
margin: 0 auto;
text-align: center;
line-height: 40px;
margin-top: 10px;
font-size: 20px;
color: #fec468;
}
.header p.p3 {
margin: 0 auto;
text-align: center;
line-height: 40px;
font-size: 28px;
color: #bddde6;
}
.contain {
/*width: 1210px;*/
margin: 0 auto;
margin-top: 80px;
height: 400px;
}
.border {
width: 400px;
height: 370px;
background-color: red;
float: left;
margin: 40px;
transform: translate(0%, 0%);
border: 1px solid #0E273D;
/*background: #444;*/
}
.border > div {
position: absolute;
width: 100%;
height: 100%;
transition: .5s;
}
.border:hover > .border-top-bottom {
transform: rotateY(0);
}
.border:hover > .border-left-right {
transform: rotateX(0);
}
.border-top-bottom {
border: 1px solid transparent;
border-top: 1px solid #57daff;
border-bottom: 1px solid #57daff;
transform: rotateY(90deg);
}
.border-left-right {
border: 1px solid transparent;
border-left: 1px solid #57daff;
border-right: 1px solid #57daff;
transform: rotateX(90deg);
}
.border_div {
width: 400px;
height: 370px;
}
.border_div_top {
width: 400px;
height: 300px;
background-color: #fff;
}
.img {
width: 100%;
height: 100%;
}
.border_div_bottom {
width: 400px;
height: 70px;
color: #57daff;
background-color: #0E273D;
line-height: 70px;
text-align: center;
font-weight: 600;
}
</style>
</head>
<body>
<div class="header">
<p class="p2"></p>
<p class="p3">烟花合集</p>
<p class="p2">——by XiongZe 演示</p>
</div>
<div class="contain" style="width:1600px;">
<a href="data/8jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/8.png" />
</div>
<div class="border_div_bottom">HTML5 Canvas庆祝春节过年放烟花动画代码</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/5jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/5.png" />
</div>
<div class="border_div_bottom">HTML5烟花绽放场景动画</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/6jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/6.png" />
</div>
<div class="border_div_bottom">HTML5炫酷喜庆全屏烟花动画特效</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/1jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/1.png" />
</div>
<div class="border_div_bottom">HTML5点击燃放烟花</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/2jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/2.png" />
</div>
<div class="border_div_bottom">HTML5漂亮的3D烟花动画</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/3jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/3.png" />
</div>
<div class="border_div_bottom">HTML5烟花粒子特效</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/7jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/7.png" />
</div>
<div class="border_div_bottom">jQuery随机点名中奖后放烟花动画特效</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/9jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/9.png" />
</div>
<div class="border_div_bottom">css3烟花和霓虹灯文字动画效果</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/10jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/10.png" />
</div>
<div class="border_div_bottom">HTML5 Canvas彩色烟花动画特效</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/11jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/11.png" />
</div>
<div class="border_div_bottom">jQuery+css3实现鼠标点击烟花播放效果</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
<a href="data/4jQuery/index.html" target="_blank">
<div class="border">
<div class="border_div">
<div class="border_div_top">
<img class="img" src="images/4.png" />
</div>
<div class="border_div_bottom">HTML5 Canvas烟花喷泉动画特效</div>
</div>
<div class="border-top-bottom"></div>
<div class="border-left-right"></div>
</div>
</a>
</div>
</body>
</html>
完整代码下载地址：11套烟花代码，多种方式实现的烟花代码
