style="width: 100%; height: 100%; position: fixed; background-color: rgb(255, 255, 255); z-index: 807; top: 0px; opacity: 0.9; display: block;">
/*!Loading CSS*/
#contain {
width: 300px;
height: 100px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
opacity: 0;
animation: fadeIn 2s 1;
animation-fill-mode: forwards
}
.wrap {
animation: rotate 1000ms infinite ease-in-out alternate, zindex 2000ms infinite ease-in-out;
position: absolute;
z-index: 0
}
.part {
width: 100px;
height: 100px;
background: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.1) 65%, rgba(0, 0, 0, 0.1));
background-color: #e3746b;
border-radius: 50%;
animation: scale 1000ms infinite ease-in-out alternate;
animation-delay: -500ms;
transform: scale(0.5)
}
.part:after {
content: '';
width: 100px;
height: 10px;
background: #eee;
position: absolute;
top: 130px;
border-radius: 50%
}
#wrap2 {
animation-delay: -1000ms
}
#part2 {
background-color: #397bf9;
animation-delay: -1500ms
}
#wrap3 {
animation-delay: -1500ms
}
#part3 {
background-color: #f4b400;
animation-delay: -2000ms
}
#wrap4 {
animation-delay: -2500ms
}
#part4 {
background-color: #0f9d58;
animation-delay: -3000ms
}
@keyframes rotate {
100% {
transform: translateX(200px)
}
}
@keyframes scale {
100% {
transform: scale(1)
}
}
@keyframes zindex {
25% {
z-index: 1
}
75% {
z-index: -1
}
}
@keyframes fadeIn {
100% {
opacity: 1
}
}
修改时间 2019-03-30
真诚赞赏，手留余香
赞赏
952
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
