这篇博客介绍了如何利用CSS创建一个在页面加载期间显示的loading动画。通过设置伪类`::before`和`::after`，配合关键帧动画`@keyframes`，实现了两个圆点从小到大的渐隐渐现效果。当页面加载完成，通过JavaScript移除`.active`类，隐藏loading动画，展示页面内容。
在页面未加载完之前显示loading动画
loading动画代码demo
use-pseudo-class.loading{
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
}
.loading::before,.loading::after{
content: '';
/*这里要加一个content,不然什么都没有*/
position: absolute;
width: 10px;
height: 10px;
background: #000;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: toBig 1.5s linear infinite;
}
.loading::after{
animation-delay: 0.75s;
/*background-color: red;*/
}
@keyframes toBig {
0%{
width: 0;
height: 0;
opacity: 1;
}
100%{
width: 50px;
height:50px;
opacity: 0;
}
}
加入到实际页面的使用方法
loading动画.loading{
width: 100px;
height: 100px;
/*border: 1px solid red;*/
position: relative;
}
.loading::before,.loading::after{
content: '';
/*这里要加一个content,不然什么都没有*/
position: absolute;
width: 0;
height: 0;
background: #000;
border-radius: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: toBig 1s linear infinite;
}
.loading::after{
animation-delay: 0.5s;
/*background-color: red;*/
}
@keyframes toBig {
0%{
width: 0;
height: 0;
opacity: 1;
}
100%{
width: 50px;
height:50px;
opacity: 0;
}
}
.site-welcome{
display: none;
justify-content:center;
align-items:center;
/*里面内容居中使用flex在父元素添加三行代码display:flex;justify-content:center;
align-items:center;*/
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*上面四行代码,让这个fixed铺满整个画面*/
background-color: #ccc;
z-index: 1;
}
.site-welcome.active{
display:flex;
}
//.
//.
//.
//这里是其他代码
//当代码加载到这里的时候,执行这个script,当代码加载到这里,说明loading该结束了
window.οnlοad=function(){
var siteWelcome = document.getElementById('siteWelcome');
siteWelcome.classList.remove('active');
}
扫一扫
1451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
