您现在的位置是:首页 > WEB > html+csshtml+css

CSS实现一个等待加载器

阿龙2019-06-20【html+css】人已围观

简介纯css实现加载器的全过程。

首先,我们需要创建3个点,以创建一个加载器。
<div class = "loader">  
    <div></div>
    <div></div>
    <div></div>
</div>

添加一些CSS以使div填满整个屏幕。

将加载程序设置为flex-box并将加载程序中的所有div设置为

  • 中心垂直使用 align-items: center
  • 水平使用中心 justify-content: center;
body {
margin : 0;  
}
loader {
width : 100vw;
height : 100vh;
display : flex;
justify-content: center; 
align-items : center; 
}
现在,通过将边界半径设置为50%,将所有div转换为点或圆形;
loader > div {
width: 20px;
height: 20px;
background: #8385aa;
border-radius: 50%;
margin : 3px;
}

现在让我们使用关键帧添加动画。在关键帧中,我们定义to动画的状态(完成状态)。

在这个to状态下,我们将动画定义为要翻译的div x -20px和不透明度,0以便它产生淡化效果。

@keyframes loader {
to {
opacity: 0.1;
transform: translate(0, -20px);
background : pink;
}
}
现在将动画添加到加载器内的div。还要为每个div添加延迟,使其看起来很棒。
.loader > div {
width: 20px;
height: 20px;
background: #8385aa;
border-radius: 50%;
margin : 3px;
animation: loader 0.6s infinite alternate;
}

.loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.loader > div:nth-child(3) {
animation-delay: 0.4s;
}
就是我们在css中开发了一个超级简单的加载器。不会弄gif图,只能看个大概,哈哈...

Tags:html   css

支持一下! ()

文章评论

    共有条评论大侠,来闹两句...

    请输入昵称:

    填入验证码:

打赏本站

  • 如果您觉得站长文章不错,可以通过扫码支付打赏一下哦!
  • 微信扫码:您说多少就多少~
  • 支付宝扫码:您说多少就多少~