简易html满天星效果

源ing

已于 2024-01-09 17:23:43 修改

阅读量572

点赞数 16

文章标签： html 前端

于 2024-01-04 09:47:12 首次发布

本文链接：https://blog.csdn.net/QY_ing/article/details/135378671

版权

看到他们写的html动画效果挺炫酷的，我就试着去写了一个简单星星的效果

html部分

    <div id="box"></div>
    <div class="lxybox">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

css部分

      * {
        margin: 0;
        padding: 0;
      }
      html {
        height: 100%;
        width: 100%;
      }
      body {
        background-image: url("https://img1.baidu.com/it/u=4020737096,1188815710&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: hidden;
      }
      #box {
        position: absolute;
        top: 0;
        left: 0;
      }
      .dian {
        width: 4px;
        height: 4px;
        position: absolute;
        top: 0;
        left: 0px;
        border-radius: 50%;
        background-color: white;
      }
      @keyframes yd {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }

      .lxybox {
        width: 100%;
        height: 800px;
        position: relative;
        left: 0;
        top: 0;
        overflow: hidden;
      }

      .line {
        width: 1px;
        background-color: white;
        position: absolute;
        top: 0;
        left: 0;
      }
      @keyframes lxy {
        0% {
          transform: rotate(45deg) translateY(-400px);
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        to {
          transform: rotate(45deg) translateY(100px);
          opacity: 0;
        }
      }

这里的animation动画我写在了js部分，下面会展示

js部分

      var oBox = document.getElementById("box");
      //   获取流星雨
      var lineArr = document.querySelectorAll(".line");
      // 创建新的子元素
      var childElement = document.createElement("div");
      for (let index = 0; index < 100; index++) {
        //添加多个子元素
        childElement.innerHTML += `<div class="dian"></div>`;
      }
      // 将子元素添加到父元素中
      oBox.appendChild(childElement);
      var dianArr = document.querySelectorAll(".dian");

      //   星星
      function setStar() {
        for (let index = 0; index < 100; index++) {
          //可以更改数量
          let left = Math.round(Math.random() * window.innerWidth);
          let topdian = Math.round(Math.random() * window.innerHeight);
          let scds = Math.random() * 1;
          let xxWH = Math.random() * (4 - 1 + 1) + 1; // 随机星星的宽高
          dianArr[index].style.left = left + "px"; //每个元素的位置和动画
          dianArr[index].style.top = topdian + "px";
          dianArr[index].style.height = xxWH + "px";
          dianArr[index].style.width = xxWH + "px";
          dianArr[index].style.animation = `yd .8s linear ${scds}s infinite`;
        }
      }

      //   流星雨
      function setMeteor() {
        for (let index = 0; index < lineArr.length; index++) {
          let left = Math.round(Math.random() * window.innerWidth);
          let topdian = Math.round(Math.random() * window.innerHeight);
          let scds = Math.random() * (2 - 1 + 1) + 1;
          let height = Math.floor(Math.random() * (100 - 10 + 10) + 10);
          lineArr[index].style.left = left + "px";
          lineArr[index].style.top = topdian + "px";
          lineArr[index].style.height = height + "px";

          lineArr[index].style.animation = `lxy linear ${scds}s infinite`;
        }
      }
      setMeteor();
      setStar();

      //document对象事件监听--鼠标移动
      document.onmousemove = function (e) {
        //更改样式
        setStar();
        setMeteor();
      };

这里是监听的的鼠标移动事件改编星星的样式动画，如，位置，长，宽。动画时间

完整代码如下

创建一个index.html 文件，复制下列代码到该文件保存后，双击或右击该文件，即可运行

<!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>满天星</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html {
        height: 100%;
        width: 100%;
      }
      body {
        background-image: url("https://img1.baidu.com/it/u=4020737096,1188815710&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        overflow: hidden;
      }
      #box {
        position: absolute;
        top: 0;
        left: 0;
      }
      .dian {
        width: 4px;
        height: 4px;
        position: absolute;
        top: 0;
        left: 0px;
        border-radius: 50%;
        background-color: white;
      }
      @keyframes yd {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        to {
          opacity: 0;
        }
      }

      .lxybox {
        width: 100%;
        height: 800px;
        position: relative;
        left: 0;
        top: 0;
        overflow: hidden;
      }

      .line {
        width: 1px;
        background-color: white;
        position: absolute;
        top: 0;
        left: 0;
      }
      @keyframes lxy {
        0% {
          transform: rotate(45deg) translateY(-400px);
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        to {
          transform: rotate(45deg) translateY(100px);
          opacity: 0;
        }
      }
    </style>
  </head>

  <body>
    <div id="box"></div>
    <div class="lxybox">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>

    <script>
      var oBox = document.getElementById("box");
      //   获取流星雨
      var lineArr = document.querySelectorAll(".line");
      // 创建新的子元素
      var childElement = document.createElement("div");
      for (let index = 0; index < 100; index++) {
        //添加多个子元素
        childElement.innerHTML += `<div class="dian"></div>`;
      }
      // 将子元素添加到父元素中
      oBox.appendChild(childElement);
      var dianArr = document.querySelectorAll(".dian");

      //   星星
      function setStar() {
        for (let index = 0; index < 100; index++) {
          //可以更改数量
          let left = Math.round(Math.random() * window.innerWidth);
          let topdian = Math.round(Math.random() * window.innerHeight);
          let scds = Math.random() * 1;
          let xxWH = Math.random() * (4 - 1 + 1) + 1; // 随机星星的宽高
          dianArr[index].style.left = left + "px"; //每个元素的位置和动画
          dianArr[index].style.top = topdian + "px";
          dianArr[index].style.height = xxWH + "px";
          dianArr[index].style.width = xxWH + "px";
          dianArr[index].style.animation = `yd .8s linear ${scds}s infinite`;
        }
      }

      //   流星雨
      function setMeteor() {
        for (let index = 0; index < lineArr.length; index++) {
          let left = Math.round(Math.random() * window.innerWidth);
          let topdian = Math.round(Math.random() * window.innerHeight);
          let scds = Math.random() * (2 - 1 + 1) + 1;
          let height = Math.floor(Math.random() * (100 - 10 + 10) + 10);
          lineArr[index].style.left = left + "px";
          lineArr[index].style.top = topdian + "px";
          lineArr[index].style.height = height + "px";

          lineArr[index].style.animation = `lxy linear ${scds}s infinite`;
        }
      }
      setMeteor();
      setStar();
       // 移动鼠标就变换效果有点影响体检
       // 改成了鼠标左键按下拖动鼠标变换
      let flag = false;
      document.onmousedown = function (e) { //鼠标按下
        flag = true;
        //更改样式
      };
      //document对象事件监听--鼠标移动
      document.onmousemove = function (e) { 
        //更改样式
        if (flag) {
          setStar();
          setMeteor();
        }
      };
      document.onmouseup = function (e) {  //鼠标抬起
        flag = false;
      };
    </script>
  </body>
</html>

祝大家新年快乐！可能迟了点~~嘿