Not much to say, on the effect map.
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 of the transition property.
The main module of the html code part is an input plus a parent div. The div width needs to be greater than the input width
This effect can be achieved without cubic-bezier
transition: all 1s;
It's just that the transition effect lacks a buffer effect.
The motion curve we use here is
Finally, complete the 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>