先看效果，效果是比較簡約的：
原理：
效果就是在網頁的任何地方滑鼠點擊后都出現一個小火花~原理并不復雜，就是滑鼠點擊后生成一個盒子，盒子里放字體圖示或文字，然后操控它們的屬性變化，最后再讓它們消失就好，（還有小火花是我本地的字體圖示，可以用自己的方式引入圖示，或只寫文字也可）
實作：
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>
總結：
哈哈哈，
更多：
炫彩流光按鈕~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/236608.html
標籤：其他
上一篇：Ant Design Vue生成動態選單a-menu
下一篇：?前端 html+css+js[1000個超炫酷特效] 當我學會這招,所有炫酷的特效頁面(含原始碼)都能下載下來啦!