網頁隨處點選出現小火花簡約特效 html+css+js

北極光之夜。發表於2020-12-16
網頁特效HTMLCSSJS

先看效果，效果是比較簡約的：

在這裡插入圖片描述

原理：

效果就是在網頁的任何地方滑鼠點選後都出現一個小火花~原理並不複雜，就是滑鼠點選後生成一個盒子，盒子裡放字型圖示或文字，然後操控它們的屬性變化，最後再讓它們消失就好。（還有小火花是我本地的字型圖示，可以用自己的方式引入圖示，或只寫文字也可）

實現：

1.寫body屬性，目的是這樣就能獲取點選的位置：

 body{
        height: 100vh;
    }

2.定義一個小火花第一次出現的初始樣式：

 .tx{
        font-family: 'icomoon';
        position: absolute;
        color: #000;
        font-size: 15px;
        user-select: none;
    }

注意：一些屬性用處
font-family: ‘icomoon’; 引入字型圖示，也可自己方式引入~
user-select: none; 文字不可選中~
3.js獲取body這個元素，繫結點選事件（執行tianJia（e）這個函式）：

 var baba = document.querySelector('body');
      baba.addEventListener('click',function(e){
         tianJia(e);
      })

4.建立一個陣列，用來儲存點選後生成的盒子：

 var erZi =[];

5.tianJia（e）函式：

 function tianJia(e){
         var sunZi = document.createElement('div');
         sunZi.className = 'tx';
         sunZi.innerHTML = '<span></span>'; 
         baba.appendChild(sunZi);

         erZi.push({
             el:sunZi,
             top: e.clientY - 20,    
             left: e.clientX - 20,
             opacity: 1,
             scale: 1,
             color: `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
     });
      move();
    };

注意：一些屬性用處
push() 方法可向陣列的末尾新增一個或多個元素，並返回新的長度。
color: “…” 返回隨機生成的一個顏色~
步驟說明：
var sunZi…新增一個div盒子叫sunZi，
sunZi.className…給它新增 css初始的樣式‘tx’，
sunZi.innerHTML… 新增字型圖示，也可以寫文字，
baba.appendChild(sunZi); …向body裡新增這個盒子，
erZi.push({… 向陣列新增這個盒子，還有它的距離頂部距離在加上20，距離它左邊距離再往上20，（加多少自己看哪個出現的初始位置好而定），透明度為1，scale是transform屬性裡的代表縮放的值，定義為1；
move();執行函式；
6.move函式：

function move(){
       for(var i=0;i<erZi.length;i++)
       {    
           if(erZi[i].opacity<=0){
             baba.removeChild(erZi[i].el);
             erZi.splice(i,1);
             return;
           }
            erZi[i].top--;
            erZi[i].opacity=erZi[i].opacity-0.01;
            erZi[i].scale= erZi[i].scale+0.02;
            erZi[i].el.style.cssText = `
            top: ${erZi[i].top}px;
            left: ${erZi[i].left}px;
            color: ${erZi[i].color};
            opacity: ${erZi[i].opacity};
            transform: scale(${erZi[i].scale});`
            
       }
       window.requestAnimationFrame(move);  
    }

注意：一些屬性用處
erZi.splice(i,1);方法可刪除從 index 處開始的零個或多個元素，
window.requestAnimationFrame(); //自帶的，為請求動畫幀，以螢幕重新整理為準，一般是每秒60幀，每重新整理會自動呼叫一次move。
步驟說明：
for(var i=0;i<erZi.length;i++)…遍歷陣列，看裡面有幾個盒子，目的改他們的樣式；
if(erZi[i].opacity<=0){…}判斷盒子（小火花）的透明度為0了嗎，就是消失沒，消失了就body刪除掉前面建立的節點，刪除陣列裡的盒子；
erZi[i].top–; 讓他慢慢向上走；
erZi[i].opacity…慢慢變透明直到0，
erZi[i].scale…慢慢變大，
（上面這些改變數值是多少可以自己調），
erZi[i].el.style.cssText…就是新增css樣式了；

完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
 @font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?wr5es');
  src:  url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?wr5es') format('truetype'),
    url('fonts/icomoon.woff?wr5es') format('woff'),
    url('fonts/icomoon.svg?wr5es#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
/* 上面是我引入我的字型圖示庫 */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        height: 100vh;
    }
    
    .tx{
        font-family: 'icomoon';
        position: absolute;
        color: #000;
        font-size: 15px;
        user-select: none;
    }
</style>
<body>
    
    <script>
      var baba = document.querySelector('body');
      baba.addEventListener('click',function(e){
         tianJia(e);
      })   

     var erZi =[];
     function tianJia(e){
         var sunZi = document.createElement('div');
         sunZi.className = 'tx';
         sunZi.innerHTML = '<span></span>'; 
         baba.appendChild(sunZi);

         erZi.push({
             el:sunZi,
             top: e.clientY - 20,    
             left: e.clientX - 20,
             opacity: 1,
             scale: 1,
             color: `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`
     });
      move();
    };
    function move(){
       for(var i=0;i<erZi.length;i++)
       {    
           if(erZi[i].opacity<=0){
             baba.removeChild(erZi[i].el);
             erZi.splice(i,1);
             return;
           }
            erZi[i].top--;
            erZi[i].opacity=erZi[i].opacity-0.01;
            erZi[i].scale= erZi[i].scale+0.02;
            erZi[i].el.style.cssText = `
            top: ${erZi[i].top}px;
            left: ${erZi[i].left}px;
            color: ${erZi[i].color};
            opacity: ${erZi[i].opacity};
            transform: scale(${erZi[i].scale});`
            
       }
       window.requestAnimationFrame(move);  
    }
   
    </script>
</body>
</html>

總結：

哈哈哈，22
更多：
炫彩流光按鈕~

相關文章