Question

我正尝试为其他this应用code效果（就像将窗口从下往上推一样），但效果不佳。我不知道代码有什么问题。

CSS：

  label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50;
  width: 16%;
  height: 50%;
  transition: transform 0.8s;
}


label::after {
  z-index: 1;
  background: green;  /* ::after background */
  transform: scale3d(1, 0.1, 1);
  transform-origin: 0% 0%;
}


input:focus + label::after {
  transform: scale3d(1, -1, 1);
  transition-timing-function: linear;
}

Answer 1

因此+运算符在label元素

之后在input上工作

请检查您的input是否早于代码中的label

label在html中input标记后的位置

详细了解 https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

  <input type="text" name="name" class="input-field" id="user"/> <!--input filed-->
  <label for="user">Username: </label>

尝试还原输入和标签位置

您正在根据当前代码应用 input + label 之类的css，但其 label + input 是错误的

我正在尝试为其他代码应用这种效果（例如，将窗口从下往上推），但是它不起作用

2 个答案: