Homepage von Basti1012 = loesungen ,Hauptmenü

< >
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>