Πουλάκι twitter που πετάει (Widget)

TetsiTech
0


Βάλτε στο blog σας ένα πουλάκι που πετάει και όταν κάνουμε click επάνω του μεταβαίνουμε στη σελίδα μας στο Twitter.

Δείτε demo


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

<style type="text/css">
#tweet-3d {
 -webkit-animation: rotate_3d_vliegen 4s linear infinite;
 -moz-animation: rotate_3d_vliegen 4s linear infinite;
 -ms-animation: rotate_3d_vliegen 4s linear infinite;
 -o-animation: rotate_3d_vliegen 4s linear infinite;
 animation: rotate_3d_vliegen 4s linear infinite;
 width: 130px;
 height: 130px;
 background: url("https://dl.dropbox.com/s/fsxwxb754wlyuwr/1323727371_picons03.png") no-repeat center center;
 float: left;
 margin-left: 0;
 margin-top: 0;
}

@keyframes "rotate_3d_vliegen" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
 }
 10% {
    -webkit-transform: rotate3d(1,0,0,30deg);
    -moz-transform: rotate3d(1,0,0,30deg);
    -o-transform: rotate3d(1,0,0,30deg);
    -ms-transform: rotate3d(1,0,0,30deg);
    transform: rotate3d(1,0,0,30deg);
 }
 20% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
 }
 30% {
    -webkit-transform: rotate3d(1,0,0,30deg);
    -moz-transform: rotate3d(1,0,0,30deg);
    -o-transform: rotate3d(1,0,0,30deg);
    -ms-transform: rotate3d(1,0,0,30deg);
    transform: rotate3d(1,0,0,30deg);
 }
 40% {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
 }
 50% {
    -webkit-transform: rotate3d(1,0,0,30deg);
    -moz-transform: rotate3d(1,0,0,30deg);
    -o-transform: rotate3d(1,0,0,30deg);
    -ms-transform: rotate3d(1,0,0,30deg);
    transform: rotate3d(1,0,0,30deg);
 }
 60% {
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
 }
 70% {
    -webkit-transform: rotate3d(1,0,0,30deg);
    -moz-transform: rotate3d(1,0,0,30deg);
    -o-transform: rotate3d(1,0,0,30deg);
    -ms-transform: rotate3d(1,0,0,30deg);
    transform: rotate3d(1,0,0,30deg);
 }
 80% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
 }
 90% {
    -webkit-transform: rotate3d(1,0,0,30deg);
    -moz-transform: rotate3d(1,0,0,30deg);
    -o-transform: rotate3d(1,0,0,30deg);
    -ms-transform: rotate3d(1,0,0,30deg);
    transform: rotate3d(1,0,0,30deg);
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    margin-left: 140px;
    -webkit-transform: rotate3d(1,0,0,0deg);
    -moz-transform: rotate3d(1,0,0,0deg);
    -o-transform: rotate3d(1,0,0,0deg);
    -ms-transform: rotate3d(1,0,0,0deg);
    transform: rotate3d(1,0,0,0deg);
 }

}

@-moz-keyframes rotate_3d_vliegen {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   -moz-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 10% {
   -moz-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 20% {
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 30% {
   -moz-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 40% {
   -moz-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 50% {
   -moz-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 60% {
   -moz-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 70% {
   -moz-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 80% {
   filter: alpha(opacity=100);
   opacity: 1;
   -moz-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 90% {
   -moz-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-left: 140px;
   -moz-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }

}

@-webkit-keyframes "rotate_3d_vliegen" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 10% {
   -webkit-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 20% {
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 30% {
   -webkit-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 40% {
   -webkit-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 50% {
   -webkit-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 60% {
   -webkit-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 70% {
   -webkit-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 80% {
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 90% {
   -webkit-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-left: 140px;
   -webkit-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }

}

@-ms-keyframes "rotate_3d_vliegen" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 10% {
   -ms-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 20% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 30% {
   -ms-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 40% {
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 50% {
   -ms-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 60% {
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 70% {
   -ms-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 80% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 90% {
   -ms-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   margin-left: 140px;
   -ms-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }

}

@-o-keyframes "rotate_3d_vliegen" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
   -o-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 10% {
   -o-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 20% {
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 30% {
   -o-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 40% {
   -o-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 50% {
   -o-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 60% {
   -o-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 70% {
   -o-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 80% {
   filter: alpha(opacity=100);
   opacity: 1;
   -o-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
 90% {
   -o-transform: rotate3d(1,0,0,30deg);
   transform: rotate3d(1,0,0,30deg);
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
   margin-left: 140px;
   -o-transform: rotate3d(1,0,0,0deg);
   transform: rotate3d(1,0,0,0deg);
 }
}
/* by Tetsi */
</style>
<a id="tweet-3d" href="https://twitter.com/TetsiWorld" target="_blank"></a>
Tags
Κοινοποίηση σε άλλες εφαρμογές

Εμφάνιση περισσότερων

Δημοσίευση σχολίου

0 Σχόλια
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Δημοσίευση σχολίου (0)
To Top