Question

如何在我的尺寸中实现预先显示的网页，当用户首次点击我网站的网址时，该网页会显示几秒钟？例如，在this网站上，开发人员放置了一个带有某种转换的徽标，然后加载了他的网站。我试图在我的网站上实现这一点。但是，我想知道是否有人为此提出新的技术名称，以便我可以阅读如何做到这一点，如果有人能告诉我如何做到这一点让我走？

这是我网站的codepen。我链接了这个，你需要添加一些代码，以便网页在开始时显示大约3秒钟。

这是我想要在开始时显示3秒的codepen。

下面是我尝试在网站加载前显示3秒的codepen的HTML / CSS。

＆＃13;

body{
	background:#333;
	background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
	background:-moz-radial-gradient(circle, #111, #111);

}
.loader{
	margin:200px auto;
}
h1{
	font-family: 'Actor', sans-serif;
	color:#FFF;
	font-size:16px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
}
.loader span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader span:nth-child(2){
	background:blye;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader span:nth-child(3){
	background:red;
	z-index:100;
}
.loader span:nth-child(4){
	background:red;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }
   
	50%{-webkit-transform:translateX(-20px);
	}
	
	100%{-webkit-transform:translateX(20px);
	z-index:200;
	}
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }
   
	50%{-moz-transform:translateX(-20px);
	}
	
	100%{-moz-transform:translateX(20px);
	z-index:200;
	}
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }
   
	50%{-o-transform:translateX(-20px);
	}
	
	100%{-o-transform:translateX(20px);
	z-index:200;
	}
}




@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
	z-index:200;
    }
	50%{-webkit-transform:translateX(20px);
	}
	100%{-webkit-transform:translateX(-20px);
	}
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
	z-index:200;
    }
	50%{-moz-transform:translateX(20px);
	}
	100%{-moz-transform:translateX(-20px);
	}
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
	z-index:200;
    }
	50%{-o-transform:translateX(20px);
	}
	100%{-o-transform:translateX(-20px);
	}
}

＆＃13;

<html>
<head>

<link rel="stylesheet" href="css/style.css" />
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
</head>

<body>
<div class="loader">
    <h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
    <span></span>
    <span></span>
    <span></span>
  <br>
  <h1>LOADING</h1>
</div>
</body>
</html>

＆＃13;

Answer 1

在splash的情况下，它被称为android屏幕，您可以在网络上使用相同的字词，也可以将其称为loading屏幕。实现它的技巧通常是在加载webapp之前显示启动画面。

让我们为你的代码说 -

<html>
<head>
    <link rel="stylesheet" href="css/style.css" />
    <link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="splash">
        <h1>LIAM DOCHERTY'S PORTFOLIO IS</h1>
        <span></span>
        <span></span>
        <span></span>
        <br>
        <h1>LOADING</h1>
    </div>
    <div id="app"></div>
</body>
</html>

和CSS

body{
    background:#333;
    background: -webkit-gradient(radial, center center, 120, center center, 900, from(#111), to(#111));
    background:-moz-radial-gradient(circle, #111, #111);

}
#app {
    display: none;
}
.splash{
    margin:200px auto;
}
h1{
    font-family: 'Actor', sans-serif;
    color:#FFF;
    font-size:16px;
    letter-spacing:1px;
    font-weight:200;
    text-align:center;
}
.splash span{
    width:16px;
    height:16px;
    border-radius:50%;
    display:inline-block;
    position:absolute;
    left:50%;
    margin-left:-10px;
    -webkit-animation:3s infinite linear;
    -moz-animation:3s infinite linear;
    -o-animation:3s infinite linear;

}


.splash span:nth-child(2){
    background:blue;
    -webkit-animation:kiri 1.2s infinite linear;
    -moz-animation:kiri 1.2s infinite linear;
    -o-animation:kiri 1.2s infinite linear;

}
.splash span:nth-child(3){
    background:red;
    z-index:100;
}
.splash span:nth-child(4){
    background:red;
    -webkit-animation:kanan 1.2s infinite linear;
    -moz-animation:kanan 1.2s infinite linear;
    -o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }

    50%{-webkit-transform:translateX(-20px);
    }

    100%{-webkit-transform:translateX(20px);
    z-index:200;
    }
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }

    50%{-moz-transform:translateX(-20px);
    }

    100%{-moz-transform:translateX(20px);
    z-index:200;
    }
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }

    50%{-o-transform:translateX(-20px);
    }

    100%{-o-transform:translateX(20px);
    z-index:200;
    }
}




@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
    z-index:200;
    }
    50%{-webkit-transform:translateX(20px);
    }
    100%{-webkit-transform:translateX(-20px);
    }
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
    z-index:200;
    }
    50%{-moz-transform:translateX(20px);
    }
    100%{-moz-transform:translateX(-20px);
    }
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
    z-index:200;
    }
    50%{-o-transform:translateX(20px);
    }
    100%{-o-transform:translateX(-20px);
    }
}

您现在可以通过两种方式使用它 -

您可以使其依赖于您的脚本，在加载js文件之前，将显示初始屏幕。
或者您只需显示3 seconds的启动画面，然后继续webapp。

要做第一个，只需在所有其他js文件脚本标记之后添加以下脚本标记（或在body标记之后添加简单.HTML不会运行此脚本标记，直到它具有获取了之前添加的js个文件。

<script>
    document.getElementById('app').style['display'] = 'block';
    document.getElementById('splash').style['display'] = 'none';
</script>

要执行第二步，请在脚本代码中添加settimeout()方法，并将其放在HTML的头部。

<script>
    setTimeout(function(){ 
        document.getElementById('app').style['display'] = 'block';
        document.getElementById('splash').style['display'] = 'none';
    }, 3000);
</script>

Answer 2

如果您正在寻找预加载器，请使用类似这样的结构

<div id="preloader" style="display:block">preloader here</div>
<div id="webpage" style="display:none">site content</div>

然后使用脚本，在页面加载时，隐藏“#preloader”并显示“#webpage”，如下所示

$(window).load(function(){
  $("#preloader").hide();
  $("#webpage"").show();
})

如何在我的网站中实现预加载器动画？

2 个答案: