Question

基本上，我已经为我的网站创建了加载程序和徽标。但是，我的徽标出现了问题，该徽标位于网站顶部。徽标没有响应。我希望徽标位于网站的顶部中间，但是，当有人在其窗口屏幕上查看徽标时，徽标会移到中间以外的其他位置。我尝试添加一个显示：flex;并证明内容合理；在我的负载类上，但它不起作用，并且3D效果消失了。我如何防止徽标移动，而不管某人的窗户大小如何使其停留在顶部中间？任何帮助，将不胜感激。谢谢。这是我的代码。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
  <div class="load">
    <p id = "spinner">M</p>
    <div class="container">
        <div class="loader">
          <div class="loader">
            <div class="loader">
              <div class="loader">
                <div class="loader">
                  <div class="loader">
                    <div class="loader">
                      <div class="loader">
                        <div class="loader">
                          <div class="loader">
                            <div class="loader">
                              <div class="loader">
                                <div class="loader">
                                  <div class="loader">
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> 
   </div>
</body>
</html>

CSS

    body{
    background: #21312F;
}
 
.container{
    position: absolute;
    height: 400px;
    width: 200px;
    top: 20%;
    left: 43%;
}
 
.loader{
    height: 95%;
    width: 95%;
    margin: 2.5%;
    border-top: 3px solid #49D49F;
    border-bottom: 3px solid #FF6542;
    border-radius: 50%;
    animation: 30s rotate linear infinite;
}

.load {
    width: 100%;
    position: fixed;
    height: 100vh;
    z-index: 99;
    overflow: hidden;
    background: #21312F;
  }

 
@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(810deg);
    }
}
 

 
#spinner{
    font-size: 50px;
    text-align: center;
    animation-name: spin, depth;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 3s;
    transform-style: preserve-3d;
    position: relative;
    top: 20px;
    left: -40px;
    color: #49D49F;
    font-family: 'Hind', sans-serif;
    margin: 0 auto;
}
 
 
#spinner::before, #spinner::after{
    content: "M";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    transform: rotateY(0.5deg);
    transform-origin: 0 50%;
    color: #FF6542;
}
 
#spinner::after{
    
    transform: rotateY(-0.5deg);
    transform-origin: 100% 50%;
 
}
 
@keyframes spin{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(-360deg)
    }
}
 
@keyframes depth {
    0% { text-shadow: 0 0 black; }
    25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black, 6px 0 black; }
    50% { text-shadow: 0 0 black; }
    75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black, -6px 0 black; }
    100% { text-shadow: 0 0 black; }
  }

Answer 1

我不确定，但是您想要这样吗？：

body{
      margin: 0;
      padding: 0;
        background: #21312F;
    }
    
    .container{
        position: absolute;
        height: 400px;
        width: 200px;
        top: 20%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .loader{
        height: 95%;
        width: 95%;
        margin: 2.5%;
        border-top: 3px solid #49D49F;
        border-bottom: 3px solid #FF6542;
        border-radius: 50%;
        animation: 30s rotate linear infinite;
    }

    .load {
        width: 100%;
        position: fixed;
        height: 100vh;
        z-index: 99;
        overflow: hidden;
        background: #21312F;
      }

    
    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(810deg);
        }
    }
    

    
    #spinner{
        font-size: 50px;
        text-align: center;
        animation-name: spin, depth;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-duration: 3s;
        transform-style: preserve-3d;
        position: relative;
        top: 20px;
        color: #49D49F;
        font-family: 'Hind', sans-serif;
        margin: 0 auto;
    }
    
    
    #spinner::before, #spinner::after{
        content: "M";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        transform: rotateY(0.5deg);
        transform-origin: 0 50%;
        color: #FF6542;
    }
    
    #spinner::after{
        
        transform: rotateY(-0.5deg);
        transform-origin: 100% 50%;
    
    }
    
    @keyframes spin{
        from{
            transform: rotateY(0deg);
        }
        to{
            transform: rotateY(-360deg)
        }
    }
    
    @keyframes depth {
        0% { text-shadow: 0 0 black; }
        25% { text-shadow: 1px 0 black, 2px 0 black, 3px 0 black, 4px 0 black, 5px 0 black, 6px 0 black; }
        50% { text-shadow: 0 0 black; }
        75% { text-shadow: -1px 0 black, -2px 0 black, -3px 0 black, -4px 0 black, -5px 0 black, -6px 0 black; }
        100% { text-shadow: 0 0 black; }
      }

<body>
  <div class="load">
    <p id = "spinner">M</p>
    <div class="container">
        <div class="loader">
          <div class="loader">
            <div class="loader">
              <div class="loader">
                <div class="loader">
                  <div class="loader">
                    <div class="loader">
                      <div class="loader">
                        <div class="loader">
                          <div class="loader">
                            <div class="loader">
                              <div class="loader">
                                <div class="loader">
                                  <div class="loader">
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> 
   </div>
</body>

如何使我的徽标在网站顶部具有响应性？

1 个答案: