我⽤js写了⼀个，除⼣烟花秀和春节随机祝福语项⽬截图
进⼊后的界⾯
点击按钮
点击之后的动画
烟花结束后的界⾯
代码实现
涉及的技术：HTML5多媒体，CSS定位，动画，js⾯向对象，Jquery动画、事件
⾸先来看HTML代码
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022</title>
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./css/index.css">
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/index.js"></script>
</head>
<body>
<!--这个是点击按钮的盒⼦，算是烟花筒 -->
<div class="he">
<!--这个是点击按钮，点击以后就开始做⼀些处理 -->
<button id="fire"></button>
</div>
<!--这个是烟花哦-->
<div class="box">
</div>
<!--这个是烟花结束后，出现在上⾯的2022图⽚
<div class="title"></div>
<!--这个就是随机⽣成祝福语的⼤盒⼦啦-->
<div class="greetings">
<!--可以通过这个div来动态的呈现祝福语，默认第⼀个是虎虎⽣威-->
<div class="yu"><span id="blessing">虎虎⽣威</span></div>
<!--这个是点击按钮，点击后停下快闪的祝福语-->
<button id="btn">查看我的祝福</button>
</div>
<audio src="./meiti/chuxi.mp3"></audio>
<audio src="./meiti/yanhua.mp3"></audio>
</body>
</html>
上⾯的html代码结构就是，烟花盒（.he)、点⽕按钮(.fire)、烟花(.box)、显⽰2022虎年logo(.title)、祝福语盒⼦(.greetings)、显⽰祝福的具体容器(.yu 和 .blessing)、暂停快速显⽰的按钮(.btn)、两个⾳频。⼀共10个重要元素。
接着我们再来看看CSS代码
/*清除默认的边距*/
/*清除默认的边距*/
*{
margin: 0;
padding: 0;
}
/*导⼊字体，⽤来设置在祝福语上*/
@font-face{
font-family:'djs';
src:url(../f);
}
/
*设置body超出隐藏，因为后⾯烟花会超出，导致页⾯被撑开*/
body{
/* background: #EF3D04; */
overflow: hidden;
background: #F35708 url(../images/hebj.png)no-repeat center center/100% 100%;
}
/*烟花盒⼦我们让他居于底部居中对齐*/
.he{
position: absolute;
width: 160px;
height: 120px;
background:url(../images/hebj.png)no-repeat center center/100% 100%;
border-radius: 5px 5px 0 0;
bottom: 0;
left: 50%;
transform:translateX(-50%);
z-index: 2;
transition: all 3s;
}
.he button{
position: absolute;
bottom: 20px;
left: 50%;
transform:translateX(-50%);
border: 1px solid #C33830;
box-shadow: 0 0 5px #D7A057, 0 0 2px #D7A057 inset;
border-radius: 5px;
width: 50px;
height: 50px;
background: transparent url(../images/huzhua.png)no-repeat center center/100% 100%;
font-size: 12px;
color: yellow;
font-weight: 700;
}
/*烟花盒⼦，我们也要让他在底部居中对齐，后期我们通过动画，改变top值，实现由下⽽上的发射效果*/
.box{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
jquery在一个元素后追加标签transition: all;
top:calc(100% - 50px);
left: 50%;
transform:translateX(-50%);
}
/*这是烟花绽放⽣成的⼩点，就是哪些五颜六⾊的⼩点，后⾯通过js随机⽣成个数，位置，⼤⼩，因为是随机的所有这个只设置绝对定位，不给定具体的top和lef t值*/
.box span{
.box span{
position: absolute;
display: inline-block;
border-radius: 50%;
}
/*当box到达指定的top值后，我们就可以给box添加这个带动画的样式了，这个动画具体的效果我们写在后⾯*/ .fire{
left: 50%;
transform:translateX(-50%);
animation: suofang 4.5s linear;
}
/*2022虎年logo的样式*/
.title{
position: absolute;
width: 300px;
height: 150px;
background:url(../images/hunian.png)no-repeat center center/100% 100%;
top: 10px;
left: 50%;
transform:translateX(-50%);
transition: all 1s;
display: none;
}
/*祝福语盒⼦的样式，这⾥指的注意的是⾃⾝的⽬标top值，必须加上.title的top值*/
.greetings{
position: absolute;
top: 180px;
width: 260px;
height: 400px;
background: #FFE5C8;
left: 50%;
transform:translateX(-50%);
display: flex;
flex-direction: column;
justify-content: center;
padding: 30px;
box-sizing: border-box;
border-radius: 20px;
overflow: hidden;
opacity: 0;
}
/*这是显⽰句⼦的第⼆层盒⼦，其作⽤是让⽂本垂直排列，居中对齐*/
.yu{
display: flex;
justify-content: center;
align-items: center;
writing-mode: tb;
width: 100%;
height: 85%;
border-radius: 10px;
background:url(../images/zhufu.png)no-repeat center center/100% 100%;
}
/*这就是祝福与显⽰盒⼦的本体啦，这⾥主要设置字体样式*/
#blessing{
font-size: 50px;
font-weight: 800;
color:rgba(0, 0, 0, 0.74);
letter-spacing: 6px;
font-family:'djs';
}
/*暂停按钮*/
#btn{
width: 100%;
height: 15%;
margin-top: 50px;
border-radius: 10px;
border: 1px solid #D7A057;
color: #D7A057;
font-size: 14px;
font-weight: 700;
background:url(../images/btn.png)no-repeat center center/100% 100%;
}
/*动画函数，我在写这个动画函数之前，就猜测，如果⽗元素缩放，
⾥⾯的⼦元素会不会随着⼀起缩放，写出来后，证明我的猜测是正确的*/
@keyframes suofang{
0%{
transform:scale(1);
opacity: 1;
}
50%{
transform:scale(20);
opacity: .5;
}
100%{
transform:scale(100);
opacity: 0;
display: none;
}
}
以上的css代码，可以看到，我使⽤了⼤量的定位。这是因为后⾯的动画都需要基于定位的left和top来实现。好啦结构和样式都有了，我们就来看看js（⾏为）吧
javaScript代码
1、⽣成烟花球和焰⽕

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。