::在选择器未正确显示之后。
我正在尝试创建与 this 相同的背景效果 我的另一个 code ，而是显示为 this 。
CSS:
label::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 233px;
height: 50%;
transition: transform 1s;
}
label::after {
z-index: -1;
background: green;
transform: scale3d(1, 0, 1);
transform-origin: 0% 0%;
}
input:focus + label::after {
transform: scale3d(1, -1.9, 1);
transition-timing-function: linear;
}
input:focus + label > span {
font-size: 12px;
transform: translate3d(0, -80%, 0);
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
最佳答案
检查此固定代码。我认为这会对您有所帮助..
body {
background-color: #f0f0f0;
}
label {
font-family: monospace;
font-size: 17px;
z-index: -1;
border: 0;
}
span {
transition: transform 1s .2s;
}
span {
position: relative;
margin-top: -33px;
display: block;
padding: .6em 0;
padding-left: 5px;
}
.username {
position: relative;
z-index: 1;
display: inline-block;
width: 300px; /* input field width */
}
input {
background: transparent;
border: 1px solid black;
background: transparent;
outline: 0;
width: 230px;
height:34px;
z-index: 1;
margin: 0;
border:0px;
}
input:focus {
outline: 1;
}
/*
input:focus {
transform: scale3d(1, 1, 1);
transition: width 5s;
transition-delay: 3s;
transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
z-index: -1;
background: green;
} */
label::after {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 233px;
height: 50%;
transition: transform 1s;
}
label::after {
z-index: -1;
background: green;
transform: scale3d(1, 0.2, 1);
transform-origin: 0% 0%;
}
input:focus + label::after {
transform: scale3d(1, -1.9, 1);
transition-timing-function: linear;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>Test</title>
</head>
<body>
<p class="head">Sign In</p>
<form>
<div class="username">
<input type="text" name="name" class="input-field" id="user"/> <!--input filed-->
<label for="user"><span>Username</span></label>
</div>
</form>
</body>
</html关于html -::after 选择器未正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52234343/