為什么今天不做炒土豆絲呢，為什么呢為什么呢為什么呢為什么呢，堅(jiān)持問上一個(gè)時(shí)辰，一般來說，第二天我們的飯桌上就會(huì)出現(xiàn)炒土豆絲。這件事告訴了我們求知欲的重要性，知之才幸福，不知不幸福。
——《華胥引》
目錄
一、前言
二、往期作品回顧
三、作品介紹
四、本期代碼介紹
五、效果顯示?
六、編碼實(shí)現(xiàn)
index.html
style.css?
script.js
?七、獲取源碼
公眾號(hào)獲取源碼?
獲取源碼？私信？關(guān)注？點(diǎn)贊？收藏？
一、前言
????????在我們的 html 學(xué)習(xí)過程中，會(huì)用到并見識(shí)到各種各樣的實(shí)例，以及各種插件，并且有些 web 網(wǎng)頁中的小插件又非常的吸引眼球，提升 web 網(wǎng)頁的層次，顯得非常好看并且非常使用。在本系列中，我將持續(xù)為大家更新有趣且使用的 html 實(shí)例，放在 web 網(wǎng)頁中，凸顯效果。
? ? ? ? 特點(diǎn)一：都是符合學(xué)校或者學(xué)生考試期末作業(yè)的水平，都是最基礎(chǔ)的簡(jiǎn)單的 html 樣例，提升web網(wǎng)頁整理效果，都是 div+css 框架原創(chuàng)代碼寫的，內(nèi)容包括 js / css，也包含?視頻+音樂+flash 等元素的插入…
? ? ? ? 特點(diǎn)二：內(nèi)容包括多種豐富類型，例如：?倒計(jì)時(shí)，404頁面，Blog頂置卡片設(shè)計(jì) (css+js)，To-Do-List設(shè)計(jì) (css+js)，火柴盒動(dòng)畫 (css)，日歷便簽設(shè)計(jì) (css+js)，搜索框設(shè)計(jì) (css+js)，卡片式圖片展示 (css+js)，咖啡選擇 (css+js)……
? ? ?
????????? 可滿足多種需求，歡迎大家下載！
?
二、往期作品回顧
有趣的HTML實(shí)例（一） 倒計(jì)時(shí)_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（二） 404頁面_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（三） 加載頁面動(dòng)畫_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（四） 旋轉(zhuǎn)菜單_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（五） 加載頁面動(dòng)畫Ⅱ（css）_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（六） 卡片翻轉(zhuǎn)時(shí)鐘_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（七） 注冊(cè)登錄界面Ⅱ（css+js）_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（八） 一個(gè)很有趣的動(dòng)態(tài)背景（css+js）_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（九） 文本變形動(dòng)畫（css+js）_Enovo_飛魚的博客-CSDN博客
有趣的HTML實(shí)例（十） 懸停時(shí)有旋轉(zhuǎn)效果的圖標(biāo)_Enovo_飛魚的博客-CSDN博客
三、作品介紹
????????1.作品簡(jiǎn)介?：HTML響應(yīng)式布局網(wǎng)站源碼！兼容 pc 以及移動(dòng)端，內(nèi)涵 js 交互，ui 交互。直接點(diǎn)擊即可查看效果！
????????2.作品編輯：個(gè)人主頁網(wǎng)頁設(shè)計(jì)題材，代碼為 html+css 布局制作，作品下載后可使用任意HTML編輯軟件（例如：DW、HBuilder、Vscode 、Sublime ?所有編輯器均可使用）。
? ? ? ? 3.作品技術(shù)：使用DIV+CSS制作了網(wǎng)頁背景圖、鼠標(biāo)經(jīng)過及選中導(dǎo)航變色效果、下劃線等。
四、本期代碼介紹
一款簡(jiǎn)單的 HTML+?CSS+JS? 煙花特效（css+js）??實(shí)例
1、HTML
2、CSS
3、JS
4、舒適的畫面感
5、煙花特效
6、自定義文字
?可通用多種不同情景，放置點(diǎn)擊圖標(biāo)，進(jìn)行頁面跳轉(zhuǎn)等
五、效果顯示?
?
可使用在多種情景下，提升層次輪廓效果、美化界面、自定義文字的美化——>
根據(jù)需求修改
六、編碼實(shí)現(xiàn)
顯示完整代碼
注意路徑(⊙o⊙)？
o(*￣▽￣*)ブ?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>煙花特效</title>
<link rel="stylesheet" ><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- 文字部分 -->
<canvas></canvas>
<h1>202<span class="pen">3</span> 節(jié)日快樂??</h1>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>style.css?
html, body {
padding: 0px;
margin: 0px;
background: #222;
font-family: 'Karla', sans-serif;
color: #fff;
height: 100%;
overflow: hidden;
}
h1 {
z-index: 1000;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-100%);
font-size: 58px;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
border: 2px solid #fff;
padding: 7.5px 15px;
background: rgba(0, 0, 0, 0.5);
border-radius: 3px;
overflow: hidden;
}
span.pen {
position: relative;
display: inline-block;
animation: drop 0.75s;
}
canvas {
width: 100%;
height: 100%;
}
@keyframes drop {
0% {
transform: translateY(-100px);
opacity: 0;
}
90% {
opacity: 1;
transform: translateY(10px);
}
100% {
transform: translateY(0px);
}
}script.js
var ctx = document.querySelector('canvas').getContext('2d')
ctx.canvas.width = window.innerWidth
ctx.canvas.height = window.innerHeight
var sparks = []
var fireworks = []
var i = 20; while(i--) {
fireworks.push(
new Firework(Math.random()*window.innerWidth, window.innerHeight*Math.random())
)
}
render()
function render() {
setTimeout(render, 1000/60)
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)
for(var firework of fireworks) {
if(firework.dead) continue
firework.move()
firework.draw()
}
for(var spark of sparks) {
if(spark.dead) continue
spark.move()
spark.draw()
}
if(Math.random() < 0.05) {
fireworks.push(new Firework())
}
}
function Spark(x, y, color) {
this.x = x
this.y = y
this.dir = Math.random() * (Math.PI*2)
this.dead = false
this.color = color
this.speed = Math.random() * 3 + 3;
this.walker = new Walker({ radius: 20, speed: 0.25 })
this.gravity = 0.25
this.dur = this.speed / 0.1
this.move = function() {
this.dur--
if(this.dur < 0) this.dead = true
if(this.speed < 0) return
if(this.speed > 0) this.speed -= 0.1
var walk = this.walker.step()
this.x += Math.cos(this.dir + walk) * this.speed
this.y += Math.sin(this.dir + walk) * this.speed
this.y += this.gravity
this.gravity += 0.05
}
this.draw = function() {
drawCircle(this.x, this.y, 3, this.color)
}
}
function Firework(x, y) {
this.xmove = new Walker({radius: 10, speed: 0.5})
this.x = x || Math.random() * ctx.canvas.width
this.y = y || ctx.canvas.height
this.height = Math.random()*ctx.canvas.height/2
this.dead = false
this.color = randomColor()
this.move = function() {
this.x += this.xmove.step()
if(this.y > this.height) this.y -= 1;
else this.burst()
}
this.draw = function() {
drawCircle(this.x, this.y, 1, this.color)
}
this.burst = function() {
this.dead = true
var i = 100; while(i--) sparks.push(new Spark(this.x, this.y, this.color))
}
}
function drawCircle(x, y, radius, color) {
color = color || '#FFF'
ctx.fillStyle = color
ctx.fillRect(x-radius/2, y-radius/2, radius, radius)
}
function randomColor(){
return ['#93c47d','#a4c2f4','#b4a7d6','#c27ba0','#f6b26b', '#ffd966'][Math.floor(Math.random() * 6)];
}
function Walker(options){
this.step = function(){
this.direction = Math.sign(this.target) * this.speed
this.value += this.direction
this.target
? this.target -= this.direction
: (this.value)
? (this.wander)
? this.target = this.newTarget()
: this.target = -this.value
: this.target = this.newTarget()
return this.direction
}
this.newTarget = function() {
return Math.round(Math.random()*(this.radius*2)-this.radius)
}
this.start = 0
this.value = 0
this.radius = options.radius
this.target = this.newTarget()
this.direction = Math.sign(this.target)
this.wander = options.wander
this.speed = options.speed || 1
}?七、獲取源碼
老規(guī)矩，先給朋友們看一下完整文件夾，
正確的文件如下圖 ，復(fù)制源碼的朋友們請(qǐng)注意了?。?！
?
公眾號(hào)獲取源碼?
第一步，通過微信公眾號(hào)下載源碼壓縮包，解壓并打開文件夾，即為上圖樣式（復(fù)制源碼請(qǐng)注意路徑及文件名）
第二步，點(diǎn)擊 html 文件 打開即可查看
2023年第二十一期，希望得到大家的喜歡???
也是新的系列，將會(huì)持續(xù)更新，???
希望大家有好的意見或者建議，歡迎私信
以上就是本篇文章的全部?jī)?nèi)容了
?~ 關(guān)注我，點(diǎn)贊博文~ 每天帶你漲知識(shí)!
1.看到這里了就 [點(diǎn)贊+好評(píng)+收藏] 三連 支持下吧，你的「點(diǎn)贊，好評(píng)，收藏」是我創(chuàng)作的動(dòng)力。
2.關(guān)注我 ~ 每天帶你學(xué)習(xí) :各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、HTML模板 、C++、數(shù)據(jù)結(jié)構(gòu)、Python程序設(shè)計(jì)、Java程序設(shè)計(jì)、爬蟲等！?「在這里有好多 開發(fā)者，一起探討 前端 開發(fā)?知識(shí)，互相學(xué)習(xí)」！
3.以上內(nèi)容技術(shù)相關(guān)問題可以相互學(xué)習(xí)，可 關(guān) 注 ↓公 Z 號(hào) 獲取更多源碼 !
?
獲取源碼？私信？關(guān)注？點(diǎn)贊？收藏？
??+??+??+???文章來源：http://www.zghlxwxcb.cn/news/detail-770035.html
有需要源碼的小伙伴可以 關(guān)注下方微信公眾號(hào) " Enovo開發(fā)工廠 "，回復(fù) 關(guān)鍵詞 " a-yh1?"文章來源地址http://www.zghlxwxcb.cn/news/detail-770035.html
到了這里，關(guān)于有趣的HTML實(shí)例（十一） 煙花特效（css+js）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級(jí)導(dǎo)航菜單 Web頁面設(shè)計(jì)實(shí)例——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
