js实现漂亮的星空背景

前端之家收集整理的这篇文章主要介绍了js实现漂亮的星空背景前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了js实现漂亮星空背景的具体代码,供大家参考,具体内容如下

HTML代码

  1. <div class="stars"></div>

css代码

  1. html,body {
  2. height: 100%;
  3. overflow: hidden;
  4. }
  5.  
  6. body {
  7. width: 100%;
  8. height:100%;
  9. background: #000;
  10. background-size: 100%;
  11. perspective: 500px;
  12.  
  13. }
  14. .stars {
  15. position: absolute;
  16. top: 50%;
  17. left: 50%;
  18. width: 4px;
  19. height:4px;
  20. -webkit-border-radius:50%;
  21. -moz-border-radius:50%;
  22. border-radius:50%;
  23. animation: fly 2s linear infinite;
  24. transform-style: preserve-3d;
  25. }
  26. .stars:before,.stars:after {
  27. content: "";
  28. position: absolute;
  29. width: inherit;
  30. height: inherit;
  31. Box-shadow: inherit;
  32. }
  33. .stars:before {
  34. transform: translateZ(-300px);
  35. opacity: .6;
  36. }
  37. .stars:after {
  38. transform: translateZ(-600px);
  39. opacity: .4;
  40. }
  41.  
  42. @keyframes fly {
  43. from {
  44. transform: translateZ(0px);
  45. opacity: .6;
  46. }
  47. to {
  48. transform: translateZ(300px);
  49. opacity: 1;
  50. }
  51. }

js代码

  1. var w = document.documentElement.clientWidth*1.2;
  2. var h = document.documentElement.clientHeight*1.2;
  3. var star = document.getElementsByClassName("stars")[0];
  4. var n = 1000;
  5. //随机函数
  6. function randomNum(m,n) {
  7. return Math.floor(Math.random() * (n - m + 1) + m);
  8. }
  9. var str = '';
  10. for (var i = 0; i < n; i++) {
  11. var numX = randomNum(-w,w);
  12. var numY = randomNum(-h,h);
  13. var color = 'rgb(' + randomNum(0,255) + ',' + randomNum(0,255) + ')';
  14. str += numX +'px'+' ' + numY+'px'+' '+ color+',';
  15. }
  16. str = str.slice(0,-1);
  17. star.style.BoxShadow = str;
  18.  
  19. $(function(){
  20.  
  21. $('#main').fadeOut();
  22.  
  23. $('#main').fadeIn('slow');
  24.  
  25. })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的JavaScript相关文章