仅使用 CSS 使加载程序在 x 秒后消失

发布于 2025-01-13 09:18:20 字数 1260 浏览 6 评论 0原文

我去年12月开始学习HTML和CSS。现在，我必须仅使用 HTML 和 CSS，而不使用 Javascipt 或其他语言来完成一个项目。我已经满足了项目的所有要求，但现在已经过去 5 天了，我遇到了一个对你们许多人来说看起来很容易解决的问题。因此，当加载主页时，需要一个加载微调器（创建一个不是问题）。对我来说问题是让旋转器在 x 秒后消失）。我试了又试，但还没有成功。我的最后一次尝试如下，结果是：旋转器消失，但主页顶部覆盖了一个大的白色“面板”。这是html代码（相关区域）：

@keyframes spin {
    0% {
      transform: rotate(0deg);
      visibility:visible;
    }
    50%{
      transform: rotate(180deg);
      visibility:visible;
    }
    to {
      transform: rotate(360deg);
      visibility:hidden;
      display:none;
      height:0;
      width:0;

  }
}

@keyframes fade {
  from{
    opacity:1;
  }
  to{
    opacity:0;
    z-index:-100;
    display:none;
    height:0;
    width:0;
    clip-path:circle(0);/* rognage de la totalité donc disparition*/
  }
   }

@keyframes monanim {
from{
  overflow:hidden;
}
to{
  overflow:visible;
}
 }


.body {
  animation: monanim;
  animation-duration: 3s;
}

 <body class="body">

        <div class="parent__spinner">
            <div class="loading__spiner"></div>
        </div>

        <header class="header__index">

原文

i have started to learn HTML and CSS last december. Now, i have to finish a project using only HTML and CSS, no Javascipt or other languages. I have fullfilled all the requirements of the projects but it's now 5 days i am stuck on a problem which will look easy to solve for many of you. So, when the main page is loading, a loading spinner is required (creating one was not a problem). The problem for me is to make the spinner disappear after x seconds). i have tried and tried and tried and i did not succeed yet. my last attempt is bellow, the resultas are: the spinner disapear but a big white "panel" cover the top of the main page. here is the html code (the area concerned):

@keyframes spin {
    0% {
      transform: rotate(0deg);
      visibility:visible;
    }
    50%{
      transform: rotate(180deg);
      visibility:visible;
    }
    to {
      transform: rotate(360deg);
      visibility:hidden;
      display:none;
      height:0;
      width:0;

  }
}

@keyframes fade {
  from{
    opacity:1;
  }
  to{
    opacity:0;
    z-index:-100;
    display:none;
    height:0;
    width:0;
    clip-path:circle(0);/* rognage de la totalité donc disparition*/
  }
   }

@keyframes monanim {
from{
  overflow:hidden;
}
to{
  overflow:visible;
}
 }


.body {
  animation: monanim;
  animation-duration: 3s;
}

 <body class="body">

        <div class="parent__spinner">
            <div class="loading__spiner"></div>
        </div>

        <header class="header__index">

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

莫相离 2025-01-20 09:18:20

您可以尝试以下代码：

.parent__spinner{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    display:flex;
    justify-content:center;
    align-items: center;
    z-index: 1000;
    height: 100%;
    width: 100%;
    opacity:1;
    animation: fade;
    animation-duration: 0s;
    animation-delay:3s;
    animation-fill-mode: forwards;
    }


.loading__spiner{/*création du loader*/
  border: 20px solid white;
  border-top:20px solid $couleur-primaire;
  border-bottom: 20px solid $couleur-secondaire;
  border-radius: 50%;/*arrondi des angles*/
  width:100px;
  height:100px;
  margin: auto;/*placement milieu de page*/
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  left:0;
  animation-name:spin;
  animation-duration:3s;
  animation-fill-mode:forwards;
}

.body {
  font-family: 'roboto';
    
}

You can try the following code:

.parent__spinner{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    display:flex;
    justify-content:center;
    align-items: center;
    z-index: 1000;
    height: 100%;
    width: 100%;
    opacity:1;
    animation: fade;
    animation-duration: 0s;
    animation-delay:3s;
    animation-fill-mode: forwards;
    }


.loading__spiner{/*création du loader*/
  border: 20px solid white;
  border-top:20px solid $couleur-primaire;
  border-bottom: 20px solid $couleur-secondaire;
  border-radius: 50%;/*arrondi des angles*/
  width:100px;
  height:100px;
  margin: auto;/*placement milieu de page*/
  position:absolute;
  right:0;
  top:0;
  bottom:0;
  left:0;
  animation-name:spin;
  animation-duration:3s;
  animation-fill-mode:forwards;
}

.body {
  font-family: 'roboto';
    
}

回复收藏 0 原文

~没有更多了~