<label>
<input type="text" required>
<ul>
<li s>s</li>
<li e>e</li>
<li a>a</li>
<li r>r</li>
<li c>c</li>
<li h>h</li>
</ul>
</label>
*{
box-sizing: border-box;
}
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
padding: 0;
background-color: white;
font-family: 'Knewave', cursive;
}
label{
width: 100%;
max-width: 300px;
}
input{
width: 100%;
display: flex;
padding: 15px;
background-color: white;
border: 2px solid black;
color: #111;
font-size: 15px;
box-shadow: 3px 1px 0px 2px, 0px -1px 0px 2px rgba(0, 0, 0, 0.62);
height: 58px;
transform: skew(-3deg, 1deg);
font-family: 'Knewave', cursive;
letter-spacing: 2px;
text-transform: uppercase;
&:focus,
&:valid{
outline: none;
~ ul li{
@for $i from 1 through 6 {
&:nth-child(#{$i}){
&::before{
filter: blur(20px);
transform: translate(0, -35px) rotate(-210deg);
}
&::after{
filter: blur(0);
transform: scale(1) rotate(0);
}
}
}
@for $i from 1 through 6{
&:nth-child(#{$i}){
&::after{
transition-delay: 200ms + ($i * 200ms);
}
}
}
}
}
}
label{
position: relative;
}
ul{
position: absolute;
top: 38px;
left: -4px;
margin: 0;
list-style: none;
padding-left: 22px;
position: absolute;
display: flex;
pointer-events: none;
transition: 200ms;
li{
letter-spacing: 3px;
text-transform: uppercase;
color: transparent;
pointer-events: none;
transition: 500ms ease-in-out;
::selection{
color: transparent;
}
&::after,
&::before{
color: black;
position: absolute;
transition: 500ms ease-in-out;
}
&::before{
top: -20px;
}
&::after{
top: -63px;
transform: scale(0) rotate(210deg);
filter: blur(20px);
}
$chars: s,e,a,r,c,h;
@each $char in $chars {
$i: index($chars, $char);
$x: index($chars, $char);
$i: $i * 200;
$y: $x * 12;
&[#{$char}]::before{
content: attr($char) quote($char);
transition-delay: $i+ms;
}
&[#{$char}]::after{
content: attr($char) quote($char);
left: unquote($y+'px');
color: #666;
}
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.