您现在的位置是:首页 > 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填满整个屏幕。
将加载程序设置为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图,只能看个大概,哈哈...
转载:
感谢您对蓝天个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源蓝天个人博客 http://www.along168.cn”。
上一篇:返回列表
相关文章
文章评论
- html+js
- 2020-03-08 14:14:25
首先,我们需要创建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图,只能看个大概,哈哈...

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