Πουλάκι twitter με κίνηση (Widget)

TetsiTech

Βάλτε στο blog σας ένα πουλάκι που όταν μεταβείτε με το ποντίκι επάνω του, τότε αρχίζει να πετάει.

Δείτε demo

Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα κόκκινα γράμματα με τη δικιά σας σελίδα στο twitter. Πατήστε [Αποθήκευση]. (Δε χρειάζεται να βάλετε τίτλο στο gadget)

<style type="text/css">
/* by Tetsi */

.twitter-bird {
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVyyz-o5O_x6MUlffcLkeRFnHLKOYkh18Nk9NFt2F-0i4w6UDJgSzcNcs2ZHj0kvDisqKZ28ofrVYqy9oTnXS51ynYjCNUDeo2-NJaASlrAQQ6RpfGIMxUj0OuKX96hGTtWvFhp4ezAU/s1600/twitter-bird-sprite-mini.png);
 cursor: pointer;
 display: inline-block;
 height: 75px;
  margin: 0px -30% 0 0;
 width: 75px;
}

.twitter-bird:hover {
 -webkit-animation: fly 0.2s steps(3) 0 infinite;
 -moz-animation: fly 0.2s steps(3) 0 infinite;
 animation: fly 0.2s steps(3) 0 infinite;
}

@-webkit-keyframes fly {
 from { background-position: 0 0; }
    to { background-position: -225px 0; }
}
@-moz-keyframes fly {
 from { background-position: 0 0; }
    to { background-position: -225px 0; }
}
@keyframes fly {
 from { background-position: 0 0; }
    to { background-position: -225px 0; }
}
</style>

<table border="0">
 <tr>
  <td><div class="separator" style="clear: both; text-align: left;">
  <a class="twitter-bird step" href="https://twitter.com/TetsiWorld" target="_blank"></a></div></td>
  <td><div style="text-shadow: 3px 3px 5px #bae4fa; text-align: right;">
<a style="color: #52bdf5; font-size: large;" href="https://twitter.com/TetsiWorld" target="_blank"><b>Ακολουθήστε μας</b></a></div></td>
 </tr>
</table>