Anterior mente he publicado varios tutoriales sobre lo que podemos hacer con CSS, puedes verlos es esta Etiqueta,
en esta ocasion volveremos a jugar con CSS3, en esta ocasión para hacer animaciones usando la declaracion @keyframes,
con la cual jugaremos para poder hacer que Larry el pájaro de twitter volando por el blogs
El tutorial es muy simple y no es cosa del otro mundo, ademas nos da la ventaja de no sobrecagar el blogs y es muy facil de agregarlo al blogs,
para quienes son nuevos blogger, les recuedo que esto solo se vera en navegadores modernos y claro no funciona con IE.
Como Ejemplo pueden ver como larry flota por tutoblogger
Para agregar a larry flotando en tu blogs, ve a Diseño, a Añadir Gadget, HTML/Javascript y pega lo siguiente:
<style type="text/css">
#twitter {
width: 125px;
height: 125px;
position: fixed;
background: url(https://lh6.googleusercontent.com/-lsTVVhpR3ME/UXmKPhM-_eI/AAAAAAAAAmA/OFGDPUi28yk/h120/sigueme.png);
animation: twitter 25s infinite;
-o-animation: twitter 25s infinite;
-moz-animation: twitter 25s infinite;
-webkit-animation: twitter 25s infinite;
}
@-webkit-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-moz-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
@-o-keyframes twitter
{
0% {left:-5%;bottom:0px;}
10% {bottom:15%}
20% {bottom:2%}
30% {bottom:15%}
40% {bottom:2%}
50% {bottom:15%}
60% {bottom:2%}
70% {bottom:15%}
80% {bottom:2%}
100% {left:105%;bottom:15%}
}
</style>
<a href="http://twitter.com/NombUsuario" target="_blank" id="twitter"></a>
En la parte de color rojo lo cambias por tu nombre de usuario. Facil verdad....
