布满星星的天空原创

深处莫神

发布于 2022-8-15 12:10

浏览

0收藏

布满星星的天空-鸿蒙开发者社区

星星天空

思路：
1.设置随机大小，随机阴影，随机颜色，但是颜色范围在已给的范围内选择，随机位置
2.设置定时器进行运动，定时器设置一个单次比较快，一个多次的，运行比较慢，二者进行叠加运动，每次运动都随机获取位置

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    body {
      background: #22313f;
      /* background: blue; */
    }

    #starsBox {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.75);
      opacity: .5;
    }

    #starsBox span {
      display: inline-block;
      width: auto;
      position: absolute;
      border-radius: 100%;
      transition: 100s linear;
    }

    p {
      position: fixed;
      top: 50%;
      left: 0;
      right: 0;
      text-align: center;
      transform: translateY(-50%);
      font-size: 40px;
      font-weight: 900;
      color: white;
      text-shadow: 0 0 50px black;
      text-transform: uppercase;
      font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
      letter-spacing: 5px;
    }

    p>span {
      display: block;
      font-size: 12px;
      color: #bdc3c7;
      margin-top: 30px;
      font-weight: 100;
      text-shadow: 0 0 50px black;
      letter-spacing: 3px;
    }

    p>span>a {
      font-weight: 700;
      text-decoration: none;
      color: #d64541;
      padding-bottom: 2px;
      border-bottom: 0px solid #d64541;
      transition: 0.5s;
    }

    p>span>a:hover {
      padding-bottom: 5px;
      border-bottom: 2px solid #d64541;
    }
  </style>
</head>

<body>
  <div id="starsBox"></div>
  <p>布满星星的天空</p>
</body>

</html>
<script src="./jquery-1.9.1.min.js"></script>
<script>
  //给星不同的颜色
  var cols = ['#f5d76e', '#f7ca18', '#f4d03f', '#ececec', '#ecf0f1', '#a2ded0'];

  //规定数量
  var start = 250

  for (var i = 0; i < start; i++) {
    //大小随机 1 ~ 5 星大小
    var size = Math.ceil(Math.random() * 5)

    //随机颜色
    var color = cols[Math.floor(Math.random() * cols.length)]

    //随机阴影
    var shadow = Math.ceil(Math.random() * 10)

    // 随机位置
    var x = Math.random() * 100
    var y = Math.random() * 100

    $("#starsBox").append(`<span style="width:${size}px;height:${size}px;background:${color};box-shadow:0 0 ${shadow}px ${color};left:${x}%;top:${y}%"></span>`)
  }

  //快
  setTimeout(function () {
    $("#starsBox span").each(function () {
      //生成新的位置
      var x = Math.random() * 100
      var y = Math.random() * 100

      $(this).css({
        left: `${x}%`,
        top: `${y}%`
      })

    })
  }, 1)

  //慢
  setInterval(function () {
    $("#starsBox span").each(function () {
      //生成新的位置
      var x = Math.random() * 100
      var y = Math.random() * 100

      $(this).css({
        left: `${x}%`,
        top: `${y}%`
      })

    })
  }, 100000)

</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.

分类

其他

标签

51CTO

51CTO博客

51CTO学堂

布满星星的天空原创

星星天空

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

布满星星的天空 原创

星星天空

目录

订阅鸿蒙技术特刊，精选内容抢先看

布满星星的天空原创