SCALE, ANIMACIÓN con CSS y HTML

↑ Me gusta (1)

Para animaciones sencillas es muy común usar solo CSS3, de hecho es la mejor opción. En este video usamos un código CSS sencillo y normal pero funcional para dar con el aprendizaje real y dominio de este concepto:

HTML

    <header>
        <a href="#">Regístrate</a>
    </header>

CSS

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

header{
    background-image: url(bg-pc.jpg);
    background-position: center;
    background-size: cover;
    height: 480px;
    position: relative;
}

header:after{
    content: "";
    background-color: rgba(0,0,0, .3);
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}

header a{
    background: #3b5998;
    border-bottom: 2px solid #29487d;
    color: #ffffff;
    text-decoration: none;
    font-family: arial;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    width: 110px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -18px;
    margin-left: -55px;
    transition: .3s all;
    z-index: 1;
}

header a:hover{
    transform: scale(1.2);
    opacity: .9;
}

Recuerda marcar tus lecciones estudiadas..

  • Ernesto Canquiz

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