-
Para texto, imagen...
Fuente
HTML
<div id="sq"> <div class="circ1">Te amo</div> <div class="circ2"><a href="http://tutorialgloriav.eklablog.com/" target="_blank"><img src="http://imagenes.gifmania.com.pr/Gifs-Animados-Amor/Animaciones-Corazones/Imagenes-Animadas-Corazones-Colores/corazon-colores16.gif" alt="" /></a></div> <div class="circ3">Con corazón y alma</div> </div>
CSS
<style><!--.circ1{ width:160px; height:160px; border-radius:120px; background-color:rgb(255, 255, 255); } .circ2{ width:150px; height:180px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); } .circ3{ width:150px; height:220px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); } .circ1{ width:120px; height:120px; border-radius:120px; background-color:rgb(255, 255, 255); margin:20px 0 0 60px; } .circ2{ width:150px; height:80px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); margin:-90px 0 0 80px; } .circ3{ width:150px; height:90px; border-radius: 80px / 50px; background-color:rgb(255, 255, 255); margin:-90px 0 0 0px; } @-webkit-keyframes animar{ 0% { } 50% { -webkit-transform:translateX(700px) scale(1.2);} 100% {-webkit-transform:translateX(0px); } } #sq{ -webkit-animation-name: animar; -webkit-animation-duration: 20s; -webkit-animation-timing-function: lineal; -webkit-animation-iteration-count:infinite; opacity: 0.6; margin:0; position:absolute; } #sq{ -webkit-animation-name: animar; -webkit-animation-duration: 20s; -webkit-animation-timing-function: lineal; -webkit-animation-iteration-count:infinite; opacity: 0.6; margin:0; position:absolute; } #sq2{ -webkit-animation-name: animar; } --></style>