编程人 cdmana.com

网页随处点击出现小火花简约特效 html+css+js

先看效果,效果是比较简约的:

在这里插入图片描述

原理:

效果就是在网页的任何地方鼠标点击后都出现一个小火花~原理并不复杂,就是鼠标点击后生成一个盒子,盒子里放字体图标或文字,然后操控它们的属性变化,最后再让它们消失就好。(还有小火花是我本地的字体图标,可以用自己的方式引入图标,或只写文字也可)

实现:

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
更多:
炫彩流光按钮~

Tags javascript
Scroll to Top