旋转的星空特效代码

  • A+
所属分类:美化特效

html5特效代码旋转的星空,首先要设置背景为暗一点的背景色或者图片,例如设置成黑色的背景颜色,然后把代码复制到html文件里,设置下下方JS里的一些设置,如星星的数量、星星移动的范围、星星的大小等,保存后用支持html5的浏览器打开就能看到旋转的星空特效
温馨提示:如果使用复制按钮代码出现错误,建议使用ctrl+c来复制代码。

  1. <!doctype?html>
  2. <html>
  3. <head>
  4. <meta?charset="utf-8">
  5. <title>旋转的星空</title>
  6. <style?type="text/css">
  7. body{background:?black;padding:?0;margin:?0;?overflow:hidden}
  8. .header{margin:?0?auto;width:?100%;height:?100%;background-color:?#000;position:?relative;}
  9. </style>
  10. </head>
  11. <body>
  12. <div?class="header"><canvas?id="canvas"></canvas></div>
  13. <script>
  14. var?canvas?=?document.getElementById('canvas'),
  15. ??ctx?=?canvas.getContext('2d'),
  16. ??w?=?canvas.width?=?window.innerWidth,
  17. ??h?=?canvas.height?=?window.innerHeight,
  18. ??hue?=?217,
  19. ??stars?=?[],
  20. ??count?=?0,
  21. ??maxStars?=?3000;//星星数量
  22. var?canvas2?=?document.createElement('canvas'),
  23. ??ctx2?=?canvas2.getContext('2d');
  24. canvas2.width?=?100;
  25. canvas2.height?=?100;
  26. var?half?=?canvas2.width?/?2,
  27. ??gradient2?=?ctx2.createRadialGradient(half,?half,?0,?half,?half,?half);
  28. gradient2.addColorStop(0.025,?'#CCC');
  29. gradient2.addColorStop(0.1,?'hsl('?+?hue?+?',?61%,?33%)');
  30. gradient2.addColorStop(0.25,?'hsl('?+?hue?+?',?64%,?6%)');
  31. gradient2.addColorStop(1,?'transparent');
  32. ctx2.fillStyle?=?gradient2;
  33. ctx2.beginPath();
  34. ctx2.arc(half,?half,?half,?0,?Math.PI?*?2);
  35. ctx2.fill();
  36. //?End?cache
  37. function?random(min,?max)?{
  38. ??if?(arguments.length?<?2)?{
  39. ????max?=?min;
  40. ????min?=?0;
  41. ??}
  42. ??if?(min?>?max)?{
  43. ????var?hold?=?max;
  44. ????max?=?min;
  45. ????min?=?hold;
  46. ??}
  47. ??return?Math.floor(Math.random()?*?(max?-?min?+?1))?+?min;
  48. }
  49. function?maxOrbit(x,?y)?{
  50. ??var?max?=?Math.max(x,?y),
  51. ????diameter?=?Math.round(Math.sqrt(max?*?max?+?max?*?max));
  52. ??return?diameter?/?2;
  53. ??//星星移动范围,值越大范围越小,
  54. }
  55. var?Star?=?function()?{
  56. ??this.orbitRadius?=?random(maxOrbit(w,?h));
  57. ??this.radius?=?random(60,?this.orbitRadius)?/?8;
  58. ??//星星大小
  59. ??this.orbitX?=?w?/?2;
  60. ??this.orbitY?=?h?/?2;
  61. ??this.timePassed?=?random(0,?maxStars);
  62. ??this.speed?=?random(this.orbitRadius)?/?50000;
  63. ??//星星移动速度
  64. ??this.alpha?=?random(2,?10)?/?10;
  65. ??count++;
  66. ??stars[count]?=?this;
  67. }
  68. Star.prototype.draw?=?function()?{
  69. ??var?x?=?Math.sin(this.timePassed)?*?this.orbitRadius?+?this.orbitX,
  70. ????y?=?Math.cos(this.timePassed)?*?this.orbitRadius?+?this.orbitY,
  71. ????twinkle?=?random(10);
  72. ??if?(twinkle?===?1?&&?this.alpha?>?0)?{
  73. ????this.alpha?-=?0.05;
  74. ??}?else?if?(twinkle?===?2?&&?this.alpha?<?1)?{
  75. ????this.alpha?+=?0.05;
  76. ??}
  77. ??ctx.globalAlpha?=?this.alpha;
  78. ??ctx.drawImage(canvas2,?x?-?this.radius?/?2,?y?-?this.radius?/?2,?this.radius,?this.radius);
  79. ??this.timePassed?+=?this.speed;
  80. }
  81. for?(var?i?=?0;?i?<?maxStars;?i++)?{
  82. ??new?Star();
  83. }
  84. function?animation()?{
  85. ??ctx.globalCompositeOperation?=?'source-over';
  86. ??ctx.globalAlpha?=?0.5;?//尾巴
  87. ??ctx.fillStyle?=?'hsla('?+?hue?+?',?64%,?6%,?2)';
  88. ??ctx.fillRect(0,?0,?w,?h)
  89. ??ctx.globalCompositeOperation?=?'lighter';
  90. ??for?(var?i?=?1,?l?=?stars.length;?i?<?l;?i++)?{
  91. ????stars[i].draw();
  92. ??};
  93. ??window.requestAnimationFrame(animation);
  94. }
  95. animation();
  96. </script>
  97. </body>
  98. </html>

是不是很有趣呢?!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: