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

百变鹏仔 3个月前 (09-22) #HTML

文章标签星空

本篇文章给大家通过代码示例介绍一下使用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,&#39;#fff&#39;);            grandient.addColorStop(0.1, &#39;hsl(220,59%,18%)&#39;);            grandient.addColorStop(0.025, &#39;hsl(220,60%,33%)&#39;);            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;i<1000;i++){                new Star();            }            function anmit(){                ctx.clearRect(0,0,w,h);                for(var i=0;i<stars.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(row<index){                    str=str+arr[row]+"<br>";                    row++;                }                oH.innerHTML=str+arr[index].substring(0,pos);                if(pos==strLen){                    index++;                    pos =0;                    if(index<arr.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实现星空旋转和文字淡入效果（附代码）

html代码是什么

值得一学的6个前端HTML+CSS特效

html怎么设置字体

怎么隐藏html标签

html怎么设置编码utf8