css样式制作登录

使用CSS制作登录表单

创建登录表单需要结合HTML和CSS，以下是一个简洁美观的登录表单实现方法。

HTML结构

<div class="login-container">
  <h2>用户登录</h2>
  <form>
    <div class="input-group">
      <label for="username">用户名</label>
      <input type="text" id="username" placeholder="请输入用户名">
    </div>
    <div class="input-group">
      <label for="password">密码</label>
      <input type="password" id="password" placeholder="请输入密码">
    </div>
    <button type="submit">登录</button>
  </form>
</div>

CSS样式

.login-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.login-container h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.input-group input:focus {
  border-color: #4285f4;
  outline: none;
}

button[type="submit"] {
  width: 100%;
  padding: 12px;
  background-color: #4285f4;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button[type="submit"]:hover {
  background-color: #3367d6;
}

响应式设计

添加媒体查询使登录表单在不同设备上都能良好显示：

@media (max-width: 480px) {
  .login-container {
    margin: 20px;
    padding: 20px;
  }
}

动画效果

为登录表单添加简单的动画效果：

.login-container {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

主题定制

通过CSS变量实现主题定制：

:root {
  --primary-color: #4285f4;
  --secondary-color: #f1f3f4;
  --text-color: #333;
}

.login-container {
  background-color: var(--secondary-color);
}

button[type="submit"] {
  background-color: var(--primary-color);
}

这些样式组合可以创建一个现代、响应式的登录表单，可以根据需要进一步调整颜色、间距和动画效果。