ROTATE, ANIMACIÓN con CSS y HTML

Las páginas web hoy día tienen que tener animaciones, una excelente apariencia y comportamiento, en este video tutorial práctico enseñamos cómo rotar (ROTATE) con CSS y HTML.

Inicia sesión para poder registrar las lecciones que has completado Login

Para hacer animaciones a veces requerimos de FRAMEWORK y PLUGINS, sin embargo para esta serie avanzada de CSS3 quiero que veas cómo con poco código hacemos mucho y obtenemos un gran resultado.

Para lograr este ejercicio usamos un ejemplo con redes sociales, a continuación el código:

HTML

        <header>
            <h2>Nuestras Redes</h2>
            <ul>
                <li>
                    <a href="#">
                        <figure>
                            <img src="facebook.png">
                            <figcaption>Facebook</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="instagram.png">
                            <figcaption>Instagram</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="linkedin.png">
                            <figcaption>LinkedIn</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="twitter.png">
                            <figcaption>Twitter</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>
        </header>

CSS

body{
    margin: 0px;
    background: #d1d1d1;
}

header{
    background: #29487d;
    padding: 40px 0px;
}

header h2{
    color: #ffffff;
    text-align: center;
    margin: 0px;
    font-family: arial;
    font-size: 48px;
    text-shadow: 0px 2px 2px rgba(0,0,0,.4);
}

header ul{
    padding: 0px;
    text-align: center;
    list-style: none;
}

header ul li{
    display: inline-block;
}

header ul li a{
    color: #ffffff;
    text-decoration: none;
}

header figure figcaption{
    font-family: arial;
}

header figure img{
    transition: .4s all;
    width: 64px;
}
    
header figure img:hover{
    transform: rotate(360deg);
}

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


Error en modificacion de datos

Hola, Estoy teniendo un error con laravel (5.7) y no le puedo encontrar la vuelta.

Mi problema:

Tengo una lista de usuarios la cual tiene 3 botones (ver, activar y eliminar) mi problema viene con el boton activar el cual activa o desactiva un usuario segun su estado ( si esta activado lo desactiva y si esta desactivado lo activa), pero cuando presiono el boton me tira ...

Como crear un array y almacenarlo en una Base de Datos

Necesito ayuda con un problema, estoy haciendo un tipo de sistema de facturación y los servicios que se van a facturar los quiero guardar en un array, luego éste array almacenarlo en una sola columna de la base de datos. No tengo mucho conocimientos de Arrays. Pero ya había trabajado en una tienda virtual y la parte del carrito la hacía así, con un array.

El punto es qu...

owen-it / laravel-auditing

saludos a la comunidad necesitaría de su ayuda con esta librería   ooowen-it / laravel-auditing para un proyecto en laravel de echo encontré material pero no me es fácil entenderlo (auditoria de usuarios este es link https://pusher.com/tutorials/realtime-audit-trail-laravel me ayudaría mucho un videotutorial gracias!...

No puedo instalar el paquete de shinobi

soy nuevo en esto , estoy viendo su curso de roles y permisos en su canal de youtube, necesito instalar el paquete de shinobi pero no se puede, me sale lo siguiente:

Problem 1 - Installation request for caffeinated/shinobi ^3.3 -> satisfiable by caffeinated/shinobi[v3.3]. - Conclusion: remove laravel/framework v5.8.4 - Conclusion: don't install laravel/fr...