使用 HTML 和 CSS 设计一个透明的登录注册网页(1)

📌 相关文章

📜 使用 HTML 和 CSS 设计一个透明的登录注册网页(1)

📅 最后修改于: 2023-12-03 14:49:40.448000 🧑 作者: Mango

使用 HTML 和 CSS 设计一个透明的登录注册网页

本文将介绍如何使用 HTML 和 CSS 设计一个透明的登录注册网页。以下为具体实现步骤。

步骤一：制作基本结构

首先，我们需要创建一个 HTML 文件，定义一个透明的登录注册页面。代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>透明的登录注册网页</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <div class="form">
        <h2>登录</h2>
        <form>
          <input type="text" placeholder="用户名">
          <input type="password" placeholder="密码">
          <button>登录</button>
        </form>
      </div>
      <div class="form">
        <h2>注册</h2>
        <form>
          <input type="text" placeholder="用户名">
          <input type="password" placeholder="密码">
          <input type="password" placeholder="确认密码">
          <button>注册</button>
        </form>
      </div>
    </div>
  </body>
</html>

在上面的代码中，我们创建了一个 wrapper div 元素，它包含了两个 form 元素，一个登录表单，一个注册表单。我们在每个 form 元素中创建了一个输入框和一个提交按钮。

步骤二：添加背景和边框

现在，我们需要给登录注册页面添加背景和边框。为了让页面背景透明，我们需要在样式表中设置透明度为 0.5，代码如下：

body {
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper {
  width: 300px;
  margin: 100px auto;
  background-color: #fff;
  opacity: 0.5;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0,0,0, .5);
}

.form {
  margin-bottom: 20px;
}

form {
  display: flex;
  flex-direction: column;
}

input[type="text"],
input[type="password"] {
  margin-bottom: 10px;
  border: none;
  border-radius: 3px;
  padding: 10px;
}

button {
  background-color: #008CBA;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
}

在上面的 CSS 代码中，我们将登录注册页面的背景设置为一张图片，通过透明度让背景透过来。我们给 wrapper 元素和每个 form 元素添加了边框、圆角和盒阴影，并针对 input 和 button 元素设置了样式。

步骤三：实现交互效果

现在，我们需要为登录注册页面添加一些交互效果，让用户更好地了解他们所处的位置。我们可以使用 jQuery 和 CSS3 动画效果来实现这些效果。下面是完整的 jQuery 和 CSS3 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>透明的登录注册网页</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(document).ready(function() {
        //登录注册功能
        $('button').click(function() {
          var form = $(this).closest('form');
          var username = $(form).find('input[type="text"]').val();
          var password = $(form).find('input[type="password"]').val();
          if(username.length === 0 || password.length === 0) {
            alert('请输入用户名和密码');
          } else {
            alert('登录成功');
          }
        });
        //动画效果
        $('.form').click(function() {
          $('.form').removeClass('active');
          $(this).addClass('active');
        });
      });
    </script>
  </head>
  <body>
    <div class="wrapper">
      <div class="form">
        <h2>登录</h2>
        <form>
          <input type="text" placeholder="用户名">
          <input type="password" placeholder="密码">
          <button>登录</button>
        </form>
      </div>
      <div class="form">
        <h2>注册</h2>
        <form>
          <input type="text" placeholder="用户名">
          <input type="password" placeholder="密码">
          <input type="password" placeholder="确认密码">
          <button>注册</button>
        </form>
      </div>
    </div>
  </body>
</html>

body {
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}

.wrapper {
  width: 300px;
  margin: 100px auto;
  background-color: #fff;
  opacity: 0.5;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0,0,0, .5);
}

.form {
  margin-bottom: 20px;
  transform: translate3d(0,0,0);
  transition: transform .3s ease-in-out;
}

.form.active {
  transform: translate3d(0,-20px,0);
}

form {
  display: flex;
  flex-direction: column;
}

input[type="text"],
input[type="password"] {
  margin-bottom: 10px;
  border: none;
  border-radius: 3px;
  padding: 10px;
}

button {
  background-color: #008CBA;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 10px;
  cursor: pointer;
}

在上面的代码中，我们定义了两个事件处理程序。当用户单击提交按钮时，我们检查表单中的输入是否为空，如果为空，我们会显示警告框，否则我们告诉用户登录成功了。当用户单击表单时，我们使用 CSS3 动画效果将此表单上移 20 像素，以使其更加可见。

至此，我们已经成功地使用 HTML 和 CSS 创建了一个透明的登录注册网页。如果您想了解更多有关使用 HTML 和 CSS 创建漂亮网页的信息，请留意我们的博客。