javascript - 如何为我的网站制作一个 javascript 加载屏幕，该屏幕在我的网站加载后会淡出

标签 javascript html css

所以我一直想知道如何为我的网站制作一个有效的 javascript 加载屏幕，这是代码。

@import url(http://fonts.googleapis.com/css?family=Lato:300,700);
@import url(http://fonts.googleapis.com/css?family=Italianno);
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
@import url(http://fonts.googleapis.com/css?family=Poiret+One);
 body {
  background-image: url(images/rocket.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#menu {
  height: 60px;
  text-decloration: none;
  line-height: 60px;
  width: 100%;
  background: ;
  position: relative;
  margin: 0px;
  font-family: Lato;
}
#image {
  background-repeat: no-repeat;
  background-position: left top;
  width: 100%;
  height: 740px;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
#specialbox {
  width: 300px;
  overflow: hidden;
  height: 300px;
  background-color: white;
  margin-right: 45px;
  margin-left: 47px;
  color: purple;
  clear: both;
  text-align: center;
  display: inline-block;
  padding: 3em;
  -webkit-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  -moz-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
}
#box {
  margin-top: 50px;
  width: 1100px;
  margin-bottom: 30px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  color: purple;
  clear: both;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  -moz-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
#textbox {
  width: 1100px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  color: purple;
  clear: both;
  text-align: center;
  padding: 5px;
  -webkit-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  -moz-box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  box-shadow: 11px 11px 9px 0px rgba(36, 36, 36, 1);
  transition: All 1s ease;
  -webkit-transition: All 1s ease;
  -moz-transition: All 1s ease;
  -o-transition: All 1s ease;
  transform: rotate(0deg) scale(1.5) skew(deg) translate(0px);
  -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -moz-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
  -ms-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);
}
#textbox:hover {
  transform: rotate(0deg) scale(0) skew(1deg) translate(0px);
  -webkit-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
  -moz-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
  -o-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
  -ms-transform: rotate(0deg) scale(1.2) skew(1deg) translate(0px);
}
#footer {
  background-color: green;
  margin-left: auto;
  margin-right: auto;
  width: %;
  height: 10px;
  color: white;
  background-color: #303030;
  clear: both;
  text-align: center;
  padding: 5px;
}
/* Mini pictures in a circle */

.icon {
  position: relative;
}
.icon:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
}
.icon.major {
  background-color: rgba(66, 138, 134, 0.7);
  border-radius: 100%;
  color: #ffffff;
  cursor: default;
  display: block;
  height: 4.5em;
  line-height: 4.5em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  text-align: center;
  width: 4.5em;
}
.icon.major:before {
  font-size: 32px;
}
/* Commands */

.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.centered {
  position: absolute;
  top: 0%;
  left: 1%;
}
.undercentered {
  position: absolute;
  top: 95%;
  left: 85%;
}
.undercentered2 {
  position: absolute;
  top: 95%;
  left: 1%;
}
.button {
  font-size: 16px;
  color: rgba(0, 220, 0, 0.6);
  font-family: 'Indie Flower', cursive;
  font-weight: normal;
  padding: 0px 15px;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0);
  display: inline-block;
  float: right;
}
.button:hover {
  background-color: rgba(200, 0, 0, 0.5);
}
.button:active {
  position: relative;
  top: 1px;
}
.cbutton {
  font-size: 16px;
  font-family: 'Indie Flower', cursive;
  font-weight: normal;
  padding: 0px 15px;
  text-decoration: none;
  background-color: rgba(200, 0, 0, 0.2);
  color: rgba(220, 0, 0, 0.6);
  display: inline-block;
  float: right;
}
.button:active {
  position: relative;
  top: 1px;
}
.myButton {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid rgba(66, 138, 134, 1);
  display: inline-block;
  cursor: pointer;
  color: red;
  font-family: arial;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 30px;
  text-decoration: none;
}
.myButton:hover {
  background-color: rgba(66, 138, 134, 0.7);
}
.myButton:active {
  position: relative;
  top: 1px;
}
.myButton1 {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid rgba(66, 138, 134, 1);
  display: inline-block;
  cursor: pointer;
  color: red;
  font-family: arial;
  font-size: 13px;
  font-weight: bold;
  padding: 4px 26px;
  text-decoration: none;
}
.myButton1:hover {
  background-color: rgba(66, 138, 134, 0.7);
}
.myButton1:active {
  position: relative;
  top: 1px;
}
.line {
  height: 1px;
  width: 300px;
  margin-left: 200px;
  background: rgba(226, 44, 44, 0.9);
  border: 1px solid rgba(226, 44, 44, 0.9);
}
/* Types of text */

