400-650-7353

精品課程

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

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

推薦答案
品牌型號：聯(lián)想 YOGA 14c/系統(tǒng)版本：windows7
  1. <html lang="en"> 
  2. <head> 
  3.     <meta charset="UTF-8"> 
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  5.     <title>星空特效</title> 
  6.     <style> 
  7.         *{ 
  8.             margin: 0; 
  9.             padding: 0; 
  10.         } 
  11.         body{ 
  12.             overflow: hidden; 
  13.             background-color: #000; 
  14.         } 
  15.         h1{ 
  16.             position: absolute; 
  17.             line-height: 50px; 
  18.             letter-spacing: 5px; 
  19.             color: #fff; 
  20.             width: 300px; 
  21.             top: 40%; 
  22.             left: 50%; 
  23.             margin-left: -200px; 
  24.             font-size: 30px; 
  25.         } 
  26.     </style> 
  27. </head> 
  28. <body> 
  29.     <h1> 
  30.        
  31.     </h1> 
  32.     <canvas></canvas> 
  33.     <script> 
  34.         var canvas=document.querySelector("canvas"); 
  35.             ctx=canvas.getContext("2d"); 
  36.             w=canvas.width=window.innerWidth; 
  37.             h=canvas.height=window.innerHeight; 
  38.             var canvas2=document.createElement("canvas"); 
  39.                 ctx2=canvas2.getContext("2d"); 
  40.                 canvas2.width=100; 
  41.                 canvas2.height=100; 
  42.             var a=canvas2.width/2; 
  43.         var grandient=ctx.createRadialGradient(a,a,0,a,a,a); 
  44.             grandient.addColorStop(0.025,'#fff'); 
  45.             grandient.addColorStop(0.1, 'hsl(220,59%,18%)'); 
  46.             grandient.addColorStop(0.025, 'hsl(220,60%,33%)'); 
  47.             grandient.addColorStop(1,"transparent"); 
  48.             ctx2.fillStyle=grandient; 
  49.             ctx2.beginPath(); 
  50.             ctx2.arc(a,a,a,0,Math.PI*2); 
  51.             ctx2.fill(); 
  52.             ctx2.closePath(); 
  53.             var stars=[]; 
  54.             var count=0; 
  55.             function Star(){ 
  56.                 this.pos=Math.floor(Math.random()* w/2-100); 
  57.                 this.r=Math.floor(Math.random()*100); 
  58.                 this.dx=w/2; 
  59.                 this.dy=h/2; 
  60.                 this.rand=Math.floor(Math.random()*360); 
  61.                 this.speed=this.pos/100000; 
  62.                 stars[count]=this; 
  63.                 count ++; 
  64.             } 
  65.             Star.prototype.draw=function(){ 
  66.                 var x=Math.sin(this.rand+1)* this.pos+this.dx; 
  67.                     y=Math.cos(this.rand)*this.pos/2+this.dy; 
  68.                 ctx.drawImage(canvas2,x-this.r/2,y-this.r/2,this.r,this.r); 
  69.                 this.rand=this.rand+this.speed; 
  70.             } 
  71.             for(var i=0;i<1000;i++){ 
  72.                 new Star(); 
  73.             } 
  74.             function anmit(){ 
  75.                 ctx.clearRect(0,0,w,h); 
  76.                 for(var i=0;i<stars.length;i++){ 
  77.                     stars[i].draw(); 
  78.                 } 
  79.                 requestAnimationFrame(anmit); 
  80.             } 
  81.             anmit(); 
  82.             var oH=document.getElementsByTagName("h1")[0]; 
  83.             var arr=["浩瀚星辰"], 
  84.                 index=0, 
  85.                 arrLen=arr.length, 
  86.                 strLen=arr[0].length; 
  87.                 pos=0, 
  88.                 row=0, 
  89.                 str="", 
  90.                 timer=null; 
  91.             function print() { 
  92.                 while(row<index){ 
  93.                     str=str+arr[row]+"<br>"; 
  94.                     row++; 
  95.                 } 
  96.                 oH.innerHTML=str+arr[index].substring(0,pos); 
  97.                 if(pos==strLen){ 
  98.                     index++; 
  99.                     pos =0; 
  100.                     if(index<arr.length){ 
  101.                         strLen=arr[index].length; 
  102.                         timer=setTimeout(print,250); 
  103.                     } 
  104.                 }else{ 
  105.                     pos++; 
  106.                     timer=setTimeout(print,250); 
  107.                 } 
  108.             } 
  109.             setTimeout(print,250); 
  110.     </script> 
  111. </body> 
  112. </html> 


其它答案
冰闊落2020-06-22 18:56:36
  1. <html lang="en"> 
  2. <head> 
  3.     <meta charset="UTF-8"> 
  4.     <title>星空特效</title> 
  5.     <link rel="stylesheet" href="css/index.css" /> 
  6. </head> 
  7. <body> 
  8.     <div id="background" class="wall"></div> 
  9.     <div id="midground" class="wall"></div> 
  10.     <div id="foreground" class="wall"></div> 
  11.     <div id="top" class="wall"></div> 
  12.     <div id="ship" class="wall"></div> 
  13. </body> 
  14. </html> 

 


中公旗下IT培訓品牌

  • 中公教育品牌

    　中公教育是一家中國領(lǐng)先的全品類職業(yè)教育機構(gòu)，提供超過100個品類的綜合職業(yè)就業(yè)培訓服務(wù)。公司在全國超過1000個直營網(wǎng)點展開經(jīng)營，深度覆蓋300多個地級市，并正在快速向數(shù)千個縣城和高校擴張。

  • 完善就業(yè)體系

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

  • 全程面授+實戰(zhàn)技術(shù)

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

中公優(yōu)就業(yè)專業(yè)職業(yè)規(guī)劃老師

為您詳細答疑解惑，更能領(lǐng)取免費課程

相關(guān)問題

更多課程

專業(yè)課程老師將第一時間為您解答

立即答疑
修改
優(yōu)就業(yè)：ujiuye

關(guān)注中公優(yōu)就業(yè)官方微信

  • 關(guān)注微信回復(fù)關(guān)鍵詞“大禮包”，領(lǐng)80G學習資料