给本身的页面添加点乐趣

2018年开工,你们都很悠闲，随意浏览各个社区，有些小发现，但愿跟你们分享下，语言组织太差请忽略：
大体效果：鼠标每次点击页面，鼠标处便出现一个♥，而后♥慢慢上升至消失。
仍是直接上代码吧。

1. 先给心形写好css

PS ：顺便要给html，body加上height：100%;

.heart {
        width: 10px;
        height: 10px;
        // 整个网页因此fixed
        position: fixed;
        background: #f00;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
    }
    
    .heart:after,
    .heart:before {
        content: '';
        width: inherit;
        height: inherit;
        background: inherit;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        position: absolute;
    }
    
    .heart:after {
        top: -5px;
    }
    
    .heart:before {
        left: -5px;
    }

2. 第二步 建立一个心形

function createHeart(event){
            // 获取点击坐标
         const left = event.clientX,
             top = event.clientY,
             heart = document.createElement('div');
         heart.className = "heart"; // 心形样式
         // 可变化心形颜色 加上随机颜色的函数
         heart.style.backgroundColor = randomColor();
         heart.style.left = left - 5 + 'px';
         // 下面的属性随位移是变化的
         const params = {
             top,
             // 可添加你须要变化的样式 好比透明度、缩放
             opactity : 1,
             scale : 1
         }
         // 将params 属性付给heart 一些兼容处理没作
        heart.style.opacity = params.alpha;
        heart.style.left = params.left + 'px';
        heart.style.top = params.top + 'px';
        heart.style.transform = 'scale(' + params.scale + ',' + params.scale + ') rotate(45deg)';
         document.body.appendChild(heart); //append到body里
         
    }
    
    function randomColor(){
        return "rgb(" + (~~(Math.random() * 255)) + ',' + (~~(Math.random() * 255)) + ',' + (~~(Math.random() * 255)) + ')';
    }

这样鼠标没点一次都会在鼠标位置出现一个随机颜色的心形

3. 第三步 心形上移至消失

要获取到生成心形这个元素 而后运用 requestAnimationFrame()函数,此处确实没显出什么好的Css3的方法，由于初始值是未定的。关于requestAnimationFrame可参照
张鑫旭大大的讲解

function upLoop(dom, params) {
        if (params.alpha <= 0) {
            document.body.removeChild(dom);
            return;
        };
        // 设置变化速度
        params.alpha -= 0.006;
        params.top--;
        params.scale += 0.003;
        dom.style.opacity = params.alpha;
        dom.style.top = params.top + 'px';
        dom.style.transform = 'scale(' + params.scale + ',' + params.scale + ') rotate(45deg)';
        requestAnimationFrame(function () { hideLoop(dom, params) })
    }
    
    // 而后将createHeart方法里面的赋值style去掉 加上upLoop方法
    // 以下
    function createHeart(event) {
         const left = event.clientX,
             top = event.clientY,
             heart = document.createElement('div');
         heart.className = "heart"; // 心形样式
         // 可变化心形颜色 加上随机颜色的函数
         heart.style.backgroundColor = randomColor();
         heart.style.left = left - 5 + 'px';
         // 下面的属性随位移是变化的
         const params = {
             top,
             // 可添加你须要变化的样式 好比透明度、缩放
             opactity : 1,
             scale : 1
         }
        document.body.appendChild(heart);
        hideLoop(heart, params)
    };

4. 最后加上click事件

window.onclick = function (event) {
        createHeart(event);
    }

gif图不会搞撒