[已解决]求助！实现太空中的火箭，流星的效果实现不了

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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

我解决了= =

跳转到最佳答案楼层

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

我解决了= =

账号		自动登录	找回密码
密码			立即注册