0
我现在正在为网页预加载程序工作，但无法计算如何停止动画，所以JavaScript可以工作并使预加载程序消失。在预加载程序中停止无限动画
基本上是继承人的整个情况，我只是无法让它工作正确。
$(window).load(function() {
$('.cssload-whirlpool').fadeOut();
$('.preloader').delay(350).fadeOut('slow');
$('body').delay(350).css({'overflow':'visible'});
}).preloader {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: white;
z-index: 99999;
}
.cssload-container {
position: relative;
}
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgb(204, 204, 204);
border-left-color: rgb(0, 0, 0);
border-radius: 974px;
-o-border-radius: 974px;
-ms-border-radius: 974px;
-webkit-border-radius: 974px;
-moz-border-radius: 974px;
}
.cssload-whirlpool {
margin: -24px 0 0 -24px;
height: 49px;
width: 49px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::before {
content: "";
margin: -22px 0 0 -22px;
height: 43px;
width: 43px;
animation: cssload-rotate 1150ms linear infinite;
-o-animation: cssload-rotate 1150ms linear infinite;
-ms-animation: cssload-rotate 1150ms linear infinite;
-webkit-animation: cssload-rotate 1150ms linear infinite;
-moz-animation: cssload-rotate 1150ms linear infinite;
}
.cssload-whirlpool::after {
content: "";
margin: -28px 0 0 -28px;
height: 55px;
width: 55px;
animation: cssload-rotate 2300ms linear infinite;
-o-animation: cssload-rotate 2300ms linear infinite;
-ms-animation: cssload-rotate 2300ms linear infinite;
-webkit-animation: cssload-rotate 2300ms linear infinite;
-moz-animation: cssload-rotate 2300ms linear infinite;
}
@keyframes cssload-rotate {
100% {
transform: rotate(360deg);
}
}
@-o-keyframes cssload-rotate {
100% {
-o-transform: rotate(360deg);
}
}
@-ms-keyframes cssload-rotate {
100% {
-ms-transform: rotate(360deg);
}
}
@-webkit-keyframes cssload-rotate {
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes cssload-rotate {
100% {
-moz-transform: rotate(360deg);
}
}<div class="preloader">
<div class="cssload-whirlpool"></div>
</div>会任何并欣赏:-)帮助
谢谢。
你们是不是要淡化它，删除，停止动画或其他什么东西？ –
.preloader是z-index空白页，因此可以将其删除，因此它下面的网页内容将会出现。它应该作为假预加载页面。 – Lukas
在代码片段中包含jQuery之后，它看起来像是对我有用......'$'没有被定义，所以你会得到一个错误和一个无限动画。 –