您现在的位置是:首页 > IT分类 > html+js网站首页html+jsCSS实现一个等待加载器

CSS实现一个等待加载器

  • 蓝天
  • html+js
  • 2020-03-08 14:14:25
简介首先,我们需要创建3个点,以创建一个加载器<div class = "loader"> <div></div> <div></div> <div></div></div>添加一些CSS以使div填满整个屏幕。将加载程序设置为
首先,我们需要创建3个点,以创建一个加载器
<div class = "loader">  
    <div></div>
    <div></div>
    <div></div>
</div>

添加一些CSS以使div填满整个屏幕。RS9蓝天个人博客-一个自学的好博客

将加载程序设置为flex-box并将加载程序中的所有div设置为RS9蓝天个人博客-一个自学的好博客

  • 中心垂直使用 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动画的状态(完成状态)。RS9蓝天个人博客-一个自学的好博客

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

@keyframes loader {
to {
opacity: 0.1;
transform: translate(0, -20px);
background : pink;
}
}

现在将动画添加到加载器内的div。还要为每个div添加延迟,使其看起来很棒。RS9蓝天个人博客-一个自学的好博客

.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图,只能看个大概,哈哈...RS9蓝天个人博客-一个自学的好博客
RS9蓝天个人博客-一个自学的好博客

转载: 感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.”。

文章评论

联系方式