阅读 694

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

这是我参与更文挑战的第3天

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

在这里插入图片描述

原理:

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

实现:

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

文章分类
前端
文章标签