Use CSS3 to animate the input box similar to the Google login page Effect 1 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 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)
1. Command method Run the nginx service in the cr...
Preface: To store multiple elements, arrays are t...
Overview Operations on any one database are autom...
Special statement: This article is translated bas...
A very useful function group_concat(), the manual...
Preface To solve the single point of failure, we ...
What is an index? An index is a data structure th...
Table of contents 1. The principle of index push-...
This article discusses the difficulties and ideas...
Table of contents Overview Type Assertions in syn...
Overview It is usually not what we want to presen...
1. <div></div> and <span></s...
Table of contents 1. Effect display 2. Enhanced v...
1. Understand the WEB Web pages are mainly compos...
1. Color matching effect preview As shown in the ...