css3 精美的输入界面

CSS3的出现给界面开发带来了前所未有的自由，特别是在输入界面的设计上。下面以一个简单的登录界面为例，展示如何使用CSS3打造一个精美的输入界面。

<div class="login-wrapper">
  <h3>登录</h3>
  <form>
    <div class="input-wrapper">
      <input type="text" placeholder="请输入用户名">
      <img src="user.png" alt="用户图标">
    </div>
    <div class="input-wrapper">
      <input type="password" placeholder="请输入密码">
      <img src="pass.png" alt="密码图标">
    </div>
    <button>登录</button>
    <a href="#">忘记密码</a>
  </form>
</div>

首先，我们定义一个登录界面的容器。类名为login-wrapper，用于设置界面的布局样式：

.login-wrapper {
  width: 400px;
  margin: 100px auto;
  background-color: #fff;
  border-radius: 5px;
  Box-shadow: 0 0 10px rgba(0,0.1);
  padding: 40px;
}

接下来是输入框的样式，用类名input-wrapper表示。由于我们要使用图标来装饰输入框，需要对输入框和图标进行位置调整：

.input-wrapper {
  position: relative;
  margin-bottom: 25px;
}
.input-wrapper input {
  width: 100%;
  padding: 10px;
  border: none;
  border-bottom: 2px solid #eee;
  color: #333;
  font-size: 16px;
  background-color: transparent;
  transition: 0.3s border-color ease-in-out;
}
.input-wrapper input:focus {
  outline: none;
  border-color: #007bff;
}
.input-wrapper img {
  position: absolute;
  top: 8px;
  left: 0;
}

注意，我们还对输入框获得焦点时的状态进行了样式设置，以及使用CSS3过渡效果来增加用户体验。

最后是按钮的样式，在登录框容器下面的button元素上去进行类名为button的设置：

button {
  display: block;
  width: 100%;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s background-color ease-in-out;
}
button:hover {
  background-color: #0056b3;
}

到此，我们的登录页面样式已经完成了。使用CSS3可以轻松地实现这样一个精美的输入界面，不仅简单方便，而且可扩展性强，可以随意进行定制和优化。