有趣的HTML实例（十一）烟花特效（css+js）-蒲公英云

为什么今天不做炒土豆丝呢，为什么呢为什么呢为什么呢为什么呢，坚持问上一个时辰，一般来说，第二天我们的饭桌上就会出现炒土豆丝。这件事告诉了我们求知欲的重要性，知之才幸福，不知不幸福。

——《华胥引》

一、前言

二、往期作品回顾

三、作品介绍

四、本期代码介绍

五、效果显示

六、编码实现

index.html

style.css

script.js

七、获取源码

公众号获取源码

获取源码？私信？关注？点赞？收藏？

一、前言

在我们的 html 学习过程中，会用到并见识到各种各样的实例，以及各种插件，并且有些 web 网页中的小插件又非常的吸引眼球，提升 web 网页的层次，显得非常好看并且非常使用。在本系列中，我将持续为大家更新有趣且使用的 html 实例，放在 web 网页中，凸显效果。

特点一：都是符合学校或者学生考试期末作业的水平，都是最基础的简单的 html 样例，提升web网页整理效果，都是 div+css 框架原创代码写的，内容包括 js / css，也包含视频+音乐+flash 等元素的插入…

特点二：内容包括多种丰富类型，例如：倒计时，404页面，Blog顶置卡片设计 (css+js)，To-Do-List设计 (css+js)，火柴盒动画 (css)，日历便签设计 (css+js)，搜索框设计 (css+js)，卡片式图片展示 (css+js)，咖啡选择 (css+js)……

可满足多种需求，欢迎大家下载！

#

二、往期作品回顾

有趣的HTML实例（一）倒计时_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（二） 404页面_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（三）加载页面动画_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（四）旋转菜单_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（五）加载页面动画Ⅱ（css）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（六）卡片翻转时钟_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（七）注册登录界面Ⅱ（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（八）一个很有趣的动态背景（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（九）文本变形动画（css+js）_Enovo_飞鱼的博客-CSDN博客

有趣的HTML实例（十）悬停时有旋转效果的图标_Enovo_飞鱼的博客-CSDN博客

三、作品介绍

1.作品简介：HTML响应式布局网站源码！兼容 pc 以及移动端，内涵 js 交互，ui 交互。直接点击即可查看效果！

2.作品编辑：个人主页网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用）。

3.作品技术：使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。

四、本期代码介绍

一款简单的 HTML+ CSS+JS 烟花特效（css+js）实例

1、HTML

2、CSS

3、JS

4、舒适的画面感

5、烟花特效

6、自定义文字

可通用多种不同情景，放置点击图标，进行页面跳转等

五、效果显示

可使用在多种情景下，提升层次轮廓效果、美化界面、自定义文字的美化——>

根据需求修改

六、编码实现

显示完整代码

注意路径(⊙o⊙)？

o(*￣▽￣*)ブ

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>烟花特效</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/fontawesome.min.css"><link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- 文字部分 -->
    <canvas></canvas>
    <h1>202<span class="pen">3</span> 节日快乐?</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
}