我有一个用于加载屏幕元素的 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);}
}
最佳答案
您可以使用伪元素。如果你的容器覆盖了整个视口(viewport),那么绝对将伪元素放在中心,如下所示:
.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);}
}
关于html - 如何为单个元素加载动画添加整页彩色背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42514719/