給本身的頁面添加點樂趣

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圖不會搞撒