旋转的星空特效代码

  • 旋转的星空特效代码已关闭评论
  • 736 views
  • 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. 身体{ 背景：黑色; 填充：0 ; 保证金：0 ; 溢出：隐藏}
  8. 。标题{ margin ：0 auto ; 宽度：100 ％; 身高：100 ％; background - color ：＃000; position：relative;}
  9. </样式>
  10. </ HEAD>
  11. <BODY>
  12. <div class = “header” > <canvas id = “canvas” > </ canvas> </ div>
  13. <SCRIPT>
  14. var canvas = document 。getElementById （'canvas' ），
  15. ctx = 画布。getContext （'2d' ），
  16. w = 画布。width = window 。innerWidth ，
  17. h = 画布。高度= 窗口。innerHeight ，
  18. 色调= 217 ，
  19. stars = []，
  20. count = 0 ，
  21. maxStars = 3000 ; //星星数量
  22. var canvas2 = document 。createElement （'canvas' ），
  23. ctx2 = canvas2 。getContext （'2d' ）;
  24. canvas2 。宽度= 100 ;
  25. canvas2 。身高= 100 ;
  26. var half = canvas2 。宽度/ 2 ，
  27. gradient2 = ctx2 。createRadialGradient （半，一半，0 ，一半，一半，一半）;
  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 。弧（半，一半，一半，0 ，数学。PI * 2 ）;
  35. ctx2 。fill （）;
  36. //结束缓存
  37. 函数 random （min ，max ）{
  38. 如果（参数。长度< 2 ）{
  39. max = min ;
  40. min = 0 ;
  41. }
  42. if （min > max ）{
  43. var hold = max ;
  44. max = min ;
  45. min = hold ;
  46. }
  47. 返回数学。地板（数学。随机（）* （最大值- 最小+ 1 ））+ 分钟;
  48. }
  49. function maxOrbit （x ，y ）{
  50. var max = 数学。max （x ，y ），
  51. 直径= 数学。轮（数学。SQRT （最大* 最大+ 最大* 最大））;
  52. 返回直径/ 2 ;
  53. //星星移动范围，值越大范围越小，
  54. }
  55. var Star = function （）{
  56. 这个。orbitRadius = random （maxOrbit （w ，h ））;
  57. 这个。半径= 随机（60 ，此。orbitRadius ）/ 8 ;
  58. //星星大小
  59. 这个。orbitX = w / 2 ;
  60. 这个。轨道 Y = h / 2 ;
  61. 这个。timePassed = random （0 ，maxStars ）;
  62. 这个。速度= 随机（此。orbitRadius ）/ 50000 ;
  63. //星星移动速度
  64. 这个。阿尔法= 随机（2 ，10 ）/ 10 ;
  65. count ++;
  66. 星星[ count ] = 这个;
  67. }
  68. 明星。原型。draw = function （）{
  69. var x = 数学。罪（此。timePassed ）* 此。orbitRadius + 这个。轨道 X ，
  70. y = 数学。COS （此。timePassed ）* 此。orbitRadius + 这个。轨道 Y ，
  71. twinkle = random （10 ）;
  72. 如果（闪烁=== 1 && 此。阿尔法> 0 ）{
  73. 这个。alpha - = 0.05 ;
  74. } 否则如果（闪烁=== 2 && 此。阿尔法< 1 ）{
  75. 这个。alpha + = 0.05 ;
  76. }
  77. ctx 。globalAlpha = this 。阿尔法;
  78. ctx 。的 drawImage （canvas2 ，X - 此。半径/ 2 ，ý - 此。半径/ 2 ，此。半径，此。半径）;
  79. 这个。timePassed + = 这个。速度;
  80. }
  81. for （var i = 0 ; i < maxStars ; i ++）{
  82. 新的星（）;
  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 ，瓦特，ħ ）
  89. ctx 。globalCompositeOperation = '打火机' ;
  90. 为（VAR 我= 1 ，升= 分。长度; 我< 升; 我++）{
  91. 星星[ i ]。draw （）;
  92. };
  93. 窗口。requestAnimationFrame （动画）;
  94. }
  95. 动画（）;
  96. </ SCRIPT>
  97. </ BODY>

是不是很有趣呢？！

 

唯心寒辞