布满星星的天空原创

深处莫神

发布于 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>

©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任

分类

其他

标签