新增第208个小实例：五彩纸屑礼花筒

2023-02-24 16:28:02 +08:00 · 2023-02-24 16:28:02 +08:00 · 70d26fd10f
parent cb12097577
commit 70d26fd10f
5 changed files with 53 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -215,6 +215,7 @@
 205. HTML5+CSS3小实例：文字涂抹动画
 206. HTML5+CSS3小实例：人物介绍卡片2.0
 207. HTML5+CSS3小实例：弹出式悬停效果
+208. HTML5+CSS3+JS小实例：五彩纸屑礼花筒

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/208/208.css
+++ b/code/208/208.css
@ -0,0 +1,17 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    background-color: #000;
+    /* 禁止选取 */
+    user-select: none;
+}
+.lihuatong{
+    width: 60px;
+    position: absolute;
+    left: 50%;
+    top: 64%;
+    transform: translateX(-50%);
+    cursor: pointer;
+}
--- a/code/208/208.html
+++ b/code/208/208.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="zh-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>五彩纸屑礼花筒</title>
+    <link rel="stylesheet" href="208.css">
+</head>
+<body>
+    <img src="/images/lihuatong.png" alt="" class="lihuatong">
+</body>
+</html>
+
+<script src="208.js" type="module"></script>
--- a/code/208/208.js
+++ b/code/208/208.js
@ -0,0 +1,20 @@
+// 引入插件
+import { confetti } from 'https://cdn.jsdelivr.net/npm/tsparticles-confetti/+esm';
+
+// 要操作的元素
+const lihuatong=document.querySelector('.lihuatong');
+
+// 喷出五彩纸屑
+const run=()=>{
+    confetti({
+        particleCount:100, //粒子数量
+        spread:70, //扩散范围
+        origin:{ //喷出的位置
+            x:0.5,
+            y:0.65
+        }
+    })
+}
+
+// 礼花筒绑定点击事件
+lihuatong.addEventListener('click',run);
--- a/images/lihuatong.png
+++ b/images/lihuatong.png