Sitio web de Apple como caja de búsqueda animada con transiciones CSS3

Vista prévia

Descripción

El objetivo es crear un cuadro de búsqueda animado que se expandirá automáticamente con una animación basada en la transición de CSS3 suave cuando se centra en, como se ve en el < a href = "https://www.apple.com/" target = "_ blank" rel = "noopener" de Apple > sitio web oficial . Construido por < a href = "https://codepen.io/molenmaulana" target = "_ blank" rel = "noopener" > molenmaulana .

Funcionamiento

Cree un cuadro de entrada para el cuadro de búsqueda.

<input name="q" type="text" size="30" placeholder="Search some stuffs">

El CSS para el estilo del cuadro de búsqueda y animarlo cuando se centra en.

input[type="text"] {

background: url(search.png) no-repeat 10px 6px #444;

border: 0 none;

font: bold 12px Arial, Helvetica, Sans-serif;

color: #cccccc;

width: 107px;

padding: 6px 15px 6px 35px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

border-radius: 20px;

text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;

-webkit-transition: all 0.7s ease 0s;

-moz-transition: all 0.7s ease 0s;

-o-transition: all 0.7s ease 0s;

transition: all 0.7s ease 0s;
}

input[type="text"]:focus { width: 150px; }