IT問答中心

html星空特效代碼 html星空特效代碼怎么寫

發布： web前端培訓發布時間：2021-10-21 09:37:35

推薦答案

品牌型號：聯想 YOGA 14c/系統版本：windows7

<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;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>

其它答案

冰闊落2020-06-22 18:56:36

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>星空特效</title>

    <link rel="stylesheet" href="css/index.css" />

</head>

<body>

    <div id="background" class="wall"></div>

    <div id="midground" class="wall"></div>

    <div id="foreground" class="wall"></div>

    <div id="top" class="wall"></div>

    <div id="ship" class="wall"></div>

</body>

</html>

上一篇：抖音發不了語音是怎么回事

下一篇：java代碼

中公旗下IT培訓品牌

中公教育品牌

　中公教育是一家中國領先的全品類職業教育機構，提供超過100個品類的綜合職業就業培訓服務。公司在全國超過1000個直營網點展開經營，深度覆蓋300多個地級市，并正在快速向數千個縣城和高校擴張。
完善就業體系

通過階段性授課機制，和每階段的定期考核，先讓學員能夠學會所學內容，才能找打合適工作。最后一個階段為就業課程，從技術和面試兩個方面加深就業能力，并且還有不定期的雙選會供大家選擇。
全程面授+實戰技術

線下課程全程是師資面對面教學，不會存在上課只對著大屏幕上課的情況，有問題都可以在課上得到解答。并且優就業通過自主研發大綱和學習路線，并且定期更新課程所學技術，讓大家所學技術不落伍。

中公優就業專業職業規劃老師

為您詳細答疑解惑，更能領取免費課程

點擊立即咨詢

实战IT培训机构_IT培训班选大学生IT技术培训中心_中公优就业

IT培訓

關注我們

熱門課程更多 >

關注我們

中公教育 IT 培訓品牌

專注于職業教育的A股上市公司

證券代碼：002607

首頁

師資團隊

教學服務

教學環境

選課中心

學習路線

IT問答中心

推薦答案

其它答案

中公旗下IT培訓品牌

中公教育品牌

完善就業體系

全程面授+實戰技術

中公優就業專業職業規劃老師

相關問題

更多課程

優就業：ujiuye

IT培訓

關注我們

熱門課程 更多 >

關注我們

IT問答中心

推薦答案

其它答案

中公旗下IT培訓品牌

中公教育品牌

完善就業體系

全程面授+實戰技術

中公優就業專業職業規劃老師

相關問題

更多課程

優就業：ujiuye

熱門課程更多 >