手写转圈圈效果
2021-04-21 本文已影响0人
肥羊猪
// html
<div class="loading-content">
<div class="loading-dot"></div>
<div class="loading-dot"></div>
<div class="loading-dot"></div>
</div>
// css
.loading-content {
display: flex;
justify-content: center;
.loading-dot {
width: 20px;
height: 20px;
background: #8385aa;
border-radius: 50%;
margin: 150px 10px;
animation: bouncing-animate 0.6s infinite alternate;
&:nth-child(2) {
animation-delay: 0.2s;
}
&:nth-child(3) {
animation-delay: 0.4s;
}
}
}
@keyframes bouncing-animate {
to {
opacity: 0.1;
transform: translate3d(0, -50px, 0);
}
}
// html
<div class="donut"></div>
// css
.donut {
width: 30px;
height: 30px;
border-radius: 50%;
border: 4px solid rgba(0,0,0,0.1);
margin: 30px;
border-left-color: #7983ff;
animation: donut-spin 1.2s linear infinite;
}
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<head>
<meta charset="UTF-8">
<title>loading</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 8rem;
height: 8rem;
position: absolute;
z-index: 0;
}
.box:nth-of-type(2) {
transform: rotate(45deg);
}
.box div {
width: 1.5rem;
height: 1.5rem;
background: #f2f5c4;
border: 1px solid #333;
border-radius: 50%;
position: absolute;
animation: run 1.5s infinite linear;
}
.box div:nth-of-type(1) {
/*左上*/
left: 0;
top: 0;
}
.box div:nth-of-type(2) {
/*右上*/
right: 0;
top: 0;
}
.box div:nth-of-type(3) {
/*左下*/
left: 0;
bottom: 0;
}
.box div:nth-of-type(4) {
/*右下*/
right: 0;
bottom: 0;
}
/*动画效果*/
@keyframes run {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
/*延迟动画效果 负值是解决蹦动的效果*/
.box:nth-of-type(1) div:nth-of-type(1) {
animation-delay: -0.1s;
}
.box:nth-of-type(2) div:nth-of-type(1) {
animation-delay: -0.3s;
}
.box:nth-of-type(1) div:nth-of-type(2) {
animation-delay: -0.5s;
}
.box:nth-of-type(2) div:nth-of-type(2) {
animation-delay: -0.7s;
}
.box:nth-of-type(1) div:nth-of-type(3) {
animation-delay: -0.9s;
}
.box:nth-of-type(2) div:nth-of-type(3) {
animation-delay: -1.1s;
}
.box:nth-of-type(1) div:nth-of-type(4) {
animation-delay: -1.3s;
}
.box:nth-of-type(2) div:nth-of-type(4) {
animation-delay: -1.5s;
}
.loadding_box {
height: 22.5rem;
width: 22.5rem;
margin: 0 auto;
position: relative;
}
.bg_img {
position: absolute;
z-index: 10;
}
.bg_img img {
height: 100%;
}
.loading_d {
position: absolute;
left: 9rem;
top: 2rem;
}
</style>
</head>
<body>
<div class="loadding_box">
<div class="loading_d">
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="bg_img">
<img src="./fnloading.png" alt="" srcset="">
</div>
</div>
</body>
</html>
