效果预览：效果预览
源码下载：关注公众号【RMRF】，回复【css8】可获取源码
一、HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>loading-2</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="modal">
<div class="loading">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
<div class="item8"></div>
<div class="item9"></div>
<div class="item10"></div>
<div class="item11"></div>
<div class="item12"></div>
</div>
</div>
</body>
</html>
二、CSS样式
* {
padding: 0px;
margin: 0px;
}
.modal {
position: relative;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
background: #202020;
}
.loading div {
position: absolute;
width: 5px;
height: 20px;
border-radius: 5px;
background: #ff8f34;
animation: loading 1s linear infinite;
}
@keyframes loading {
from {
opacity: 1;
}
to {
opacity: 0.15;
}
}
.loading .item1 {
transform: rotate(0deg) translate(0, -120%);
animation-delay: 0s;
}
.loading .item2 {
transform: rotate(30deg) translate(0, -120%);
animation-delay: -1.1s;
}
.loading .item3 {
transform: rotate(60deg) translate(0, -120%);
animation-delay: -1s;
}
.loading .item4 {
transform: rotate(90deg) translate(0, -120%);
animation-delay: -0.9s;
}
.loading .item5 {
transform: rotate(120deg) translate(0, -120%);
animation-delay: -0.8s;
}
.loading .item6 {
transform: rotate(150deg) translate(0, -120%);
animation-delay: -0.7s;
}
.loading .item7 {
transform: rotate(180deg) translate(0, -120%);
animation-delay: -0.6s;
}
.loading .item8 {
transform: rotate(210deg) translate(0, -120%);
animation-delay: -0.5s;
}
.loading .item9 {
transform: rotate(240deg) translate(0, -120%);
animation-delay: -0.4s;
}
.loading .item10 {
transform: rotate(270deg) translate(0, -120%);
animation-delay: -0.3s;
}
.loading .item11 {
transform: rotate(300deg) translate(0, -120%);
animation-delay: -0.2s;
}
.loading .item12 {
transform: rotate(330deg) translate(0, -120%);
animation-delay: -0.1s;
}
