ROTATE, ANIMACIÓN con CSS y HTML

↑ Me gusta (1)

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. 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);
}
  • Ernesto Canquiz

Italo Morales F. Italo Morales F. 6,800.00 XP