学透CSS-可浮动placeholder，让你的登录不再枯燥！

在CSS中，我们可以使用伪元素来创建一个自定义的placeholder效果，这样可以提高用户输入的体验，让登录表单不再枯燥。以下是一个简单的例子：

HTML:

<input type="text" class="custom-input" placeholder="请输入用户名">

CSS:

.custom-input {
  position: relative;
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}
 
.custom-input::placeholder {
  color: transparent;
}
 
.custom-input::-webkit-input-placeholder {
  color: transparent;
}
 
.custom-input:placeholder-shown::before {
  content: attr(placeholder);
  position: absolute;
  top: 10px;
  left: 10px;
  color: #888;
  transition: top 0.5s, opacity 0.5s;
  opacity: 0;
}
 
.custom-input:focus:placeholder-shown::before {
  top: 0;
  opacity: 1;
}

在这个例子中，我们创建了一个.custom-input类，当输入框获得焦点时，通过:placeholder-shown伪类和::before伪元素，我们可以自定义placeholder的样式和位置，使其在输入框内部浮动显示，提高用户体验。