This article is from Animation Design and Input Box effects of Xintan blog. More articles are posted on Github

Welcome to exchange and Star

The special effects in

Scribing dynamic:

Dynamic border:

Line dynamic

rendering

Principle and Code

The :before and :after pseudo-elements specify the contents before and after the contents of an element’s document tree. Because the input tag is not a container for pluggable content. So underlining here can’t be done with pseudo-elements. Other DOM nodes are required.

<div>
  <input type="text" />
  <span></span>
</div>
Copy the code

The wrapped parent div should be set to inline-block, otherwise the width will fill the screen.

div {
  position: relative;
  display: inline-block;
}
Copy the code

The input tag needs to disable the default style:

input {
  outline: none;
  border: none;
  background: #fafafa;
}
Copy the code

The span tag implements the “left in, right out” dynamic, which requires changing the direction of transform-Origin. In order to avoid backflow repainting, the visual effect of the width change is achieved by scaleX.

input ~ span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: # 262626;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3 s ease-in-out;
}

input:focus ~ span {
  transform: scaleX(1);
  transform-origin: left center;
}
Copy the code

Dynamic border

rendering

Principle and Code

As shown in the motion picture, there are 4 borders. So in addition to the input element, you need to prepare the other four DOM. A parent element is nested to facilitate positioning.

<div>
  <input type="text">
  <span class="bottom"></span>
  <span class="right"></span>
  <span class="top"></span>
  <span>
</div>
Copy the code

Similar to underline dynamics, input and div have the same style. Let’s change the padding property to make it look better.

div {
  position: relative;
  display: inline-block;
  padding: 3px;
}

input {
  outline: none;
  border: none;
  background: #fafafa;
  padding: 3px;
}
Copy the code

For the other four SPAN elements, their position attributes, animation attributes, and colors are the same:

.bottom..top..left..right {
  position: absolute;
  background-color: # 262626;
  transition: transform 0.1 s ease-in-out;
}
Copy the code

For.bottom and.top, they move horizontally; For dot left and dot right, they’re going to be vertical.

.bottom..top {
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
}

.left..right {
  top: 0;
  bottom: 0;
  width: 1px;
  transform: scaleY(0);
}
Copy the code

Here are the effects to deal with the delay. In a dynamic diagram, the animation changes in order of down, right, up, and left. The transition-delay property is used to implement the animation delay.

.bottom {
  bottom: 0;
  transform-origin: right center;
}
input:focus ~ .bottom {
  transform: scaleX(1);
  transform-origin: left center;
}

.top {
  top: 0;
  transform-origin: left center;
  transition-delay: 0.2 s;
}
input:focus ~ .top {
  transform: scaleX(1);
  transform-origin: right center;
}

.right {
  transform-origin: top center;
  right: 0;
  transition-delay: 0.1 s;
}
input:focus ~ .right {
  transform: scaleY(1);
  transform-origin: bottom center;
}

.left {
  left: 0;
  transform-origin: bottom center;
  transition-delay: 0.3 s;
}
input:focus ~ .left {
  transform: scaleY(1);
  transform-origin: top center;
}
Copy the code

Refer to the link

  • Why does input not support pseudo-elements (:after,:before)?

More articles

  • Animation design · Font effects
  • Animation design · Input box effects
  • Animation design · Button effects
  • Animation design ·Loader special effects · Foundation
  • Animation design ·Loader special effects · Advanced chapter