资讯专栏INFORMATION COLUMN

给自己的页面添加点乐趣

newtrek / 2664人阅读

摘要:关于可参照张鑫旭大大的讲解设置变化速度然后将方法里面的赋值去掉加上方法如下心形样式可变化心形颜色加上随机颜色的函数下面的属性随位移是变化的可添加你需要变化的样式比如透明度缩放最后加上事件图不会搞撒

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51881.html

相关文章

  • 自己页面添加乐趣

    摘要:关于可参照张鑫旭大大的讲解设置变化速度然后将方法里面的赋值去掉加上方法如下心形样式可变化心形颜色加上随机颜色的函数下面的属性随位移是变化的可添加你需要变化的样式比如透明度缩放最后加上事件图不会搞撒 2018年开工,大家都很清闲,随意浏览各个社区,有些小发现,希望跟大家分享下,语言组织太差请忽略:大致效果:鼠标每次点击页面,鼠标处便出现一个♥,然后♥慢慢上升至消失。还是直接上代码吧。 1...

    Aomine 评论0 收藏0
  • 自己页面添加乐趣

    摘要:关于可参照张鑫旭大大的讲解设置变化速度然后将方法里面的赋值去掉加上方法如下心形样式可变化心形颜色加上随机颜色的函数下面的属性随位移是变化的可添加你需要变化的样式比如透明度缩放最后加上事件图不会搞撒 2018年开工,大家都很清闲,随意浏览各个社区,有些小发现,希望跟大家分享下,语言组织太差请忽略:大致效果:鼠标每次点击页面,鼠标处便出现一个♥,然后♥慢慢上升至消失。还是直接上代码吧。 1...

    techstay 评论0 收藏0
  • 左滑右滑乐趣

    摘要:左滑右滑你不再是一个人无论你是一个程序猿还是一个程序媛,每天干的事除了还是,代码不能解决的问题什么问题自己心里还没点数嘛,探探能帮你解决。 左滑 右滑 你不再是一个人 无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决。最近网上特流行一款交友软件叫探探(据说是yp软件)。作为探探曾经的一...

    Muninn 评论0 收藏0
  • 学会它,能让你工作学习效率提升10倍!

    摘要:思维导图的好处它们能投让你一直对全部知识图景了然于胸,因而可以让你对那一学科的全部知识有一个更加平衡和更加全面的理解。竭尽所能地利用一切让思维导图的制作过程充满乐趣音乐绘画色彩。 从小老师就教育小肆,要多记笔记,说好记性不如烂笔头,但记过的笔记却很快就忘了,甚至回头再看都不知道当时记得什么,一直期望能有个比记笔记更好的方法来学习,直到我遇见了它--思维导图。 什么是思维导图? 人脑不是...

    Cruise_Chan 评论0 收藏0

发表评论

0条评论

newtrek

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<