html+css+js实现星空旋转和文字淡入效果（附代码）

废话不多说直接上代码，效果是一个星空旋转和文字逐渐出现的效果，文字是逐渐出现的，星空中的小球是旋转的

!DOCTYPE html>
    html lang="en">
    head>
        meta charset="UTF-8">
        meta name="viewport" content="width=device-width, inITial-scale=1.0">
        title>
    星空特效/title>
        style>
        *{
                margin: 0;
                padding: 0;
        }
        body{
                overflow: hidden;
                background-color: #000;
        }
        h1{
                position: absolute;
                line-height: 50px;
                letter-spacing: 5px;
                color: #fff;
                width: 300px;
                top: 40%;
                left: 50%;
                margin-left: -200px;
                font-Size: 30px;
        }
        /style>
    /head>
    body>
        h1>
              /h1>
        canvas>
    /canvas>
        script>
            VAR canvas=document.querySelector("canvas");
                ctx=canvas.getContext("2d");
                w=canvas.width=window.innerWidth;
                h=canvas.height=window.innerHeight;
                var canvas2=document.createElement("canvas");
                    ctx2=canvas2.getContext("2d");
                    canvas2.width=100;
                    canvas2.height=100;
                var a=canvas2.width/2;
            var grandient=ctx.createRadialGradient(a,a,0,a,a,a);
                grandient.addColorStop(0.025,'#fff');
                grandient.addColorStop(0.1, 'hsl(220,59%,18%)');
                grandient.addColorStop(0.025, 'hsl(220,60%,33%)');
                grandient.addColorStop(1,"transparent");
                ctx2.fillStyle=grandient;
                ctx2.beginPath();
                ctx2.arc(a,a,a,0,Math.PI*2);
                ctx2.fill();
                ctx2.closePath();
                var stars=[];
                var count=0;
            function Star(){
                    this.pos=Math.floor(Math.random()* w/2-100);
                    this.r=Math.floor(Math.random()*100);
                    this.dx=w/2;
                    this.dy=h/2;
                    this.rand=Math.floor(Math.random()*360);
                    this.speed=this.pos/100000;
                    stars[count]=this;
                    count ++;
            }
            Star.PRototype.draw=function(){
                    var x=Math.sin(this.rand+1)* this.pos+this.dx;
                        y=Math.cos(this.rand)*this.pos/2+this.dy;
                    ctx.drawImage(canvas2,x-this.r/2,y-this.r/2,this.r,this.r);
                    this.rand=this.rand+this.speed;
            }
                for(var i=0;
    i1000;
i++){
                    new Star();
            }
            function anmit(){
                    ctx.clearRect(0,0,w,h);
                    for(var i=0;
    istars.length;
i++){
                        stars[i].draw();
                }
                    requestAnimationFrame(anmit);
            }
                anmit();
                var oH=document.getelementsbytagname("h1")[0];
                var arr=["这世间过于俗气","不像你一般","浩瀚星辰,温柔婉转"],                index=0,                arrLen=arr.length,                strlen=arr[0].length;
                    pos=0,                row=0,                str="",                timer=null;
            function print() {
                while(rowindex){
                        str=str+arr[row]+"br>
    ";
                        row++;
                }
                    oH.innerHTML=str+arr[index].substring(0,pos);
                if(pos==strLen){
                        index++;
                        pos =0;
                    if(indexarr.length){
                            strLen=arr[index].length;
                            timer=setTimeout(print,250);
                    }
                }
else{
                        pos++;
                        timer=setTimeout(print,250);
                }
            }
                setTimeout(print,250);
        /script>
    /body>
    /html>
    

效果图：

效果视频博主已发往b站：https://www.bilibili.COM/video/BV13K4y1e77Y?From=seArch& seid=9564283641943003056

推荐学习：Html视频教程

以上就是html+css+js实现星空旋转和文字淡入效果（附代码）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！