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;
}
}
Deja tu comentario