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
Recommend
MySQL multi-master and one-slave data backup method tutorial
Overview Operations on any one database are autom...
MySQL 8.0.13 download and installation tutorial with pictures and text
MySQL is the most commonly used database. You mus...
Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL Environment Construction Tutorial
Preparation 1. Environmental Description: Operati...
Solution to HTML2 canvas SVG not being recognized
There is a new feature that requires capturing a ...
Detailed description of component-based front-end development process
Background <br />Students who work on the fr...
Share 20 excellent web form design cases
Sophie Hardach Clyde Quay Wharf 37 East Soapbox Rx...
Implementation ideas for docker registry image synchronization
Intro Previously, our docker images were stored i...
How to use MySQL binlog to restore accidentally deleted databases
Table of contents 1 View the current database con...
How to install setup.py program in linux
First execute the command: [root@mini61 setuptool...
JS implements a simple brick-breaking pinball game
This article shares the specific code of JS to im...
Script example for starting and stopping spring boot projects in Linux
There are three ways to start a springboot projec...
CUDA8.0 and CUDA9.0 coexist under Ubuntu16.04
Preface Some of the earlier codes on Github may r...
Memcached method for building cache server
Preface Many web applications store data in a rel...
Use native js to simulate the scrolling effect of live bullet screen
Table of contents 1. Basic principles 2. Specific...
Docker image creation and one-click packaging and deployment of the entire project
Introduction to common Dockerfile instructions in...