1、HTML代码
<div id="loading">
<div class="hover" id="circle">
<div class="right load"></div>
<div class="left load"></div>
</div>
<img src="http://xcximg.luzhuoquan.com/official/loading.png" alt="加载中…" class="load-img" />
</div>
2、CSS代码
#loading {
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #fff;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
.load-img {
width: 120px;
height: 120px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#circle {
width: 120px;
height: 120px;
border-width: 0;
clip: rect(0px, 120px, 120px, 60px);
position: absolute;
left: 50%;
top: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.load {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid #008c96;
box-sizing: border-box;
z-index: 2;
}
#circle .left,
#circle .right {
border-right-color: rgba(0, 0, 0, 0);
border-bottom-color: rgba(0, 0, 0, 0);
transform: rotate(-45deg);
}
#circle .left {
border-left: 2px solid #008c96;
border-top: 2px solid #008c96;
animation: left-animation 1s linear;
}
@keyframes left-animation {
0% {
transform: rotate(-45deg);
}
50% {
transform: rotate(135deg);
}
100% {
transform: rotate(315deg);
}
}
#circle .right {
border-left: 2px solid #008c96;
border-top: 2px solid #008c96;
animation: right-animation 1s linear;
}
@keyframes right-animation {
0% {
transform: rotate(-45deg);
}
50% {
transform: rotate(135deg);
}
100% {
transform: rotate(135deg);
}
}
#circle.hover {
animation: circle-animation 1s linear;
}
@keyframes circle-animation {
0% {
clip: rect(0px, 200px, 200px, 100px);
}
100% {
clip: auto;
}
}
3、效果图: