Question

现在，我在网上找到了以下代码，我需要对其进行修改，以便在灰色加载叠加层前面显示一个div图层。

在这种情况下，body onload函数是否可以使div层可见？你可以在这里看到这段代码： https://jsfiddle.net/t9tmzws4/

html {
  -webkit-transition: background-color 1s;
  transition: background-color 1s;
}

html,
body {
  min-height: 100%;
}

html.loading {
  background: #333 url('http://www.airfares.ga/icons/238.gif') no-repeat 50% 200px;
  -webkit-transition: background-color 0;
  transition: background-color 0;
}

body {
  -webkit-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}

html.loading body {
  opacity: 0;
  -webkit-transition: opacity 0;
  transition: opacity 0;
}

button {
  background: #00A3FF;
  color: white;
  padding: 0.2em 0.5em;
  font-size: 1.5em;
}

<html class="loading">
<head>
  <script>
    var html = document.getElementsByTagName('html')[0];
    var removeLoading = function() {
      // In a production application you would remove the loading class when your
      // application is initialized and ready to go.  Here we just artificially wait
      // 3 seconds before removing the class.
      setTimeout(function() {
        html.className = html.className.replace(/loading/, '');
      }, 3000);
    };
    removeLoading();
  </script>

</head>
<body>
  sdfsdfsdfsdf
</body>

</html>

Answer 1

唯一的方法是在pseudo element代码html上loading html.loading::before { content: "Loading..."; color: #ff5656; font-size: 50px; text-align: center; display: block; }类：

::after

如果您愿意，可以在html

上添加

html {
  -webkit-transition: background-color 1s;
  transition: background-color 1s;
}

html.loading::before {
    content: "Loading...";
    color: #ff5656;
    font-size: 50px;
    text-align: center;
    display: block;
}

html,
body {
  min-height: 100%;
}

html.loading {
  background: #333 url('http://www.airfares.ga/icons/238.gif') no-repeat 50% 200px;
  -webkit-transition: background-color 0;
  transition: background-color 0;
}

body {
  -webkit-transition: opacity 1s ease-in;
  transition: opacity 1s ease-in;
}

html.loading body {
  opacity: 0;
  -webkit-transition: opacity 0;
  transition: opacity 0;
}

button {
  background: #00A3FF;
  color: white;
  padding: 0.2em 0.5em;
  font-size: 1.5em;
}

之类的其他内容，例如图片等

<html class="loading">
<head>
  <script>
    var html = document.getElementsByTagName('html')[0];
    var removeLoading = function() {
      // In a production application you would remove the loading class when your
      // application is initialized and ready to go.  Here we just artificially wait
      // 3 seconds before removing the class.
      setTimeout(function() {
        html.className = html.className.replace(/loading/, '');
      }, 3000);
    };
    removeLoading();
  </script>

</head>
<body>
  sdfsdfsdfsdf
</body>

</html>

using UnityEngine;

public class Lerp : MonoBehaviour
{
[Range(0, 360)]
public float angle = 120;//Specify Angle For Rotation
float tempAngle;//Temporary Angle Measurement Variable
bool horizontalFlag;//Check For Horizontal Roation
bool isRotating;//Check Whether Currently Object is Rotating Or Not.
int Direction;//Direction Of Rotation

//Called For Initialization
void Start()
{
    horizontalFlag = isRotating = false;
}
//Method For Horizontal Input
void CheckForHorizontalInput()
{
    if (Input.GetAxis("Horizontal") != 0 && !isRotating)
     {
         isRotating = true;
         Direction = (Input.GetAxis("Horizontal") < 0 ? - 1 : 1);
         horizontalFlag = true;
         tempAngle = 0;
     }
 }
 //Method For horizontal Rotation
 void HorizontalRotation()
 {

     transform.Rotate(Vector3.back *  angle * Time.fixedDeltaTime * Direction, Space.Self);
     tempAngle += angle * Time.fixedDeltaTime;
     if (tempAngle >= angle)
     {
         tempAngle = 0;
         isRotating = false;
         horizontalFlag = false;
     }
 }
 void Update()
 {
     CheckForHorizontalInput();
     if (horizontalFlag)
         HorizontalRotation();
 }
 }

如何在加载类前面显示图层

1 个答案: