You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
3.1 KiB
199 lines
3.1 KiB
5 years ago
|
@charset "utf-8";
|
||
|
/* CSS Document */
|
||
|
|
||
|
.bangumi_loading{
|
||
|
padding:100px 0;
|
||
|
}
|
||
|
.bangumi_loading_text{
|
||
|
text-align:center;
|
||
|
padding:10px 0;
|
||
|
}
|
||
|
.loading-overlay {
|
||
|
position: absolute;
|
||
|
top: 0;
|
||
|
left: 0;
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
background-color: rgba(255, 255, 255, 0);
|
||
|
transition: background-color .2s ease-out;
|
||
|
}
|
||
|
|
||
|
.loading-anim {
|
||
|
position: relative;
|
||
|
width: 200px;
|
||
|
height: 200px;
|
||
|
margin: auto;
|
||
|
perspective: 800px;
|
||
|
transform-style: preserve-3d;
|
||
|
transform: translateZ(-100px) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) scale(0.5);
|
||
|
opacity: 0;
|
||
|
transition: all .2s ease-out;
|
||
|
}
|
||
|
.loading-anim .circle {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
animation: spin 5s linear infinite;
|
||
|
}
|
||
|
.loading-anim .border {
|
||
|
position: absolute;
|
||
|
border-radius: 50%;
|
||
|
border: 3px solid #e34981;
|
||
|
}
|
||
|
.loading-anim .out {
|
||
|
top: 15%;
|
||
|
left: 15%;
|
||
|
width: 70%;
|
||
|
height: 70%;
|
||
|
border-left-color: transparent;
|
||
|
border-right-color: transparent;
|
||
|
animation: spin 2s linear reverse infinite;
|
||
|
}
|
||
|
.loading-anim .in {
|
||
|
top: 18%;
|
||
|
left: 18%;
|
||
|
width: 64%;
|
||
|
height: 64%;
|
||
|
border-top-color: transparent;
|
||
|
border-bottom-color: transparent;
|
||
|
animation: spin 2s linear infinite;
|
||
|
}
|
||
|
.loading-anim .mid {
|
||
|
top: 40%;
|
||
|
left: 40%;
|
||
|
width: 20%;
|
||
|
height: 20%;
|
||
|
border-left-color: transparent;
|
||
|
border-right-color: transparent;
|
||
|
animation: spin 1s linear infinite;
|
||
|
}
|
||
|
|
||
|
.loading-anim {
|
||
|
transform: translateZ(0) rotateY(0deg) rotateX(0deg) rotateZ(0deg) scale(1);
|
||
|
opacity: 1;
|
||
|
}
|
||
|
|
||
|
.loading-overlay {
|
||
|
background: rgba(255, 255, 255, 0.5);
|
||
|
}
|
||
|
|
||
|
.dot {
|
||
|
position: absolute;
|
||
|
display: block;
|
||
|
width: 20px;
|
||
|
height: 20px;
|
||
|
border-radius: 50%;
|
||
|
background-color: #e34981;
|
||
|
animation: jitter 5s ease-in-out infinite, fade-in-out 5s linear infinite;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(1) {
|
||
|
top: 90px;
|
||
|
left: 180px;
|
||
|
animation-delay: 0s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(2) {
|
||
|
top: 135px;
|
||
|
left: 168px;
|
||
|
animation-delay: 0.41667s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(3) {
|
||
|
top: 168px;
|
||
|
left: 135px;
|
||
|
animation-delay: 0.83333s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(4) {
|
||
|
top: 180px;
|
||
|
left: 90px;
|
||
|
animation-delay: 1.25s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(5) {
|
||
|
top: 168px;
|
||
|
left: 45px;
|
||
|
animation-delay: 1.66667s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(6) {
|
||
|
top: 135px;
|
||
|
left: 12px;
|
||
|
animation-delay: 2.08333s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(7) {
|
||
|
top: 90px;
|
||
|
left: 0px;
|
||
|
animation-delay: 2.5s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(8) {
|
||
|
top: 45px;
|
||
|
left: 12px;
|
||
|
animation-delay: 2.91667s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(9) {
|
||
|
top: 12px;
|
||
|
left: 45px;
|
||
|
animation-delay: 3.33333s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(10) {
|
||
|
top: 0px;
|
||
|
left: 90px;
|
||
|
animation-delay: 3.75s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(11) {
|
||
|
top: 12px;
|
||
|
left: 135px;
|
||
|
animation-delay: 4.16667s;
|
||
|
}
|
||
|
|
||
|
.dot:nth-child(12) {
|
||
|
top: 45px;
|
||
|
left: 168px;
|
||
|
animation-delay: 4.58333s;
|
||
|
}
|
||
|
|
||
|
@keyframes spin {
|
||
|
from {
|
||
|
transform: rotate(0deg);
|
||
|
}
|
||
|
to {
|
||
|
transform: rotate(360deg);
|
||
|
}
|
||
|
}
|
||
|
@keyframes jitter {
|
||
|
0% {
|
||
|
transform: scale(1, 1);
|
||
|
}
|
||
|
25% {
|
||
|
transform: scale(0.7, 0.7);
|
||
|
}
|
||
|
50% {
|
||
|
transform: scale(1, 1);
|
||
|
}
|
||
|
75% {
|
||
|
transform: scale(1.3, 1.3);
|
||
|
}
|
||
|
100% {
|
||
|
transform: scale(1, 1);
|
||
|
}
|
||
|
}
|
||
|
@keyframes fade-in-out {
|
||
|
0% {
|
||
|
opacity: 0.8;
|
||
|
}
|
||
|
25% {
|
||
|
opacity: 0.2;
|
||
|
}
|
||
|
75% {
|
||
|
opacity: 1;
|
||
|
}
|
||
|
100% {
|
||
|
opacity: 0.8;
|
||
|
}
|
||
|
}
|