CSS3+Bezier curve to achieve scalable input search box effect

Without further ado, here are the renderings.

The core code is transition: cubic-bezier(0.68, -0.55, 0.27, 1.55) all 1s; a buffer effect is added to the transition effect through the cubic-bezier (Bessel curve) of the transition attribute. The main module of the HTML code is an input plus a parent div. The div width needs to be larger than the input width. Without cubic-bezier, this effect can be achieved. transition: all 1s;

The transition effect lacks a buffer effect. The motion curve we use here is

Finally, the complete code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            .search-wrap{
                margin: 0 auto;
                width: 200px;
                height: 200px;
            }
            .search{
                width: 50px;
                height: 30px;
                margin: 20px 10px 0 0;
                border: 1px solid #4000FF !important;
                padding: 0 10px;
                float: right;
                border-radius: 5px;
                color: #fff;
                transition: all 1s;
                opacity: .5;
            }
            .search:focus{
                width: 100%;
                outline:none;
            }
        </style>
    </head>
    <body>
        <div class="search-wrap">
            <input type="text" name="" class="search">
        </div>
    </body>
</html>

This is the end of this article about how to use CSS3+Bezier curve to achieve a retractable input search box effect. For more relevant CSS3 Bezier curve retractable input search box content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Analyze the method of prometheus+grafana monitoring nginx

>>: How to make a div height adaptive to the browser height

Tutorial on installing MySQL 5.7.28 on CentOS 6.2 (mysql notes)

CSS3+Bezier curve to achieve scalable input search box effect

Tutorial on installing MySQL 5.7.28 on CentOS 6.2 (mysql notes)

Detailed explanation of MySQL data rows and row overflow mechanism

Ubuntu 18.04 does not prompt for password when installing MySQL and how to solve it

Linux kernel device driver Linux kernel module loading mechanism notes summary

js handles account logout when closing the browser

Simple implementation of mini-vue rendering

MySQL reports an error: Can't find file: './mysql/plugin.frm' solution

MySql index improves query speed common methods code examples

Solution to the problem that the docker container cannot be stopped

MySQL 8.0.17 installation graphic tutorial

Recommend

In-depth understanding of umask in new linux file permission settings

How to use boost.python to call c++ dynamic library in linux

About the solution record of the page unresponsiveness when using window.print() in React

Detailed graphic tutorial on installing centos7 virtual machine in Virtualbox

Analysis and solution of a.getAttribute(href,2) problem in IE6/7

Linux uses iptables to limit multiple IPs from accessing your server

MySQL MyISAM default storage engine implementation principle

Bundling non-JavaScript static resources details

Solution to the error in compiling LVGL emulator on Linux

Detailed explanation of how Nginx solves the problem of cross-domain access to front-end resources

A brief discussion on the solution to the failure of starting the server installation in MySQL

How to use Celery and Docker to handle periodic tasks in Django

How to use axios request in Vue project

Sample code for generating QR code using js

Summary of Linux commands commonly used in work