inputtextanimation.php
Quell Code
<!DOCTYPE HTML>
<html lang="de">
<head>
<title>Input animation</title>
<style>
body{
text-align:center;
background:#121234;
}
.label-box {
display: block;
position:absolute;
width:100%;
text-align:center;
border:2px solid red;
}
input {
width: 370px;
padding: 5px;
font-size: 18px;
margin-top: 10px;
border: none;
border-bottom: 1px solid #757575;
}
input:focus {
outline: none;
}
label {
font-size: 22px;
color: #757575;
pointer-events: none;
position: absolute;
top: -28px;
transition-property: all;
transition-duration: 0.2s;
}
input:focus + .label-box label,
input:valid + .label-box label {
font-size: 10px;
transform: translateY(-22px);
}
textarea{
width:80%;
height:300px;
}
h2{
color:white;
}
#alles{
width:370px;
position:absolute;
left:40%;
top:100px;
margin-bottom:200px;
}
</style>
</head>
<body>
<div id="alles">
<input type="text" required>
<div class="label-box">
<label>Gebe dein Namen ein</label>
</div>
</div>
</body>
</html>