文档章节

模仿的一个前端特效

 假小书生
发布于 2016/10/24 14:11
字数 339
阅读 1
收藏 0

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    html,body{
        width: 100%;
        height:100%;
        margin:0;
        padding:0;
        overflow: hidden;
    }
        .target{
            width: 250px;
            border-radius:50%;
            pointer-events:visible;
            position:absolute;
            top:50%;
            left:50%;
            text-align: center;
        }

        .target:hover{
            cursor:pointer;
        }
        .target:hover span{
            
            font-weight:600;
            color:#ddd;
        }
        span{color:#666;}


    </style>
</head>
<body>
    <div class="target"><span style="white-space: pre-line;font-size:20px;">- Click or Hover -</span></div>
    <canvas id="cvs"></canvas>
</body>
</html>

<script type="text/javascript">
    (function(){
        var w_w=window.innerWidth,
            w_h=window.innerHeight,
            centerX=w_w/2,
            centerY=w_h/2,
            target=document.getElementsByTagName("div")[0],
            comets=[],
            min_radius=125,
            max_radius=250,
            ifHover=false,
            ifClick=false,
            change=false;

            target.style.height=window.getComputedStyle(target,null).width;
            target.style.marginLeft=-parseInt(target.style.height)/2+"px";
            target.style.marginTop=-parseInt(target.style.height)/2+"px";
            target.style.lineHeight=target.style.height;

            var canvas=document.getElementById("cvs");
            cvs.width=w_w;
            cvs.height=w_h;
            cvs.setAttribute("width",w_w+"px");
            cvs.setAttribute("height",w_h+"px");
            cvs.setAttribute("backgroundColor","#000000");
            

            var ctx=canvas.getContext("2d");

 


        function random(min,max){
            return min+(max-min)*Math.random();
        }

        function comet(){
            comets.push(this);
            this.speed=(Math.floor(Math.random() * 1.5) + 0.5)*Math.PI/180;
            this.rotation=Math.random()*Math.PI*2;
            this.y=this.origin=(random(min_radius,max_radius)+random(min_radius,max_radius))/2;
            this.x=0;

            this.collapseBonus = this.origin - 180;
            if(this.collapseBonus < 0){
                this.collapseBonus = 0;
    }
            this.shrinkRadius=max_radius/2 + this.collapseBonus;
            this.expandRadius=random(-window.innerHeight,-min_radius);
            this.color = 'rgba(255,255,255,'+ Math.abs(1 - (this.origin) / 250) +')';
        }

        comet.prototype.draw=function (){
            this.rotation+=this.speed;
            
            if(ifHover){
                if(this.y>this.shrinkRadius) this.y-=2.5;
                if(this.y<this.shrinkRadius) this.y+=2.5;
            }
            else if(ifClick){
                if(this.y>this.expandRadius) this.y-=4;

            }
            else{
                if(this.y>this.origin) this.y-=2;
                if(this.y<this.origin) this.y+=2;
            }
            
            ctx.save();
            if(ifClick){ctx.fillStyle="rgba(255,255,255,.6)";}
            else
            ctx.fillStyle=this.color;
            ctx.translate(centerX,centerY);
            ctx.rotate(this.rotation);
            ctx.fillRect(this.x,this.y,1,1);
            ctx.restore();


        };

        target.addEventListener("click",function(){if(change) {
                ifClick=false;
            }
            else{
                ifClick=true;
            }
            change=!change;});
            
        

        target.addEventListener("mouseover",function(){
            ifHover=true;
        });

        target.addEventListener("mouseout",function(){
            
            ifHover=false;
            
        });

        function animate(){
            ctx.fillStyle="rgba(25,25,25,.1)";
            ctx.fillRect(0,0,w_w,w_h);
            comets.forEach(function(element,index,group){
                element.draw();
            });
            requestFrame(animate);
        }

        window.requestFrame = (function(){
            return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                function( callback ){
                window.setTimeout(callback, 1000 / 60);
            };
        })();


        function initial(){
            ctx.fillStyle="rgba(25,25,25,1)";
            ctx.fillRect(0,0,w_w,w_h);
            for(var i=0;i<2500;i++){
                new comet();
            }

            animate();
        }

        initial();

 


    })();
</script>

© 著作权归作者所有

粉丝 0
博文 7
码字总数 4908
作品 0
保定
私信 提问
阿里老程序员装逼:34岁花甲老人,月薪才48k,身心疲惫!

早就听说阿里的程序员最爱装逼,本来我是不信的,大企业的人怎么会信口开河呢,看到下面我有点信了。原来阿里的大兄弟是真的很装,不多说,但是他们说得好像也是实话,我们来看看吧。 一名阿...

IT智云编程
2018/11/05
0
0
网页中这 10 种字体的运用方式,不会让人觉得 Low

简评:字体特效非常多,有目的地选取合理的特效是让它们发挥效果的诀窍所在。好的字体排版是不需要辅助就能被识别的,否则这个设计是失败的。 本文转载自 UISDC,如需转载请联系他们。 对于设...

极光推送
2018/06/06
38
0
网易云音乐的首页滑动特效实现方式?

最近看到网易云音乐的首页滑动特效不错,想模仿一下。但自己没什么好的思路,想请教下大家,谁有写过类似的特效实现,给点提示哈!

hz_bill_shou
2013/06/09
1K
2
android ui界面 图标的特效实现方法。

我现在遇见一个问题,想模仿小米盒子界面的图标特效,如下图,当焦点选中一个图标时,会加阴影,边框,倒影,放大。请高手给点指示,或者实现方案。不胜感激。

梧丶桐
2013/08/21
811
2
推荐十款来自极客标签的超棒前端特效[第十一期]

来源:GBin1.com 本周,我们带来了极客社区推荐的10款前端特效,仍然是非常有趣的小动态效果的页面生成。喜欢的可以直接将我们的在线调试代码插入,希望可以带给大家一些更好的帮助和不同以往...

gbin1
2013/08/13
6
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
462
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
17
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
8
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
21
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部