0
我想为我的网站创建预加载器页面，但我不知道如何在JavaScript中设置它，我创建了所有CSS，但我需要帮助来创建从加载器到页面。创建预加载器页面
.caricamento {
margin: 0 auto;
vertical-align: middle;
text-align: center;
display: block;
float: center;
position: absolute;
top: 45%;
left: 48%;
}
#cerchiodentro,#loading #cherchiodentro
{
\t display:block;
\t position:absolute;
\t margin:20px 0 0 20px;
\t
\t width:40px;
\t height:40px;
\t border-top:7px solid #f22121;
\t border-bottom:7px solid #f22121;
\t border-left:7px solid transparent;
\t border-right:7px solid transparent;
\t
\t border-radius:40px;
\t -moz-border-radius:40px;
\t -webkit-border-radius:40px;
\t -ms-border-radius:40px;
\t -o-border-radius:40px;
\t
\t box-shadow:0 0 20px #f22121;
\t -webkit-box-shadow:0 0 20px #f22121;
\t -moz-box-shadow:0 0 20px #f22121;
\t -ms-box-shadow:0 0 20px #f22121;
\t -o-box-shadow:0 0 20px #f22121;
\t
\t -webkit-animation: ccwSpin .555s linear .2s infinite;
\t -moz-animation: ccwSpin .555s linear .2s infinite;
\t -o-animation: ccwSpin .555s linear .2s infinite;
\t -ms-animation: ccwSpin .555s linear .2s infinite;
\t animation: ccwSpin .555s linear .2s infinite;
}
#loading #cerchiofuori
{
\t display:block;
\t position:absolute;
\t margin:0 auto;
\t width:80px;
\t height:80px;
\t border-top:7px solid #f22121;
\t border-bottom:7px solid transparent;
\t border-left:7px solid transparent;
\t border-right:7px solid 06F;
\t
\t border-radius:80px;
\t -moz-border-radius:80px;
\t -webkit-border-radius:80px;
\t -ms-border-radius:80px;
\t -o-border-radius:80px;
\t
\t -webkit-animation: cwSpin 1s linear .2s infinite;
\t -moz-animation: cwSpin .666s linear .2s infinite;
\t -o-animation: cwSpin .666s linear .2s infinite;
\t -ms-animation: cwSpin .666s linear .2s infinite;
\t animation: cwSpin .666s linear .2s infinite;
}
#loading #cerchiodentro
{
\t
\t border-top:7px solid transparent;
\t border-bottom:7px solid #f22121;
\t border-left:7px solid #f22121;
\t border-right:7px solid transparent;
\t
\t box-shadow:none;
\t -moz-box-shadow:none;
\t -ms-box-shadow:none;
\t -o-box-shadow:none;
\t -webkit-box-shadow:none;
}
@-webkit-keyframes cwSpin
{
\t 0%{-webkit-transform:rotate(0deg); \t }
\t 100%{-webkit-transform:rotate(360deg); }
}
@-moz-keyframes cwSpin
{
\t 0%{-moz-transform:rotate(0deg); \t }
\t 100%{-moz-transform:rotate(360deg); }
}
@-ms-keyframes cwSpin
{
\t 0%{-ms-transform:rotate(0deg); \t }
\t 100%{-ms-transform:rotate(360deg); }
}
@-o-keyframes cwSpin
{
\t 0%{-o-transform:rotate(0deg); \t }
\t 100%{-o-transform:rotate(360deg); }
}
@keyframes cwSpin
{
\t 0%{transform:rotate(0deg); \t }
\t 100%{transform:rotate(360deg); }
}
@-webkit-keyframes ccwSpin
{
\t 0%{-webkit-transform:rotate(0deg); \t }
\t 100%{-webkit-transform:rotate(-360deg); }
}
@-moz-keyframes ccwSpin
{
\t 0%{-moz-transform:rotate(0deg); \t }
\t 100%{-moz-transform:rotate(-360deg); }
}
@-ms-keyframes ccwSpin
{
\t 0%{-ms-transform:rotate(0deg); \t }
\t 100%{-ms-transform:rotate(-360deg); }
}
@-o-keyframes ccwSpin
{
\t 0%{-o-transform:rotate(0deg); \t }
\t 100%{-o-transform:rotate(-360deg); }
}
@keyframes ccwSpin
{
\t 0%{transform:rotate(0deg); \t }
\t 100%{transform:rotate(-360deg); }
}<div class="caricamento">
<span id="loading">
<span id="cerchiofuori"></span>
<span id="cerchiodentro"></span>
</span>
</div>对于JavaScript的，我发现这一点，但我不知道如何将这种适应我的网页，有的人能帮助我吗？
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);
});
^^^这个代码是错误的，但是这是我发现
感谢所有的答案
你所说的 “预加载” 是什么意思？ – guest271314
我给你一个链接：https：//ihatetomatoes.net/demos/css3-preloader-transition/ 动画当你打开页面 – Lafa