Question

我有一个单独的html div，我用它来加载屏幕元素。我需要添加整页背景颜色。换句话说，我需要将旋转图像放在纯色全页背景之上。

另外，我只能使用一个元素。以下是我到目前为止的情况：

.animsition-loading {
    background-image: url('../images/logo-loading.png');
    width: 100px;
    height: 111px;
    background-repeat: no-repeat;
    background-size: contain;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    -webkit-animation: spin1 .5s infinite linear;
    -moz-animation: spin1 .5s infinite linear;
    -o-animation: spin1 .5s infinite linear;
    -ms-animation: spin1 .5s infinite linear;
    animation: spin1 .5s infinite linear;
}

@-webkit-keyframes spin1 {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

Answer 1

您可以使用伪造的元素。如果你的容器覆盖了整个视口，那么绝对将psuedo后面的元素放在中心位置，如下所示：

.animation-loading{
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: YOUR_COLOUR;
}    

.animation-loading::after{
    content: "";
    display: block;
    background-image: url('../images/logo-loading.png');
    width: 100px;
    height: 111px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    -webkit-animation: spin1 .5s infinite linear;
    -moz-animation: spin1 .5s infinite linear;
    -o-animation: spin1 .5s infinite linear;
    -ms-animation: spin1 .5s infinite linear;
    animation: spin1 .5s infinite linear;
}

@-webkit-keyframes spin1 {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

Answer 2

您可以将此HTML用于“加载圈子”：

<div id='loading-bg' style='display:none; position:fixed; z-index:9999; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.4); width:100%; height:100%;'><div id='floatingCirclesG' style='position:fixed; top:50%; left:50%; margin-left:-64px; margin-top:-64px;'><div class='f_circleG' id='frotateG_01'></div><div class='f_circleG' id='frotateG_02'></div><div class='f_circleG' id='frotateG_03'></div><div class='f_circleG' id='frotateG_04'></div><div class='f_circleG' id='frotateG_05'></div><div class='f_circleG' id='frotateG_06'></div><div class='f_circleG' id='frotateG_07'></div><div class='f_circleG' id='frotateG_08'></div></div></div>

与此CSS一起使用：

#floatingCirclesG{
position:relative;
width:128px;
height:128px;
-moz-transform:scale(0.6);
-webkit-transform:scale(0.6);
-ms-transform:scale(0.6);
-o-transform:scale(0.6);
transform:scale(0.6);
}

.f_circleG{
position:absolute;
background-color:#c1c9ce;
height:23px;
width:23px;
-moz-border-radius:12px;
-moz-animation-name:f_fadeG;
-moz-animation-duration:0.64s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:12px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:0.64s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:12px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:0.64s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:12px;
-o-animation-name:f_fadeG;
-o-animation-duration:0.64s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:12px;
animation-name:f_fadeG;
animation-duration:0.64s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#frotateG_01{
left:0;
top:52px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}

#frotateG_02{
left:15px;
top:15px;
-moz-animation-delay:0.32s;
-webkit-animation-delay:0.32s;
-ms-animation-delay:0.32s;
-o-animation-delay:0.32s;
animation-delay:0.32s;
}

#frotateG_03{
left:52px;
top:0;
-moz-animation-delay:0.4s;
-webkit-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
animation-delay:0.4s;
}

#frotateG_04{
right:15px;
top:15px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}

#frotateG_05{
right:0;
top:52px;
-moz-animation-delay:0.56s;
-webkit-animation-delay:0.56s;
-ms-animation-delay:0.56s;
-o-animation-delay:0.56s;
animation-delay:0.56s;
}

#frotateG_06{
right:15px;
bottom:15px;
-moz-animation-delay:0.64s;
-webkit-animation-delay:0.64s;
-ms-animation-delay:0.64s;
-o-animation-delay:0.64s;
animation-delay:0.64s;
}

#frotateG_07{
left:52px;
bottom:0;
-moz-animation-delay:0.72s;
-webkit-animation-delay:0.72s;
-ms-animation-delay:0.72s;
-o-animation-delay:0.72s;
animation-delay:0.72s;
}

#frotateG_08{
left:15px;
bottom:15px;
-moz-animation-delay:0.8s;
-webkit-animation-delay:0.8s;
-ms-animation-delay:0.8s;
-o-animation-delay:0.8s;
animation-delay:0.8s;
}

@-moz-keyframes f_fadeG{
0%{
background-color:#123041}

100%{
background-color:#c1c9ce}

}

@-webkit-keyframes f_fadeG{
0%{
background-color:#123041}

100%{
background-color:#c1c9ce}

}

@-ms-keyframes f_fadeG{
0%{
background-color:#123041}

100%{
background-color:#c1c9ce}

}

@-o-keyframes f_fadeG{
0%{
background-color:#123041}

100%{
background-color:#c1c9ce}

}

@keyframes f_fadeG{
0%{
background-color:#123041}

100%{
background-color:#c1c9ce}

}

......你完成了！在这里小提琴：https://jsfiddle.net/62zgk0qw/

如何将单页颜色背景添加到单个元素加载动画？

2 个答案: