EFECTO DE GOKU FLOTANDO EN HTML Y CSS3

HTML
<div class="container">
    <div class="goku"></div>
    <div class="sombra"></div>
</div>

<!--
    fuente : https://www.youtube.com/watch?v=ckAEannric0
-->
CSS
body{
    background:#ccc;    
}

.container{
    width:400px;
    height:400px;
    margin:70px auto;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}

.goku{
    height:300px;
    width:300px;
    background-image:url("goku.png");
    background-size:cover;
    animation:animar 1s infinite alternate;
}

.sombra{
    height:100px;
    width:200px;
    background:#333;
    border-radius:50%;
    transform:rotateX(-70deg);
    animation:sombra 1s infinite alternate;
}

@keyframes animar{
    to{
        transform:translateY(-50px);
    }
}
@keyframes sombra{
    to{
        transform:scale(0.6) rotateX(-70deg);
        opacity:0.2;
    }
}

Autor: Web322

Publicado: 29/12/2020

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario