IT培训网更多 收回

IT培训
关注我们
官方公众号 回复"大礼包"享福利 领学习资料 分享IT知识
|

IT在线学习更多 收回

热门课程 更多 >
关注我们
扫码领资料 零基础学IT 微信扫码关注 回复“大礼包”享福利
| 初高中软件培训| 中公企商培训| 中公联合办学| 优校邦| 中公PMP| 中公软考| 计算机二级培训
登录 | 注册
400-650-7353

精品课程
 

您所在的位置：首页>

IT问答中心

html星空特效代码 html星空特效代码怎么写

发布： web前端培训 发布时间：2021-10-21 09:37:35

推荐答案
品牌型号：联想 YOGA 14c/系统版本：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> 

 


上一篇：抖音发不了语音是怎么回事

下一篇：java代码

中公旗下IT培训品牌

  • 中公教育品牌

    　中公教育是一家中国领先的全品类职业教育机构，提供超过100个品类的综合职业就业培训服务。公司在全国超过1000个直营网点展开经营，深度覆盖300多个地级市，并正在快速向数千个县城和高校扩张。

  • 完善就业体系

    通过阶段性授课机制，和每阶段的定期考核，先让学员能够学会所学内容，才能找打合适工作。最后一个阶段为就业课程，从技术和面试两个方面加深就业能力，并且还有不定期的双选会供大家选择。

  • 全程面授+实战技术

    线下课程全程是师资面对面教学，不会存在上课只对着大屏幕上课的情况，有问题都可以在课上得到解答。并且优就业通过自主研发大纲和学习路线，并且定期更新课程所学技术，让大家所学技术不落伍。

中公优就业专业职业规划老师

为您详细答疑解惑，更能领取免费课程

相关问题

更多课程

专业课程老师将第一时间为您解答

立即答疑
修改

本周热门问答排行榜

a3图框尺寸
bg是什么意思
抖音发日常是什么意思
键盘ls是哪个键
文档是什么
微信实名认证未成年可以认证吗
gpu100%正常吗
json解析错误是什么意思
优就业：ujiuye

关注中公优就业官方微信

  • 关注微信回复关键词“大礼包”，领80G学习资料
投诉建议：400-650-7353

Copyright©1999-北京中公教育科技有限公司 .All Rights Reserved 京ICP备10218183号-88
京ICP证161188号 京公网安备11010802020723号

服务电话: