.loadpage {
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
background:#fff;
z-index:999;
}
.load {
width:200px;
height:200px;
position:fixed;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}
.load p {
width:100%;
color:red;
position:absolute;
bottom:-200px;
left:0;
text-align:center;
}
.load:before {
content:'';
display:block;
width:10px;
height:200px;
background:#f5f5f5;
position:absolute;
left:50%;
margin-left:-5px;
top:50%;
}
.load:after {
content:'';
display:block;
width:8px;
height:8px;
border:8px solid #fff;
position:absolute;
left:50%;
top:50%;
margin-left:-12px;
margin-top:-12px;
border-radius:50%;
z-index:10;
}
.load .fan {
width:50px;
height:100px;
overflow:hidden;
position:absolute;
z-index:9;
background:#35ada3;
-webkit-animation:zhuan 2s linear infinite;
animation:zhuan 2s linear infinite;
}
.load .fan:before {
content:'';
display:block;
position:absolute;
width:100px;
height:100px;
background:#bc413c;
overflow:hidden;
box-shadow:0 0 2px 4px rgba(0,0,0,0.1) inset;
}
.load .fan:nth-of-type(1) {
left:50px;
top:0;
border-radius:60px 0 0 0;
-webkit-transform-origin:50px 100px;
transform-origin:50px 100px;
}
.load .fan:nth-of-type(1):before {
border-radius:60px 0 0 240px;
}
.load .fan:nth-of-type(2) {
width:100px;
height:50px;
left:50%;
top:50px;
border-radius:0 60px 0 0;
background:#f2c757;
-webkit-transform-origin:0 50px;
transform-origin:0 50px;
}
.load .fan:nth-of-type(2):before {
border-radius:240px 60px 0 0;
}
.load .fan:nth-of-type(3) {
left:50%;
top:50%;
border-radius:0 0 60px 0;
-webkit-transform-origin:0 0;
transform-origin:0 0;
}
.load .fan:nth-of-type(3):before {
left:-50px;
border-radius:0 240px 60px 0;
}
.load .fan:nth-of-type(4) {
width:100px;
height:50px;
left:0;
top:50%;
border-radius:0 0 0 60px;
background:#f2c757;
-webkit-transform-origin:100px 0;
transform-origin:100px 0;
}
.load .fan:nth-of-type(4):before {
top:-50px;
border-radius:0 0 250px 60px;
}
@-webkit-keyframes zhuan {
0% {
transform:rotate(0deg)
}
to {
transform:rotate(-1turn)
}
}@keyframes zhuan {
0% {
transform:rotate(0deg)
}
to {
transform:rotate(-1turn)
}
}更新时间:2021-01-13 22:52:03
此风车效果,用到了css3的自定义动画、旋转、圆角、阴影效果来实现