国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

給自己的頁(yè)面添加點(diǎn)樂趣

techstay / 1189人閱讀

摘要：關(guān)于可參照張?chǎng)涡翊蟠蟮闹v解設(shè)置變化速度然后將方法里面的賦值去掉加上方法如下心形樣式可變化心形顏色加上隨機(jī)顏色的函數(shù)下面的屬性隨位移是變化的可添加你需要變化的樣式比如透明度縮放最后加上事件圖不會(huì)搞撒

2018年開工,大家都很清閑，隨意瀏覽各個(gè)社區(qū)，有些小發(fā)現(xiàn)，希望跟大家分享下，語(yǔ)言組織太差請(qǐng)忽略：
大致效果：鼠標(biāo)每次點(diǎn)擊頁(yè)面，鼠標(biāo)處便出現(xiàn)一個(gè)?，然后?慢慢上升至消失。
還是直接上代碼吧。

1. 先給心形寫好css

PS ：順便要給html，body加上height：100%;

    .heart {
        width: 10px;
        height: 10px;
        // 整個(gè)網(wǎng)頁(yè)所以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. 第二步 創(chuàng)建一個(gè)心形
    function createHeart(event){
            // 獲取點(diǎn)擊坐標(biāo)
         const left = event.clientX,
             top = event.clientY,
             heart = document.createElement("div");
         heart.className = "heart"; // 心形樣式
         // 可變化心形顏色 加上隨機(jī)顏色的函數(shù)
         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)) + ")";
    }

這樣鼠標(biāo)沒點(diǎn)一次都會(huì)在鼠標(biāo)位置出現(xiàn)一個(gè)隨機(jī)顏色的心形

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

要獲取到生成心形這個(gè)元素 然后運(yùn)用 requestAnimationFrame()函數(shù),此處確實(shí)沒顯出什么好的Css3的方法，因?yàn)槌跏贾凳俏炊ǖ?。關(guān)于requestAnimationFrame可參照
張?chǎng)涡翊蟠蟮闹v解

    function upLoop(dom, params) {
        if (params.alpha <= 0) {
            document.body.removeChild(dom);
            return;
        };
        // 設(shè)置變化速度
        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"; // 心形樣式
         // 可變化心形顏色 加上隨機(jī)顏色的函數(shù)
         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圖不會(huì)搞撒

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92867.html

相關(guān)文章

  • 給自己的頁(yè)面添加點(diǎn)樂趣

    摘要：關(guān)于可參照張?chǎng)涡翊蟠蟮闹v解設(shè)置變化速度然后將方法里面的賦值去掉加上方法如下心形樣式可變化心形顏色加上隨機(jī)顏色的函數(shù)下面的屬性隨位移是變化的可添加你需要變化的樣式比如透明度縮放最后加上事件圖不會(huì)搞撒 2018年開工,大家都很清閑，隨意瀏覽各個(gè)社區(qū)，有些小發(fā)現(xiàn)，希望跟大家分享下，語(yǔ)言組織太差請(qǐng)忽略：大致效果：鼠標(biāo)每次點(diǎn)擊頁(yè)面，鼠標(biāo)處便出現(xiàn)一個(gè)?，然后?慢慢上升至消失。還是直接上代碼吧。 1...

    Aomine 評(píng)論0 收藏0

  • 給自己的頁(yè)面添加點(diǎn)樂趣

    摘要：關(guān)于可參照張?chǎng)涡翊蟠蟮闹v解設(shè)置變化速度然后將方法里面的賦值去掉加上方法如下心形樣式可變化心形顏色加上隨機(jī)顏色的函數(shù)下面的屬性隨位移是變化的可添加你需要變化的樣式比如透明度縮放最后加上事件圖不會(huì)搞撒 2018年開工,大家都很清閑，隨意瀏覽各個(gè)社區(qū)，有些小發(fā)現(xiàn)，希望跟大家分享下，語(yǔ)言組織太差請(qǐng)忽略：大致效果：鼠標(biāo)每次點(diǎn)擊頁(yè)面，鼠標(biāo)處便出現(xiàn)一個(gè)?，然后?慢慢上升至消失。還是直接上代碼吧。 1...

    newtrek 評(píng)論0 收藏0

  • 左滑右滑的樂趣

    摘要：左滑右滑你不再是一個(gè)人無論你是一個(gè)程序猿還是一個(gè)程序媛，每天干的事除了還是，代碼不能解決的問題什么問題自己心里還沒點(diǎn)數(shù)嘛，探探能幫你解決。 左滑 右滑 你不再是一個(gè)人 無論你是一個(gè)程序猿還是一個(gè)程序媛，每天干的事除了coding還是coding，代碼不能解決的問題（什么問題自己心里還沒點(diǎn)abcd數(shù)嘛），探探能幫你解決。最近網(wǎng)上特流行一款交友軟件叫探探（據(jù)說是yp軟件）。作為探探曾經(jīng)的一...

    Muninn 評(píng)論0 收藏0

  • 學(xué)會(huì)它，能讓你工作學(xué)習(xí)效率提升10倍！

    摘要：思維導(dǎo)圖的好處它們能投讓你一直對(duì)全部知識(shí)圖景了然于胸，因而可以讓你對(duì)那一學(xué)科的全部知識(shí)有一個(gè)更加平衡和更加全面的理解。竭盡所能地利用一切讓思維導(dǎo)圖的制作過程充滿樂趣音樂繪畫色彩。 從小老師就教育小肆，要多記筆記，說好記性不如爛筆頭，但記過的筆記卻很快就忘了，甚至回頭再看都不知道當(dāng)時(shí)記得什么，一直期望能有個(gè)比記筆記更好的方法來學(xué)習(xí)，直到我遇見了它--思維導(dǎo)圖。 什么是思維導(dǎo)圖？ 人腦不是...

    Cruise_Chan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<