写一段css登录特效
时间: 2023-07-25 20:06:13 浏览: 34
以下是一个简单的 CSS 登录特效示例:
HTML 代码:
```html
<div class="login-form">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</div>
```
CSS 代码:
```css
.login-form {
width: 300px;
margin: 0 auto;
padding: 20px;
background: #f4f7f8;
border-radius: 5px;
}
.login-form h2 {
text-align: center;
color: #333;
font-weight: bold;
}
.login-form form {
display: flex;
flex-direction: column;
}
.login-form input[type="text"],
.login-form input[type="password"] {
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: none;
border-radius: 5px;
background: #e5e5e5;
font-size: 16px;
color: #333;
}
.login-form button[type="submit"] {
height: 40px;
border: none;
border-radius: 5px;
background: #007bff;
color: #fff;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.login-form button[type="submit"]:hover {
background: #0069d9;
}
```
这个特效使用了简单的背景和过渡效果来让登录表单看起来更加吸引人。同时,输入框和按钮也被美化,以增加用户的使用体验。