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图不会搞撒