[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>CSS3 自制 loading 动画效果</title>
</head>
<body>
<style>
.loading-wrap {
position: fixed;
z-index: 100;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #eee;
line-height: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loading-circle {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
box-sizing: border-box;
}
.loading-circle-anim {
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
margin-top: -12px;
border-radius: 50%;
border: 2px solid #888;
box-sizing: border-box;
animation: loading 2s ease-out infinite;
}
.loading-circle-anim:after {
content: " ";
z-index: 1;
position: absolute;
background: #fff;
top: -5px;
left: 58%;
bottom: 0;
width: 50%;
height: 30px;
}
@keyframes loading {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(360deg);
}
100% {
transform: rotate(720deg);
}
}
</style>
<div class="loading-wrap">
<div class="loading-circle">
<div class="loading-circle-anim"></div>
</div>
</div>
</body>
</html> | 
发表于 2019-3-16 14:12
