ejemplo de buscador animado con CSS en español

en el siguiente código te muestro como puedes crear un buscador animado para tu web es decir un buscador que al hacer clic sobre él se haga grande es decir que cuando el coja el foco se haga grande y al salir de él cuando pierde el foco vuelva a su tamaño normal y todo ello utilizando solamente estilos CSS

veamos cómo funciona:

<html>
<head>
<style> 
input[type=text] {
 width: 130px;
 box-sizing: border-box;
 border: 2px solid #ccc;
 border-radius: 4px;
 font-size: 16px;
 background-color: white;
 background-image: url('lupa.png');
 background-position: 10px 10px; 
 background-repeat: no-repeat;
 padding: 12px 20px 12px 40px;
 -webkit-transition: width 0.4s ease-in-out;
 transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
 width: 100%;
}
</style>
</head>
<body>
<p>Buscador animado:</p>
<form>
 <input type="text" name="buscador" placeholder="Buscar..">
</form>
</body>
</html>

en lo primero que te has de fijar es en la parte de abajo en el apartado del Body en el cual tenemos definido un formulario y dentro tenemos un input de tipo text al cual hemos llamado buscador

y en la parte de arriba en el head tenemos la definición de estilos CSS en el cual tenemos dos clases creadas para los elementos input de tipo text

la primera es la que define el diseño por omisión de nuestro buscador un tamaño de 130. un borde alrededor , una tipografía, unos colores ….

fíjate también que tenemos una imagen de fondo que se llama lupa. PNG

y para finalizar y lo más importante es la definición de la transición es decir la animación la cual hemos indicado que anime la anchura

y para que se ejecute la animación tenemos creada la segunda clase la cual se ejecutará cuando el campo de texto reciba el foco y le hemos dicho que la anchura sea del 100%

con esto ya tienes un buscador animado para tu de forma muy simple solo utilizando estilos CSS