制作登陆css

登录页面CSS设计要点

布局与结构 使用Flexbox或Grid布局实现居中和对齐，确保登录框在页面中垂直水平居中。设置外层容器宽度为100%，高度为100vh，内层登录框固定宽度（如400px）。

表单元素样式 输入框添加内边距（padding: 10px）、圆角边框（border-radius: 4px）和柔和阴影（box-shadow: 0 2px 4px rgba(0,0,0,0.1)）。设置输入框获得焦点时的边框高亮效果（outline: none; border-color: #4285f4）。

按钮设计 登录按钮使用渐变色背景（linear-gradient），添加悬停效果（hover时加深颜色或轻微上移）。按钮文字设置为大写字母（text-transform: uppercase）并添加字母间距（letter-spacing: 1px）。

响应式处理 通过媒体查询（@media）调整小屏幕下的登录框宽度（改为90vw）和字体大小。移动端隐藏非必要装饰元素，增大触控区域（增加按钮padding）。

动画与交互 添加表单加载动画（@keyframes实现淡入效果），错误提示时使用shake动画。输入验证通过后按钮颜色变化，使用transition实现平滑过渡。

示例代码片段

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #f5f5f5;
}

.login-box {
  width: 400px;
  padding: 40px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.input-field {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: border 0.3s;
}

.input-field:focus {
  border-color: #4285f4;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(45deg, #4285f4, #34a853);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.2s;
}

.submit-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .login-box {
    width: 90vw;
    padding: 30px;
  }
}