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.1 Building the Directory Structure This operati...
Table of contents 1. How to represent the current...
1. Key points for early planning of VMware vSpher...
1. Custom text selection ::selection { background...
For a newly created website, take ASP.NET MVC5 as...
Table of contents 1minio is simple 2 Docker build...
Table of contents 1. Make good use of components ...
HTML5 and jQuery implement the preview of local i...
Method 1: Use the SET PASSWORD command First log ...
Clickhouse Introduction ClickHouse is a column-or...
Using the UNION Operator union : Used to connect ...
Vue methods and properties 1. Methods Usage 1 met...
Please see the following screenshot I took from G...
Table of contents 1. React Basic Usage Notable Fe...
1. Command method Run the nginx service in the cr...