html5 登录玻璃特效

这篇文章距离上次修改已过221天，其中的内容可能已经有所变动。

在HTML5中创建一个登录玻璃特效，可以使用CSS3和JavaScript。以下是一个简单的示例，展示了如何制作一个带有渐变背景和动画的登录玻璃：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Glass Effect</title>
<style>
  body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
    background-size: 400% 400%;
    animation: change 10s ease-in-out infinite;
  }

  @keyframes change {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 100% 50%;
    }
  }

  .login-container {
    width: 300px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  input[type="text"], input[type="password"] {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: none;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 16px;
    transition: background-color 0.3s;
  }

  input[type="text"]:focus, input[type="password"]:focus {
    background-color: rgba(255, 255, 255, 0.5);
    outline: none;
  }

  button {
    width: calc(100% - 20px);
    padding: 10px;
    border: none;
    border-radius: 5px;
    background: #58a7f6;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  button:hover {
    background-color: #428fea;
  }
</style>
</head>
<body>

<div class="login-container">
  <form>
    <input type="text" placeholder="Username" />
    <input type="password" placeholder="Password" />
    <button type="submit">Login</button>
  </form>
</div>

</body>
</html>

这段代码展示了如何创建一个带有渐变背景动画的登录玻璃，并且登录表单有一个半透明的背景，使用了backdrop-filter CSS属性实现模糊效果。当用户聚焦输入字段时，输入框的背景颜色会变亮，鼠标悬停在按钮上时，按钮的背景色也会变深。这个示例提供了一个简单的登录玻璃，并且可以根据需要进行样式调整和功能扩展。

html5 登录玻璃特效

评论已关闭

推荐阅读