The implementation code of the CSS3 input box is similar to the animation effect of Google login

The implementation code of the CSS3 input box is similar to the animation effect of Google login

Use CSS3 to animate the input box similar to the Google login page

Effect 1

insert image description here

The code is as follows

CSS

body{
    background-color:#acacac;
  }
  .form-container{
    display: block;
    position: relative;
    width: 400px;
    height: 400px;
    background: #fff;
    margin: 50px auto;
    padding: 30px;
  }

  input{
    display: block;
    position: relative;
    background: none;
    border: 2px solid #acacac;
    border-radius:5px;
    width: 100%;
    font-weight: bold;
    padding-left:10px;
    font-size: 16px;
    height:35px;
    z-index: 1;
  }

  label{
    display: inline-block;
    position: relative;
    top: -32px;
    left: 10px;
    color: #acacac;
    font-size: 16px;
    z-index: 2;
    transition: all 0.2s ease-out;
  }

  input:focus, input:valid{
    outline: none;
    border: 2px solid #00aced;
  }

  input:focus + label, input:valid + label{
    top: -50px;
    font-size: 16px;
    color: #00aced;
    background-color:#fff;
  }

HTML

<div class="main">
    <div class="form-container">
      <input type="text" name="input1" required>
      <label for="input1">Account</label>

      <input type="text" name="input2" required>
      <label for="input2">Password</label>
    </div>
  </div>

Effect 2

insert image description here

The code is as follows:

CSS

body{
    background-color:#acacac;
  }
  .form-container{
    display: block;
    position: relative;
    width: 400px;
    background: #fff;
    margin: 50px auto;
    padding: 60px;
  }

  input{
    display: block;
    position: relative;
    background: none;
    border: none;
    border-bottom: 1px solid #ddd;
    width: 100%;
    font-weight: bold;
    font-size: 16px;
    z-index: 2;
  }

  label{
    display: block;
    position: relative;
    top: -20px;
    left: 0px;
    color: #999;
    font-size: 16px;
    z-index: 1;
    transition: all 0.3s ease-out;
    margin-bottom:40px;
  }

  input:focus, input:valid{
    outline: none;
    border-bottom: 1px solid #00aced;
  }

  input:focus + label, input:valid + label{
    top: -50px;
    font-size: 16px;
    color: #00aced;
    background-color:#fff;
  }

HTML

<div class="main">
    <div class="form-container">
      <input type="text" name="input1" required>
      <label for="input1">Account</label>
      <input type="text" name="input2" required>
      <label for="input2">Password</label>
    </div>
  </div>

Summarize

This concludes this article about the implementation code of the CSS3 input box with animation effects similar to Google login. For more related CSS3 input box content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<:  10 issues that must be considered when designing and building large-scale website architecture

>>:  Simple understanding and examples of MySQL index pushdown (ICP)

Recommend

Docker advanced method of rapid expansion

1. Command method Run the nginx service in the cr...

JavaScript implements single linked list process analysis

Preface: To store multiple elements, arrays are t...

MySQL multi-master and one-slave data backup method tutorial

Overview Operations on any one database are autom...

How Web Designers Create Images for Retina Display Devices

Special statement: This article is translated bas...

MySQL merges multiple rows of data based on the group_concat() function

A very useful function group_concat(), the manual...

Various types of MySQL indexes

What is an index? An index is a data structure th...

MySQL helps you understand index pushdown in seconds

Table of contents 1. The principle of index push-...

Implementation of CSS linear gradient concave rectangle transition effect

This article discusses the difficulties and ideas...

Detailed explanation of type protection in TypeScript

Table of contents Overview Type Assertions in syn...

MySQL query sorting and paging related

Overview It is usually not what we want to presen...

Detailed explanation of HTML basics (Part 1)

1. Understand the WEB Web pages are mainly compos...