html:
<div class="main">
<label>
用户名:
<input id="username" />
<span class="poptip">仅支持字母、数字和下划线组合!</span>
</label>
</div>
css:
.main {
width: 100%; height: 229px;
display: flex;
}
label {
margin: auto;
}
input {
display: block;
width: 229px;
padding: .8em;
outline: none;
border: 1px solid #e3e3e3;
border-radius: 2px;
}
input:hover {
border: 1px solid #b4a078;
}
input:focus {
border: 1px solid #b4a078;
box-shadow: 0 0 0 2px rgba(180, 160, 120, 0.2);
}
.poptip {
display: inline-block;
width: 236px;
font-size: 13px;
padding: .6em;
background: #fafafa;
position: relative;
margin-left: -3px;
margin-top: 3px;
border-radius: 2px;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, .23456));
transform-origin: 15px -6px;
}
.poptip::before {
content: "";
position: absolute;
top: -6px; left: 10px;
border: 9px solid transparent;
border-bottom-color: #fafafa;
border-top-width: 0;
}
input:not(:focus) + .poptip{
transform: scale(0);
animation: elastic-dec .25s;
}
input:focus + .poptip{
transform: scale(1);
animation: elastic-grow .45s;
}
@keyframes elastic-grow{
from {
transform: scale(0);
}
70% {
transform: scale(1.1);
animation-timing-function: cubic-bezier(.1, .25, .1, .25);
}
}
@keyframes elastic-dec{
from {
transform: scale(1);
}
to {
transform: scale(0);
animation-timing-function: cubic-bezier(.25, .1, .25, .1);
}
}