body {
  font-size: 0.8em;
  font-family: sans-serif, Comic Sans MS;
  border: 1px;
  margin: 0px;
}
p {
  color: green;
  text-align: left;
}
h1l {
  color: rgba(226, 44, 44, 0.9);
  font-size: 400%;
  font-family: 'Italianno', cursive;
}
h1 {
  color: green;
  font-size: 300%;
  font-family: 'Poiret One', cursive;
  text-align: center;
}
air {
  color: red;
  text-align: center;
  font-family: Sans-serif;
  font-size: 14px;
}
s-air {
  color: green;
  text-align: center;
  font-family: Comic Sans MS;
  font-size: 17px;
}
sair {
  color: green;
  font-family: Arial;
  font-size: 17px;
  margin-left: 54px;
}
copyright {
  color: white;
  font-family: Sans-Serif;
  font-size: 15px;
}
warning {
  color: orange;
  text-align: center;
  font-size: 150%;
}
airh {
  color: green;
  font-family: Impact;
  text-align: center;
  font-size: 200%;
  text-shadow: 4px 4px 0px rgba(150, 150, 150, 1);
}
nav {
  line-height: 30px;
  background-color: #eeeeee;
  height: 300px;
  width: 100px;
  float: left;
  padding: 5px;
}
section {
  width: 350px;
  float: left;
  padding: 10px;
}
test {
  color: white;
  font-family: Lato;
  margin-left: 10px;
  font-size: 17px;
}
h2l {
  color: rgba(0, 220, 0, 0.6);
  font-family: 'Indie Flower', cursive;
  font-size: 150%;
  text-align: center;
}
h2 {
  font-family: 'Indie Flower', cursive;
  color: red;
}
h3 {
  font-family: 'Indie Flower', cursive;
  font-size: 130%;
  text-align: center;
}
unidentified {
  color: green;
  font-family: impact;
}
big {
  color: green;
  font-family: Sans-serif;
  font-size: 200%;
  text-align: center;
}
sub {
  font-size: 0.8em;
  position: relative;
  top: 0.2em;
}
sup {
  font-size: 0.8em;
  position: relative;
  top: -0.2em;
}
code {
  background: #f0f0f0;
  font-family: monospace;
  font-size: 0.9em;
  margin: 0 0.25em;
  padding: 0.25em 0.65em;
}
input[type=password] {
  border-radius: 5px;
  border: 1px;
  height: 17px;
  border-color: green;
}
input[type=submit] {
  border-radius: 5px;
  background-color: white;
  border: 1px green;
  height: 19px;
}
<!doctype html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Blazin' - Home</title>
  <link rel="Shortcut Icon" href="icon.ico" />
  <link href="css/bootstrap.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="css/bootstrap-responsive.css" rel="stylesheet" />
  <link href="css/font-awesome.css" rel="stylesheet" />
  <link rel="stylesheet" media="screen and (min-width: 700px) and (max-width: 1000px)" href="mobile.css" />
  <link rel="stylesheet" media="screen and (min-width: 1500px) and (max-width: 10000px)" href="fstyle.css" />
  <!-- Header -->
  <div id="menu">
    <a class="button alignright" href="staffarea.php">&nbsp;Admin</a> 
    <a class="button alignright" href="logs.html">&nbsp;Logs</a> 
    <a class="button alignright" href="rules.html">&nbsp;Rules</a> 
    <!--Fixed pos START-->
    <a class="cbutton alignright">&nbsp;Home</a> 
    <!--Fixed pos END-->
    <test class="alignleft" />
  </div>


  <div id="image">
    <h1l class="centered">Blazin Gaming</h1l>
    <h2l class="undercentered2">Version 3.3.2</h2l>
  </div>

  <!-- Main Content -->
  <!-- footer -->
  </body>

</html>

我真的需要这方面的帮助，我尝试了一些不同的方法，但似乎没有任何效果。

最佳答案

您要做的是查看页面何时准备就绪。 https://api.jquery.com/ready/

当发生这种情况时，可以做一个 jQuery 动画，但是除非您的页面非常大，否则您不会有太多时间。

关于javascript - 如何为我的网站制作一个 javascript 加载屏幕，该屏幕在我的网站加载后会淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30134398/

上一篇：javascript - 滚动时将 div 粘在屏幕顶部

下一篇：css - 如何将文本添加到过渡

相关文章：

javascript - 将 'active' 类添加到与当前单击的侧边栏菜单链接相同的 href

javascript - 下拉菜单中的 Material UI 自动完成结果文本

javascript - 网络应用程序 - 设备高度/键盘问题

javascript - 如何处理 MEAN 应用程序中的数据库更改

javascript - 在reactjs中onKeyPress下的函数调用没有被调用

html - 如何获得正确包含图像的链接？

html - 我应该如何为不支持 JavaScript 的浏览器隐藏 HTML？

html - 展望负表 margin

javascript - 响应式网站部分基于设备而不是屏幕分辨率

javascript - jQuery:此类的addClass和click函数

©2024 IT工具网  联系我们