Question

如果可能的话，我想让我的登录框在页面加载和/或页面退出时淡入... 我已经尝试查看其他堆栈溢出答案，但似乎没有一个适用于我的代码

HTML：

<?php
    if(isset($_POST["submit"])) {
        $link = mysqli_connect("localhost","root","");
        mysqli_select_db($link,"test");
        $count = 0;
        $res=mysqli_query($link,"SELECT * FROM users WHERE username='$_POST[Username]' && password='$_POST[Password]'");
        $count=mysqli_num_rows($res);
        if($count > 0) {
            ?>
            <script type="text/javascript">
            window.location="index.php";
            </script>
            <?php
        }
    }
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">

</head>
<body>
    <div id = "log">
        <form autocomplete="off" method="post" action="login.php">
        <p>Username:</p> <input class="inputbox" type="text" name="Username" />
        <p>Password:</p> <input class="inputbox" type="password" name ="Password" />
        <br><br>
        <input id = "submitbutton" type="submit" name="submit" value="Login" />              <br>
    </div>
    </div>
</body>
</html>

提前致谢

Answer 1

要在页面加载时淡入，您可以使用简单的CSS动画

form {
  animation: fadeIn .5s forwards;
  animation-delay: 1s; /* optional */
  opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

<form autocomplete="off" method="post" action="login.php">
  <p>Username:</p> <input class="inputbox" type="text" name="Username" />
  <p>Password:</p> <input class="inputbox" type="password" name="Password" />
  <br><br>
  <input id="submitbutton" type="submit" name="submit" value="Login" />
</form>

登录框淡入和淡出过渡

1 个答案: