Html CSS3预加载程序代码不显示背景色_Html_Css_Css Transitions_Css Animations_Preloader

Html CSS3预加载程序代码不显示背景色

html css

Html CSS3预加载程序代码不显示背景色,html,css,css-transitions,css-animations,preloader,Html,Css,Css Transitions,Css Animations,Preloader,我正在为我的网站使用CSS3设计的预加载程序 #预加载程序 { 位置：绝对位置；最高：50%；左：50%； -webkit转换：翻译（-50%，-50%）；转换：翻译（-50%，-50%）； } @-webkit关键帧向上移动 { 0%, 60%, 100% { -webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）； }

我正在为我的网站使用CSS3设计的预加载程序

#预加载程序
{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
@-webkit关键帧向上移动
{
0%, 60%, 100%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
}
25%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（1米）；
变换：旋转（50度）旋转（0度）旋转（45度）平移（1米）；
}
}
@关键帧向上移动
{
0%, 60%, 100%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
}
25%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（1米）；
变换：旋转（50度）旋转（0度）旋转（45度）平移（1米）；
}
}
@-webkit关键帧向下移动
{
0%, 60%, 100%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
}
25%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（-1米）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（-1米）；
}
}
@关键帧向下移动
{
0%, 60%, 100%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
}
25%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（-1米）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（-1米）；
}
}
.层
{
显示：块；
位置：绝对位置；
高度：3em；
宽度：3em；
盒影：3p3p2pRGBA（0,0,0,0.2）；
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）；
}
.层：第n个类型（1）
{
背景：#534a47；
边缘顶部：1.5em；
-webkit动画：向下移动1.8s立方贝塞尔（0.39,0.575,0.565,1）0.9s无限法线；
动画：向下移动1.8s三次贝塞尔（0.39,0.575,0.565,1）0.9s无限法线；
}
.层：第n个类型（1）：之前
{
内容：''；
位置：绝对位置；
宽度：85%；
身高：85%；
背景：#37332f；
}
.层：第n个类型（2）
{
背景#5a96bc；
边缘顶部：0.75em；
}
.层：第n个类型（3）
{
背景：rgba（255，255，255，0.6）；
-webkit动画：向上移动1.8s立方贝塞尔（0.39,0.575,0.565,1）无限法线；
动画：向上移动1.8s立方贝塞尔（0.39,0.575,0.565,1）无限法线；
}


嗨，这是一个演示内容

希望我正确理解这个问题，您可以使用简单的js：

按如下方式更改您的html：

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
    <?php include("meta_css.php"); ?>
</head>
<body>
    <section>
     <div id="content">Page Loaded!</div>
    </section>
    <div id="preloader">
        <i class='layer'></i>
        <i class='layer'></i>
        <i class='layer'></i>
    </div>

 </body>
</html>

首先，准备淡入淡出和淡出功能：

function fadeOutEffect(target) {
    var fadeTarget = document.getElementById(target);
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        }else {
            clearInterval(fadeEffect);
            fadeTarget.style.display="none";
        }
    }, 40);
}

function fadeInEffect(target) {
    var fadeTarget = document.getElementById(target);
    fadeTarget.style.display="block";
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 0.1;
        }
        if (fadeTarget.style.opacity < 1) {
            fadeTarget.style.opacity=parseFloat(fadeTarget.style.opacity) + 0.1;
        }else {
            clearInterval(fadeEffect);
        }
    }, 40);
}

此处正在工作

必须在预加载元素上设置背景色，但它没有维度

将其设置为100%宽度和高度以覆盖所有屏幕，删除样式以使其居中，不再需要它们

现在，我们需要将层元素置于预加载内的中心。使用左侧和顶部的50%进行此操作

作为补充说明，不再需要webkit前缀

#预加载程序{
位置：绝对位置；
背景颜色：黄色；
宽度：100%；
身高：100%；
}
@关键帧向上移动{
0%,
60%,
100% {
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
}
25% {
变换：旋转（50度）旋转（0度）旋转（45度）平移（1米）；
}
}
@关键帧向下移动{
0%,
60%,
100% {
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
}
25% {
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（-1米）；
}
}
.层{
显示：块；
位置：绝对位置；
高度：3em；
宽度：3em；
盒影：3p3p2pRGBA（0,0,0,0.2）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）；
左：50%；
最高：50%；
}
.层：第n个类型（1）{
背景：#534a47；
边缘顶部：1.5em；
动画：向下移动1.8s三次贝塞尔（0.39,0.575,0.565,1）0.9s无限法线；
}
.层：第n个类型（1）：之前{
内容：''；
位置：绝对位置；
宽度：85%；
身高：85%；
背景：#37332f；
}
.层：第n个类型（2）{
背景#5a96bc；
边缘顶部：0.75em；
}
.层：第n个类型（3）{
背景：rgba（255，255，255，0.6）；
动画：向上移动1.8s立方贝塞尔（0.39,0.575,0.565,1）无限法线；
}

在预加载位置固定的情况下添加包装。给它一个背景色，你就完成了

.preload main{
位置：固定；
排名：0；
左：0；
右：0；
底部：0；
保证金：自动；
转化：无；
宽度：100%；
身高：100%；
背景：#FFF；
}
#预紧器{
位置：绝对位置；
排名：0；
左：0；；
右：0；
底部：0；
保证金：自动；
高度：3em；
宽度：3em；
}
@-webkit关键帧向上移动
{
0%, 60%, 100%
{
-webkit变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
变换：rotateX（50度）rotateY（0度）rotateZ（45度）translateZ（0）；
function fadeOutEffect(target) {
    var fadeTarget = document.getElementById(target);
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        }else {
            clearInterval(fadeEffect);
            fadeTarget.style.display="none";
        }
    }, 40);
}

function fadeInEffect(target) {
    var fadeTarget = document.getElementById(target);
    fadeTarget.style.display="block";
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 0.1;
        }
        if (fadeTarget.style.opacity < 1) {
            fadeTarget.style.opacity=parseFloat(fadeTarget.style.opacity) + 0.1;
        }else {
            clearInterval(fadeEffect);
        }
    }, 40);
}

fadeOutEffect("preloader");
fadeInEffect("content");