旋转的星空特效代码

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

是不是很有趣呢?!

 

发表评论

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