Buscador con transiciones CSS 1x30q Ejemplo 2- Tutoriales En Linea

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Buscador con transiciones CSS - Ejemplo 2- Tutoriales En Linea</title>
</head>
<body>

<style>

@import "https://tutorialesenlinea.mejorapp.org/engine/classes/min/index.php?charset=utf-8&f=engine/skins/fonts/fontawesome/styles.min.css";

@import "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4-rtl/4.1.1-1/css/bootstrap.min.css";

.demo, .demo-2 {
    position:relative;
    height:100px;
    width:500px;
}
.demo .form-search, .demo-2 .form-search {
    position:absolute;
    right:0px;
    top:0px;
}
.demo .form-search input[type=text],
.demo-2 .form-search input[type=text] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
    border: solid 1px #ccc;
    padding: 9px 18px;
    width: 200px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
.demo-2 .form-search input[type=text] {
    width:60px;
    position:absolute;
    right:0px;
    z-index:1000;
    padding:8px 12px;
    cursor:pointer;
}
.demo-2 .form-search div.input-group {
    width:60px;
}
.demo .form-search input[type=text]:focus {
    width: 350px;
    background-color: #fff;
}
.demo-2 .form-search input[type=text]:focus {
    position:absolute;
    right:60px;
    width:250px;
}
.demo .form-search button.btn,
.demo-2 .form-search button.btn {
    padding:16px 12px;
    border-top-right-radius:4px;
    border-bottom-right-radius: 4px;
    cursor:not-allowed;
}
.demo-2 .form-search button.btn {
  padding:15px 12px;
}
/* Adaptamos las reglas al código que genera drupal y definimos los estilos generales */

/* Lo primero es posicionar el formulario para asegurarnos que el efecto se produce de derecha a izquierda */
.navbar-form {
    position:absolute;
    right:0px;
    top:300px;
}

/* Definimos las transiciones */

.navbar-form .form-control[type=text] {
    background: transparent;
    display:inline-block;
    transition: all .5s;
}
/* Al situar el puntero en el campo de búsqueda este cambia su color de fondo a blanco, el color de la letra, el borde y la sombra */
.navbar-form .form-control[type=text]:focus {
    background-color: #fff;
    border-color: #729fcf;
    color:#333;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* Para pantallas grandes hacemos que el formulario se despliegue con amplitud ya que disponemos de espacio en la barra de navegación, la busqueda se ejecuta con intro o pinchando en el icono de la lupa */
@media (min-width:1200px) {
    .navbar-form input.form-control[type=text] { width: 160px; }
    .navbar-form input.form-control[type=text]:focus { width: 350px; }
}

/* Para pantallas menores reducimos el campo de busqueda y hacemos que se despliegue cuando hacemos focus sobre el icono de la lupa. La busqueda se ejecuta con intro o pinchando de nuevo en el icono de la lupa */
@media (max-width: 1200px) {
    .navbar-form .form-control[type=text] {
        width:40px;
        position:absolute;
        right:0px;
        z-index:1000;
        padding:8px 12px;
        cursor:pointer;
    }
    .navbar-form,
    .navbar-form div.input-group {
        width:40px;
        height:40px;
    }
    .navbar-form .form-control[type=text]:focus {
        position:absolute;
        right:40px;
        width:250px;
    }
}

/* Para pantallas de smartphones ajustamos el ancho del campo de busqueda */
@media (max-width: 375px) {
    .navbar-form .form-control[type=text]:focus {
        width:150px;
    }
}

.form-text{margin-top: 0!important}
</style>

</body>
</html>