菜单 搜索
首页 前端知识 11套烟花代码，多种方式实现的烟花代码，基于Html/jQuery/css实现的烟花代码合集，总有一款是你喜欢的

11套烟花代码，多种方式实现的烟花代码，基于Html/jQuery/css实现的烟花代码合集，总有一款是你喜欢的

2024-01-28 12:01:18 前端知识 前端哥 1004 661 我要收藏

基于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套烟花代码，多种方式实现的烟花代码

转载请注明出处或者链接地址：https://www.qianduange.cn//article/679.html
标签
jquery
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

javascript实现SM2加密解密

2024-02-09 20:02:33

Jquery绑定事件的方法

2024-02-09 20:02:28

JQuery实现简单网页

2024-02-09 20:02:26

✿✿✿JavaScript --- jQuery框架一

2024-02-09 20:02:24

jQuery入门教程

2024-02-09 20:02:20

JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法

2024-02-09 20:02:19

Real3D FlipBook jQuery Plugin 3.39 Crack

2024-02-09 20:02:08

python网站创建015：jQuery的各种操作

2024-02-09 20:02:48

jQuery05(插件)

2024-02-09 20:02:41

jQuery 总结

2024-02-09 20:02:40

广告位招租：QQ85750956
大家推荐的文章
1

移动端css布局大全

2024-02-06 15:02:421000
2

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
3

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
4

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
5

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
6

html生日祝福网页制作（粉色主题

2024-01-30 20:01:45997
7

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？

2024-02-06 15:02:59995
8

导航栏以及二级菜单栏（下拉列表）的制作

2024-01-25 11:01:03994
9

玩转H5和CSS3，轻松打造视觉盛宴

2024-02-08 15:02:44993
10

Access-Control-Allow-Origin跨域解决及详细介绍

2024-02-03 12:02:13993

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！