英文:
How do I make a Website Appear after my loading animation?
问题
以下是代码的翻译部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glowing Loading Text Animation</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<center>
<h2>
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>...</span>
</h2>
</body>
</html>
*
{
margin:0;
padding:0;
font-family:consolas;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
h2
{
color: #000;
font-size: 6em;
display: flex;
}
h2 span
{
animation: animate 4s linear infinite;
}
h2 span:nth-child(1)
{
animation-delay: 0s;
}
h2 span:nth-child(2)
{
animation-delay: 0.1s;
}
h2 span:nth-child(3)
{
animation-delay: 0.2s;
}
h2 span:nth-child(4)
{
animation-delay: 0.3s;
}
h2 span:nth-child(5)
{
animation-delay: 0.4s;
}
h2 span:nth-child(6)
{
animation-delay: 0.5s;
}
h2 span:nth-child(7)
{
animation-delay: 0.6s;
}
h2 span:nth-child(8)
{
animation-delay: 0.7s;
}
@keyframes animate
{
0%,100%
{
color:#fff;
filter: blur(2px);
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
}
25%,75%
{
color:#000;
filter: blur(0px);
text-shadow:none;
}
}
body:after {
content: "";
display: none;
}
@keyframes animate {
0%, 100% {
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
25%, 75% {
color: #000;
filter: blur(0px);
text-shadow: none;
}
}
@keyframes showWebsite {
100% {
display: block;
}
}
#website {
display: none;
animation: showWebsite 4s linear forwards;
}
希望对你有所帮助。如果你有任何其他问题，请随时提问。
英文:
So what I did was to make a CSS animation of a loading text, and I wanted a webpage to come?
I didn't include the web info, since I need To add it:
HTML:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glowing Loading Text Animation</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<center>
<h2>
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>...</span>
</h2>
</body>
</html>`
CSS:
*
{
margin:0;
padding:0;
font-family:consolas;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
h2
{
color: #000;
font-size: 6em;
display: flex;
}
h2 span
{
animation: animate 4s linear infinite;
}
h2 span:nth-child(1)
{
animation-delay: 0s;
}
h2 span:nth-child(2)
{
animation-delay: 0.1s;
}
h2 span:nth-child(3)
{
animation-delay: 0.2s;
}
h2 span:nth-child(4)
{
animation-delay: 0.3s;
}
h2 span:nth-child(5)
{
animation-delay: 0.4s;
}
h2 span:nth-child(6)
{
animation-delay: 0.5s;
}
h2 span:nth-child(7)
{
animation-delay: 0.6s;
}
h2 span:nth-child(8)
{
animation-delay: 0.7s;
}
@keyframes animate
{
0%,100%
{
color:#fff;
filter: blur(2px);
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
}
25%,75%
{
color:#000;
filter: blur(0px);
text-shadow:none;
}
}
body:after {
content: "";
display: none;
}
@keyframes animate {
0%, 100% {
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
}
25%, 75% {
color: #000;
filter: blur(0px);
text-shadow: none;
}
}
@keyframes showWebsite {
100% {
display: block;
}
}
#website {
display: none;
animation: showWebsite 4s linear forwards;
}
Any suggestions, Fixes or Javascript to be added?(Specific please)
I know many similar phrased questions were asked, but I haven't found anything.Please Help?
答案1
得分: 1
在这种情况下，您可以创建一个包含主要网站内容的主div和一个包含加载器的loader div，并添加JavaScript代码以在网页完全加载时执行操作。
以下是一个示例：
document.addEventListener("DOMContentLoaded", function() {
loader = document.getElementById('loader');
});
此外，以下是带有JavaScript的示例：
<!-- 开始代码片段: 不隐藏JS 控制台: true Babel: false -->
<!-- 语言: lang-js -->
var loader;
function loadNow(opacity) {
if (opacity <= 0) {
displayContent();
} else {
loader.style.opacity = opacity;
window.setTimeout(function() {
loadNow(opacity - 0.05);
}, 10);
}
}
function displayContent() {
loader.style.display = 'none';
}
document.addEventListener("DOMContentLoaded", function() {
loader = document.getElementById('loader');
loadNow(1);
});
<!-- 语言: lang-css -->
#loader {
position: fixed;
width: 100%;
height: 100vh;
z-index: 1;
overflow: visible;
background: #fff;
}
#spinner {
text-align: center;
animation-name: spin, depth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
}
<!-- 语言: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glowing Loading Text Animation</title>
</head>
<body>
<div id="loader">
<div id="spinner">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>...</span>
</div>
</div>
<div class="main">
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
</div>
</body>
</html>
<!-- 结束代码片段 -->
请注意：您可以看到当图像加载完成时，加载器将逐渐消失。
英文:
On this occasion, you can make a main div that contains your main website and a loader div that contains your loader. and add javascript for when your webpage is fully loaded.
below could be a sample:
document.addEventListener("DOMContentLoaded", function() {
loader = document.getElementById('loader');
});
also here is your sample with js
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var loader;
function loadNow(opacity) {
if (opacity <= 0) {
displayContent();
} else {
loader.style.opacity = opacity;
window.setTimeout(function() {
loadNow(opacity - 0.05);
}, 10);
}
}
function displayContent() {
loader.style.display = 'none';
}
document.addEventListener("DOMContentLoaded", function() {
loader = document.getElementById('loader');
loadNow(1);
});
<!-- language: lang-css -->
#loader {
position: fixed;
width: 100%;
height: 100vh;
z-index: 1;
overflow: visible;
background: #fff;
}
#spinner {
text-align: center;
animation-name: spin, depth;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 3s;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glowing Loading Text Animation</title>
</head>
<body>
<div id="loader">
<div id="spinner">
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>...</span>
</div>
</div>
<div class="main">
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
<img src="https://fastly.picsum.photos/id/486/536/354.jpg?hmac=BOxuZ3jR_LErHK6qloUMI7FZuu6FPb5up2VYAbZKNOc"/>
</div>
</body>
</html>
<!-- end snippet -->
NB: you can see when the image loading completed the loader will fade away.
答案2
得分: 1
我认为你想要实现的是，经过一段时间后，页面会自动将你重定向到另一个HTML页面，对吗？你可以使用JavaScript来实现这一点。
setTimeout(function() {
window.location.href = "new-page.html";
}, 3000);
你需要在你的第一个HTML页面中添加一个<script></script>标签，这是你有加载效果的页面，然后将函数放在其中，就像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glowing Loading Text Animation</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<center>
<h2>
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>...</span>
</h2>
<script>
setTimeout(function() {
window.location.href = "new-page.html";
}, 3000);
</script>
</body>
</html>
其中，new-page.html 是你要重定向到的另一个HTML页面的名称。
你可以通过修改函数中的3000参数来控制重定向的时间。
英文:
I think what you want to achieve if, after some time the page automatically send you to another html page correct ? You can achieve this using Javascript.
setTimeout(function() {
window.location.href = "new-page.html";
}, 3000);
What you need to do is add a <script></script> tag to you first html page where you have the loading effect and put the function inside, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Glowing Loading Text Animation</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<center>
<h2>
<span>L</span>
<span>o</span>
<span>a</span>
<span>d</span>
<span>i</span>
<span>n</span>
<span>g</span>
<span>...</span>
</h2>
<script>
setTimeout(function() {
window.location.href = "new-page.html";
}, 3000);
</script>
</body>
</html>
Where new-page.html is the name if the other html page you have.
You can control the time of the redirect modified the 3000 parameter that the functions have.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论