使用 CSS 和 JavaScript 的自输入文本效果

在网页设计中，经常需要使用输入框。通过 CSS 和 JavaScript 可以实现各种有趣的自输入文本效果。

CSS 样式

首先，我们可以通过 CSS 设置输入框的样式，包括颜色、宽度、边框、背景色等等。下面是一个简单的样例：

input[type=text] {
  width: 300px;
  height: 40px;
  border: none;
  border-bottom: 2px solid grey;
  font-size: 16px;
  background-color: #f2f2f2;
  margin-bottom: 20px;
}

input:focus {
  outline: none;
  border-bottom-color: #66ccff;
}

以上的样式定义了一个灰色底色、下划线边框和获得焦点时变色的输入框。其中，使用了 type 属性选定了 text 类型的输入框。

JavaScript 实现自输入效果

接下来，我们可以使用 JavaScript 来实现不同种类的自输入效果。

双重下划线效果

以下代码使用 JavaScript 和 CSS 实现双重下划线效果：

<style>
.input {
  position: relative;
}

.input input {
  border: none;
  border-bottom: 2px solid grey;
  background-color: transparent;
  font-size: 16px;
}

.input label {
  color: grey;
  position: absolute;
  left: 0;
  bottom: 15px;
  transition: all 0.2s ease-in-out;
}

.input input:focus + label,
.input input:not(:placeholder-shown) + label {
  transform: translateY(-20px);
  font-size: 14px;
  color: #66ccff;
}
</style>

<div class="input">
  <input type="text" name="text" required placeholder="&nbsp;">
  <label for="text">Your Name</label>
</div>

这里，我们定义了一个带有输入提示和下划线的输入框，当输入框被聚焦或者有输入内容时，输入提示往上移动，并且下划线变成蓝色。

翻转效果

以下代码使用 JavaScript 和 CSS 实现翻转效果：

<style>
.flip {
  width: 300px;
  height: 40px;
  perspective: 1000px;
}

.flip .input {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out;
  transform-style: preserve-3d;
}

.flip .input input {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  font-size: 16px;
  color: #444444;
  text-indent: 15px;
  transform: rotateY(0deg);
  transition: transform 0.3s ease-in-out;
}

.flip .input input:focus + .input-overlay,
.flip .input input:not(:placeholder-shown) + .input-overlay {
  transform: rotateY(-180deg);
}

.flip .input-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  padding: 8px;
  box-sizing: border-box;
  transition: transform 0.3s ease-in-out;
  background-color: #f2f2f2;
  color: #444444;
  font-size: 16px;
  text-align: center;
}
</style>

<div class="flip">
  <div class="input">
    <input type="text" name="text" required placeholder="&nbsp;">
    <div class="input-overlay">Your Name</div>
  </div>
</div>

这里，我们定义了一个在输入框被聚焦或者有输入内容时翻转的输入框。输入框的背面显示输入提示，当输入框被聚焦或者有输入内容时，输入提示翻转到正面显示。

结论

通过 CSS 和 JavaScript，我们可以实现多种有趣的自输入文本效果，可以根据需求来选择不同的效果，提高网页的用户体验。