Hant 发表于 2020-11-3 16:15:09

求助！实现太空中的火箭，流星的效果实现不了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      * {
            margin: 0;
            padding: 0;
      }
      img {
            width: 200px;
      }
      .box {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(22,67,144);
      }
      .rocket {
            position: relative;
            animation: shake 0.5s linear infinite ;
      }
      @keyframes shake {
            0%,100% {
                transform: translateY(2px);
            }
            50% {
                transform: translateY(-2px);
            }
      }
      .rocket::after {
            content: '';
            width: 10px;
            height: 150px;
            background:linear-gradient(rgb(178, 178, 235),transparent);
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin-left: 5px;
            bottom: -110px;
      }
      .box i{
            width: 1px;
            height: 20px;
            position: absolute;
            left :20px;
            top :0px;
            background: white;
            animation: line 2s linear infinite ;
            }
            @keyframes line {
                from{
                  transform: translateY(0);
                }
                to {
                  transform: translateY(90vh);
                }
            }

    </style>
</head>
<body>
    <div class="box">
      <div class="rocket">
            <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=282265150,2776916218&fm=26&gp=0.jpg" alt="">

      </div>
      <i></i>
    </div>
    <script>
      function rand(m,n){
         return Math.ceil(Math.random()*(m-n+1))+m-1;
         }
      
      
      let num = 40;
      for (let i=0;i<num;i++){
            const i = document.createElement('i');
            i.style.height = rand(30,100) +'px';
            i.style.left = rand(1,99)+'vw';
            i.style.animationDuration = rand(5,30)/10 +'s';
            document.querySelector('.box').appendChild(i);
      }
      
    </script>
</body>
</html>

Hant 发表于 2020-11-3 17:11:55

我解决了= =
页: [1]
查看完整版本: 求助！实现太空中的火箭，流星的效果实现不了