Port.forumgreek.com
Θέλετε να αντιδράσετε στο μήνυμα; Φτιάξτε έναν λογαριασμό και συνδεθείτε για να συνεχίσετε.

Tile Animations CSS

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Πήγαινε κάτω

Port Admin
Port Admin
Admin
Αριθμός μηνυμάτων : 2651
Πόντοι : 6380
Ημερομηνία εγγραφής : 06/03/2017
https://port.forumgreek.com

ΔημοσίευσηPort Admin Τετ Αυγ 30, 2017 1:27 am

[Πρέπει να είστε εγγεγραμμένοι και συνδεδεμένοι για να δείτε αυτόν το σύνδεσμο.]


Κώδικας:
<div id="portfolio">
   <ul class="portfolio-grid">
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/1abc9c/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/2ecc71/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/3498db/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/9b59b6/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/16a085/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/27ae60/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/2980b9/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/8e44ad/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/f1c40f/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/e67e22/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/e74c3c/FFFFFF" alt="img01"/>
                  </a>
               </li>
               <li>
                  <a href="#" class="animated flipInX">
                     <img src="http://placehold.it/200x200/c0392b/FFFFFF" alt="img01"/>
                  </a>
               </li>
            </ul>

</div>



CSS:


Κώδικας:
body {
   height: 100%;
   background-color: #f2f2f2;
}

.portfolio-grid {
   list-style: none;
   padding: 0;
   margin: 0 auto;
   text-align: center;
   width: 100%;
}

.portfolio-grid li {
   display: inline-block;
   margin: 5px 5px 5px 5px;
   vertical-align: top;
    width:212px;
}

.portfolio-grid li > a,
.portfolio-grid li > a img {
    width: 100%;
   border: none;
   outline: none;
   display: block;
   position: relative;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.portfolio-grid li > a img:hover {
    border-radius: 50%;
    z-index: 9999;
}


/******************************************
 Animate.CSS By Dan Eden
******************************************/

.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
   -webkit-backface-visibility: visible !important;
   -webkit-animation-name: flipInX;
   -moz-backface-visibility: visible !important;
   -moz-animation-name: flipInX;
   -o-backface-visibility: visible !important;
   -o-animation-name: flipInX;
   backface-visibility: visible !important;

Επισκόπηση προηγούμενης Θ.Ενότητας Επισκόπηση επόμενης Θ.Ενότητας Επιστροφή στην κορυφή

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να απαντήσετε

Προκειμένου να απαντήσετε πρέπει να είστε μέλος.

Δημιουργία Λογαριασμού

Ενταχθείτε στην κοινότητά μας δημιουργώντας έναν λογαριασμό. Είναι πανεύκολο!


Δημιουργία ενός νέου Λογαριασμού

Σύνδεση

Έχετε ήδη έναν λογαριασμό; Κανένα πρόβλημα, συνδεθείτε εδώ.


Σύνδεση

 
Δικαιώματα σας στην κατηγορία αυτή
Δεν μπορείτε να απαντήσετε στα Θέματα αυτής της Δ.Συζήτησης