2024年HTML+CSS+JS 网页版烟花代码
直接跳到末尾 获取完整源码
在线体验地址:https://haiyong.site/tools/yanhua/
HTML代码简要解释:
<div style="height: 0; width: 0; position: absolute; visibility: hidden;">
<svg xmlns="http://www.w3.org/2000/svg">
<!-- SVG符号定义各种图标 -->
</svg>
</div>
隐藏的div
元素,内含SVG符号,用于定义页面中各种图标。
<div class="container">
应用程序的容器。
<div class="loading-init">
<!-- 加载状态信息 -->
</div>
加载屏幕,显示加载状态信息。
<div class="stage-container remove">
烟花显示容器,初始时可能被移除。
<div class="canvas-container">
<canvas id="trails-canvas"></canvas>
<canvas id="main-canvas"></canvas>
</div>
用于烟花动画的两个画布元素。
<div class="controls">
<div class="btn pause-btn">
<!-- 暂停按钮 -->
</div>
<div class="btn sound-btn">
<!-- 声音按钮 -->
</div>
<div class="btn settings-btn">
<!-- 设置按钮 -->
</div>
</div>
控制按钮区域,包括暂停、声音、设置按钮。
<div class="menu hide">
<!-- 定制菜单 -->
</div>
</div>
</div>
<div class="help-modal">
<!-- 帮助信息的弹出式窗口 -->
</div>
</div>
定制菜单和帮助信息的弹窗。
<script src='./js/fscreen.js'></script>
<script src='./js/Stage.js'></script>
<script src='./js/MyMath.js'></script>
<script src="./js/script.js"></script>
引入JavaScript文件,实现烟花显示的功能和动画。
CSS样式简要解释:
* {
position: relative;
box-sizing: border-box;
}
通用选择器,设置所有元素的position
属性为相对定位,box-sizing
为边框盒模型。
html,
body {
height: 100%;
}
设置HTML和body元素的高度为100%。
html {
background-color: #000;
}
设置HTML元素的背景色为黑色。
body {
overflow: hidden;
color: rgba(255, 255, 255, 0.5);
font-family: "Russo One", arial, sans-serif;
line-height: 1.25;
letter-spacing: 0.06em;
}
设置body元素的样式,包括隐藏溢出内容、文字颜色、字体、行高和字母间距。
.hide {
opacity: 0;
visibility: hidden;
}
.remove {
display: none !important;
}
定义两个类,.hide
用于隐藏元素(透明度为0,不可见),.remove
用于完全移除元素(使用!important
以确保覆盖其他样式)。
.blur {
filter: blur(12px);
}
定义一个模糊效果类,应用于元素时会使其模糊。
.container {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
定义一个容器类,使元素垂直和水平居中。
.loading-init {
width: 100%;
align-self: center;
text-align: center;
text-transform: uppercase;
}
.loading-init__header {
font-size: 2.2em;
}
.loading-init__status {
margin-top: 1em;
font-size: 0.8em;
opacity: 0.75;
}
定义加载初始状态的样式,包括整体宽度、居中、文本对齐方式、文本转换为大写、标题字体大小、状态信息的样式。
.stage-container {
overflow: hidden;
box-sizing: initial;
border: 1px solid #222;
margin: -1px;
}
@media (max-width: 840px) {
.stage-container {
border: none;
margin: 0;
}
}
定义烟花显示容器的样式,包括隐藏溢出内容、取消边框盒模型、边框样式、边距样式。在小屏幕上,取消边框和边距。
?? 好书推荐
《Web前端开发实战》
【内容简介】
随着浏览器性能的不断提升,越来越多的应用从C端(客户端)转入了B端(浏览器端),浏览器Web应用开发需求越来越多,逐渐形成了一个围绕浏览器的完整生态。本书通过Web应用开发入门实例,利用HTML5、CSS3系统讲解了Web前端开发中的基础理论知识及项目开发方案。本书共分为13章,内容包括前端开发简介、网页排版实战、表格案例实战、表单案例实战、CSS布局——个人简历制作、个性化的CSS、定位布局、弹性盒子布局、网格布局、响应式布局、移动端布局、长页面布局、响应式布局。
📚 京东购买链接:《Web前端开发实战》
完整免费源码可通过公众号海拥回复【2024烟花】获取,或者添加下方👇🏻微信💌
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!