[css] CSS - 구글 로그인 포커스 애니 효과 (Google Logn Foucs Animation Effect) ※ 다중 가상선택자 예제

 

<style>

body{

  font-family: sans-serif;

}

.input_group{

  position: relative;

  padding-top: 13px;

}

.input_group input{

  border: 1px solid lightgrey;

  border-radius: 5px;

  outline: none;

  min-width: 250px;

  padding: 15px 20px;

  font-size: 16px;

  transition: all .1s linear;

  -webkit-transition: all .1s linear;

  -moz-transition: all .1s linear;

  -webkit-appearance:none;

}

.input_group input:focus{

  border: 2px solid #3951b2;

}

.input_group input::placeholder{

  color:transparent;

}

.input_group label{

  pointer-events: none;

  position: absolute;

  top: calc(50% - 8px);

  left: 15px;

  transition: all .1s linear;

  -webkit-transition: all .1s linear;

  -moz-transition: all .1s linear;

  background-color: white;

  padding: 5px;

  box-sizing: border-box;

}

.input_group input:required:invalid + label{

  color: red;

}

.input_group input:focus:required:invalid{

  border: 2px solid red;

}

.input_group input:required:invalid + label:before{

  content: '*';

}

.input_group input:focus + label,

.input_group input:not(:placeholder-shown) + label{

  font-size: 13px;

  top: 0;

  color: #3951b2;

}

</style>

<div class="input_group">

  <input type="text" placeholder=" "/>

  <label>아이디</label>

</div>

<br/>

<div class="input_group">

  <input type="password" placeholder=" " required/>

  <label>비밀번호</label>

</div>

 

결과보기

tofanelli 님 https://codepen.io/tofanelli/pen/Ormgrz