devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

有趣的HTML实例（十一） 烟花特效（css+js）_html特效

作者：凡人多烦事01 | 2024-02-16 04:52:15

赞

踩

html特效

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

——《华胥引》

目录

一、前言

二、往期作品回顾

三、作品介绍

四、本期代码介绍

五、效果显示 

六、编码实现

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>烟花特效</title>
  6.     <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">
  7. </head>
  8. <body>
  9.     <!-- 文字部分 -->
  10.     <canvas></canvas>
  11.     <h1>202<span class="pen">3</span> 节日快乐
    声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/90871
    推荐阅读
    相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。