简单的预加载器HTML/CSS/jQuery不能在iphone chrome上运行
简单的预加载器HTML/CSS/jQuery不能在iphone chrome上运行
提问于 2018-07-21 23:08:27
我的(我以为)简单的预加载器有问题。似乎在我检查过的所有地方都能正常工作，除了iPhone5 Chrome。预加载器出现，但永远不会淡出...感谢您的帮助
HTML：
<div id="preloader">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>CSS
#preloader {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
z-index: 999;
background: red;
border: solid 3000px white;
}
.item {
width: 30px;
height: 30px;
position: absolute;
border-radius: 2px;
}(加上这里没有包含的一些关键帧)
脚本：
$(window).on('load', function() {
$('#preloader').delay(250).fadeOut();
})回答 1
Stack Overflow用户
发布于 2018-07-22 07:58:45
М可能是这样的：
window.onload=function(){
setTimeout(function(){
$('#preloader').fadeOut('slow');
}, 250);
};#preloader {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: auto;
z-index: 999;
background: red;
border: solid 3000px white;
}
.item {
width: 30px;
height: 30px;
position: absolute;
border-radius: 2px;
}
.item-1 {
background-color: #46D1E1;
top: 0;
left: 0;
z-index: 1;
-webkit-animation: item-1_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
animation: item-1_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}
.item-2 {
background-color: #FC487F;
top: 0;
right: 0;
-webkit-animation: item-2_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
animation: item-2_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}
.item-3 {
background-color: #885DF1;
bottom: 0;
right: 0;
z-index: 1;
-webkit-animation: item-3_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
animation: item-3_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}
.item-4 {
background-color: #FDC521;
bottom: 0;
left: 0;
-webkit-animation: item-4_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
animation: item-4_move 1.2s cubic-bezier(.6,.01,.4,1) infinite;
}
@-webkit-keyframes item-1_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
50% {-webkit-transform: translate(10px, 10px);transform: translate(10px, 10px)}
75% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
}
@keyframes item-1_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
50% {-webkit-transform: translate(10px, 10px);transform: translate(10px, 10px)}
75% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
}
@-webkit-keyframes item-2_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(-10px, 0);transform: translate(-10px, 0)}
50% {-webkit-transform: translate(-10px, 10px);transform: translate(-10px, 10px)}
75% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
}
@keyframes item-2_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(-10px, 0);transform: translate(-10px, 0)}
50% {-webkit-transform: translate(-10px, 10px);transform: translate(-10px, 10px)}
75% {-webkit-transform: translate(0, 10px);transform: translate(0, 10px)}
}
@-webkit-keyframes item-3_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
50% {-webkit-transform: translate(-10px, -10px);transform: translate(-10px, -10px)}
75% {-webkit-transform: translate(-10px, 0);transform: translate(-100px, 0)}
}
@keyframes item-3_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
50% {-webkit-transform: translate(-10px, -10px);transform: translate(-10px, -10px)}
75% {-webkit-transform: translate(-10px, 0);transform: translate(-10px, 0)}
}
@-webkit-keyframes item-4_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
50% {-webkit-transform: translate(10px, -10px);transform: translate(10px, -10px)}
75% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
}
@keyframes item-4_move {
0%, 100% {-webkit-transform: translate(0, 0);transform: translate(0, 0)}
25% {-webkit-transform: translate(10px, 0);transform: translate(10px, 0)}
50% {-webkit-transform: translate(10px, -10px);transform: translate(10px, -10px)}
75% {-webkit-transform: translate(0, -10px);transform: translate(0, -10px)}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="preloader">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51457320
复制相关文章
相似问题