当前位置：首页 > CSS

css样式制作登录

2026-03-12 12:51:13CSS

基础登录表单结构

使用HTML创建表单容器，包含用户名、密码输入框和提交按钮：

<div class="login-container">  
  <form class="login-form">  
    <h2>用户登录</h2>  
    <input type="text" placeholder="用户名" required>  
    <input type="password" placeholder="密码" required>  
    <button type="submit">登录</button>  
  </form>  
</div>

居中与背景样式

通过Flex布局使表单垂直水平居中，并设置背景颜色或图片：

body {  
  margin: 0;  
  height: 100vh;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  background: #f0f2f5 linear-gradient(to right, #6a11cb, #2575fc);  
}

表单容器设计

定义表单宽度、内边距、圆角和阴影效果：

.login-container {  
  width: 350px;  
  padding: 2rem;  
  background: white;  
  border-radius: 10px;  
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);  
}  

.login-form h2 {  
  text-align: center;  
  margin-bottom: 1.5rem;  
  color: #333;  
}

输入框样式

设置输入框边框、焦点状态和过渡动画：

.login-form input {  
  width: 100%;  
  padding: 12px;  
  margin-bottom: 1rem;  
  border: 1px solid #ddd;  
  border-radius: 5px;  
  outline: none;  
  transition: border 0.3s;  
}  

.login-form input:focus {  
  border-color: #2575fc;  
}

按钮交互效果

添加按钮悬停和点击反馈：

.login-form button {  
  width: 100%;  
  padding: 12px;  
  background: #2575fc;  
  color: white;  
  border: none;  
  border-radius: 5px;  
  cursor: pointer;  
  transition: background 0.3s;  
}  

.login-form button:hover {  
  background: #1a5dc8;  
}

响应式调整

针对移动设备缩小表单宽度：

@media (max-width: 480px) {  
  .login-container {  
    width: 90%;  
    padding: 1.5rem;  
  }  
}

可选增强效果

添加加载动画或错误提示样式：

css样式制作登录

.error-message {  
  color: #ff4757;  
  font-size: 0.9rem;  
  margin-top: -0.5rem;  
  margin-bottom: 1rem;  
}  

.loading {  
  display: inline-block;  
  width: 20px;  
  height: 20px;  
  border: 3px solid rgba(255,255,255,0.3);  
  border-radius: 50%;  
  border-top-color: white;  
  animation: spin 1s ease-in-out infinite;  
}  

@keyframes spin {  
  to { transform: rotate(360deg); }  
}