欢迎光临散文网 会员登陆 & 注册

HTML5+CSS3+JS小实例：五彩纸屑礼花筒

2023-02-24 20:26 作者:嘿大喵喵  | 我要投稿
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  8.     <title>Document</title>  
  9.     <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js" defer></script>  
  10.     <style>  
  11.         * {  
  12.             margin: 0;  
  13.             padding: 0;  
  14.         }  
  15.   
  16.         body {  
  17.             background-color: grey;  
  18.             user-select: none;  
  19.         }  
  20.   
  21.         .lihua {  
  22.             /* 根据图片自己调节位置 */  
  23.             width: 400px;  
  24.             position: absolute;  
  25.             left: 50%;  
  26.             top: 40%;  
  27.             transform: translateX(-50%);  
  28.         }  
  29.     </style>  
  30. </head>  
  31.   
  32. <body>  
  33.     <img src="./img/礼花筒.png" class="lihua">  
  34.     <script>  
  35.         const lihua = document.querySelector(".lihua")  
  36.         const run = () => {  
  37.             confetti({  
  38.                 particleCount: 100, //粒子数量  
  39.                 spread: 70,         //粒子速度  
  40.                 origin: {           //初始位置  
  41.                     x: 0.5,  
  42.                     y: 0.5,  
  43.                 }  
  44.             })  
  45.         }  
  46.         lihua.onclick = () => run()  
  47.     </script>  
  48.   
  49. </body>  
  50.   
  51. </html> 


标签：

HTML5+CSS3+JS小实例：五彩纸屑礼花筒的评论 (共 条)

分享到微博请遵守国家法律