[分享]css3文字实现输入效果

CSS3是前端开发中不可或缺的技术之一，它能够实现很多炫酷的效果。今天，我们来学习如何使用CSS3实现输入效果的文字。/ 定义文本框动画 / keyframes input { from { widt...

CSS3是前端开发中不可或缺的技术之一，它能够实现很多炫酷的效果。今天，我们来学习如何使用CSS3实现输入效果的文字。

/* 定义文本框动画 */
@keyframes input {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* 定义文本框样式 */
input[type="text"] {
  padding: 8px;
  margin: 10px 0;
  border: none;
  border-bottom: 2px solid #ccc;
  background-color: transparent;
  font-size: 18px;
  color: #333;
  width: 0;
  animation: input 2s ease-in-out forwards;
}

/* 定义焦点样式 */
input[type="text"]:focus {
  outline: none;
  border-bottom: 2px solid #25a0e7;
}

/* 定义提交按钮样式 */
input[type="submit"] {
  padding: 10px;
  color: #fff;
  background-color: #25a0e7;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  cursor: pointer;
}

/* 定义提交按钮悬停样式 */
input[type="submit"]:hover {
  background-color: #2f8ed7;
} 

如上述代码所示，我们使用了CSS3的animation属性来实现文本框动画效果。我们定义了一个名为input的动画，从0到100%宽度，持续时间为2秒，速度为ease-in-out。

接着，我们设置了input[type="text"]的样式，包括padding、margin、border、background-color、font-size、color等，并且将宽度设为0，使得文本框一开始是没有显示的。

当用户将焦点放到文本框中时，我们使用:focus伪类设置了文本框的边框样式，并且去掉了默认的轮廓线。

最后，我们设置了提交按钮的样式和悬停样式。

通过以上代码，我们就成功地实现了输入效果的文字。这个效果可以用在许多地方，比如搜索框、登录框等等，为网站增添了一份时尚感。