Input form input box focuses on animation series

Time:2021-5-31

Input form input box focuses on animation series

Form animation 1

HTML source code

<div class="inputBox">
    <input class="effect-1" type="text" placeholder="Placeholder Text">
    <span class="focus-border"></span>
</div>

CSS source code

The InputBox class is used for layout. It is an input container for easy viewing. Here, I set each row to be divided into three columns (which can be set according to my own needs).

.inputBox {
      float: left;
      width: 27.33%;
      margin: 40px 3%;
      position: relative; 
}       

Then set some common styles for the input element.

input[type="text"]{
    font: 15px/24px "Lato", Arial, sans-serif; 
    color: #333; 
    width: 100%; 
    box-sizing: border-box; 
    letter-spacing: 1px;
}    
:focus{
    outline: none;
}

The effect-1 class represents the type of animation styles for different input forms to get focus, the effect-1 class represents the first type, and so on.

. focus border is the border style of the input box after focusing. It is in absolute units, located in the lower left corner of the input box, with a height of 2 pixels. At the beginning, the width is set to 0, invisible. And set the transition animation effect of 0.4 seconds.

Set the width of. Focus border to 100% when the input box is focused and when there is content in the input box.

.effect-3{
    border: 0; 
    padding: 7px 0; 
    border-bottom: 1px solid #ccc;
}
.effect-1 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 2px; 
    background-color: #3399FF; 
    transition: 0.4s;
}
.effect-1:focus ~ .focus-border{
    width: 100%; 
    transition: 0.4s;
}

Input form input box focuses on animation series

Form animation 2

HTML source code

<div class="inputBox">
    <input class="effect-2" type="text" placeholder="Placeholder Text">
    <span class="focus-border"></span>
</div>

CSS source code

.effect-2{
    border: 0; 
    padding: 7px 0; 
    border-bottom: 1px solid #ccc;
}
.effect-2 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 2px; 
    background-color: #3399FF; 
    transition: 0.4s;
}
.effect-2:focus ~ .focus-border{
    width: 100%; 
    transition: 0.4s; 
    left: 0;
}

Input form input box focuses on animation series

Form animation 3

HTML source code

<div class="inputBox">
    <input class="effect-3" type="text" placeholder="Placeholder Text">
    <span class="focus-border"></span>
</div>

CSS source code

.effect-3{
    border: 0; 
    padding: 7px 0; 
    border-bottom: 1px solid #ccc;
}
.effect-3 ~ .focus-border{
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 2px; 
    z-index: 99;
}
.effect-3 ~ .focus-border:before,
.effect-3 ~ .focus-border:after{
    content: ""; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 0; 
    height: 100%; 
    background-color: #3399FF; 
    transition: 0.4s;
}
.effect-3 ~ .focus-border:after{
    left: auto; 
    right: 0;
}
.effect-3:focus ~ .focus-border:before,
.effect-3:focus ~ .focus-border:after{
    width: 50%; 
    transition: 0.4s;
}

Move you want to move, cover you need, code word is not easy, and line and cherish!