我正在尝试为我的其他代码应用此效果(例如从下到上推窗口)，但它不起作用

Question

我正在尝试为我的其他代码应用这种效果(就像从下到上推窗口一样(，但它不起作用。我不知道代码有什么问题。

.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

因此+运算符在input元素之后处理label

请检查您的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>

尝试还原输入和标签位置

您正在根据当前代码应用css，例如输入+标签，其标签+输入是错误的