1.准备工作
首先，我们需要准备一个HTML文件。在文件中添加一个表单元素，并在其中添加两个输入框和一个登录按钮。
<form><labelfor="username">用户名：</label><inputtype="text"id="username"name="username"><br><labelfor="password">密码：</label><inputtype="password"id="password"name="password"><br><buttontype="submit">登录</button></form>
2.CSS样式
接下来，我们需要给表单添加一些CSS样式，来美化表单并为后续的动画做准备。
form { width: 400px; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0px0px10pxrgba(0, 0, 0, 0.2); margin: 0auto; text-align: center; position: relative; top: 50%; transform: translateY(-50%); } label { display: inline-block; margin-bottom: 10px; } input { padding: 10px; border-radius: 5px; border: none; box-shadow: 0px0px10pxrgba(0, 0, 0, 0.2); margin-bottom: 20px; } button { padding: 10px20px; background-color: #4CAF50; border: none; color: #fff; border-radius: 5px; box-shadow: 0px0px10pxrgba(0, 0, 0, 0.2); cursor: pointer; transition: all0.3sease-in-out; } button:hover { background-color: #3e8e41; }
通过添加CSS样式，我们的登录框已经变得非常漂亮了。
3.CSS动画
现在，我们来添加一些CSS动画效果，使得我们的登录框更加优美。我们将为登录按钮添加一个渐变效果，使得按钮在被鼠标悬浮时颜色逐渐变深，这样可以更好地吸引用户的注意力。
button { /* ... */background-image: linear-gradient(tobottom, #4CAF50, #2e6e3e); background-size: 100%200%; background-position: bottom; transition: background-position0.3sease-in-out; } button:hover { background-position: top; }
