En poursuivant votre navigation sur le site, vous acceptez l’utilisation de cookies pour : [vous identifier / personnaliser votre expérience]. Cliquez ici Pour en savoir plus.

Script CSS : Animation Css3

...

ConnexionSe connecterInscriptionS'inscrire
Script mis à jour le 16/12/14

Description du script CSS :

Animation de sphère Css3

Droits d'utilisations de ce script CSS :

Je peux revendre ce script
Je peux l'utiliser plusieurs fois
Je peux l'utiliser pour mes clients
Je peux modifier ce script
Je dois citer l'auteur du script
<div id='wrapper'>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div>  <div class='item'></div></div>/*CSS*/html {  background: #111;  overflow: hidden;}#wrapper {  height: 0;  width: 0;  position: relative;  left: 50%;  top: 50vh;  margin-left: 57px;}.item {  position: absolute;  height: 0;  width: 0;  border: 2px solid #eee;  border-radius: 50%;  -webkit-transform: rotateY(50deg);          transform: rotateY(50deg);  top: 50%;}.item:nth-of-type(1) {  -webkit-animation: rotation 26s infinite -2s linear;          animation: rotation 26s infinite -2s linear;}.item:nth-of-type(2) {  -webkit-animation: rotation 26s infinite -4s linear;          animation: rotation 26s infinite -4s linear;}.item:nth-of-type(3) {  -webkit-animation: rotation 26s infinite -6s linear;          animation: rotation 26s infinite -6s linear;}.item:nth-of-type(4) {  -webkit-animation: rotation 26s infinite -8s linear;          animation: rotation 26s infinite -8s linear;}.item:nth-of-type(5) {  -webkit-animation: rotation 26s infinite -10s linear;          animation: rotation 26s infinite -10s linear;}.item:nth-of-type(6) {  -webkit-animation: rotation 26s infinite -12s linear;          animation: rotation 26s infinite -12s linear;}.item:nth-of-type(7) {  -webkit-animation: rotation 26s infinite -14s linear;          animation: rotation 26s infinite -14s linear;}.item:nth-of-type(8) {  -webkit-animation: rotation 26s infinite -16s linear;          animation: rotation 26s infinite -16s linear;}.item:nth-of-type(9) {  -webkit-animation: rotation 26s infinite -18s linear;          animation: rotation 26s infinite -18s linear;}.item:nth-of-type(10) {  -webkit-animation: rotation 26s infinite -20s linear;          animation: rotation 26s infinite -20s linear;}.item:nth-of-type(11) {  -webkit-animation: rotation 26s infinite -22s linear;          animation: rotation 26s infinite -22s linear;}.item:nth-of-type(12) {  -webkit-animation: rotation 26s infinite -24s linear;          animation: rotation 26s infinite -24s linear;}.item:nth-of-type(13) {  -webkit-animation: rotation 26s infinite -26s linear;          animation: rotation 26s infinite -26s linear;}@-webkit-keyframes rotation {  0% {    -webkit-transform: rotateY(50deg);            transform: rotateY(50deg);    padding: 0;    left: 0;    top: 0;  }  40% {    padding: 105px;    left: -170px;    top: -105px;  }  50% {    padding: 115px;    left: -210px;    top: -115px;  }  60% {    padding: 105px;    left: -230px;    top: -105px;  }  100% {    -webkit-transform: rotateY(0deg);            transform: rotateY(0deg);    padding: 0;    left: -150px;    top: 0;  }}@keyframes rotation {  0% {    -webkit-transform: rotateY(50deg);            transform: rotateY(50deg);    padding: 0;    left: 0;    top: 0;  }  40% {    padding: 105px;    left: -170px;    top: -105px;  }  50% {    padding: 115px;    left: -210px;    top: -115px;  }  60% {    padding: 105px;    left: -230px;    top: -105px;  }  100% {    -webkit-transform: rotateY(0deg);            transform: rotateY(0deg);    padding: 0;    left: -150px;    top: 0;  }}

Copier/coller le code et découvrez vosu même l'animation

16/12/14 : Première version du script

Questions posées fréquemment
Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.
Demande de support

Vous rencontrez une difficulté ou avez besoin d'informations supplémentaires sur le script ? N'hésitez pas à contacter l'auteur en cliquant sur le bouton ci-dessous :

GwenWeb

Inscrit le : 24 Septembre 2014

Intérêt : non-renseigné

Voir son profil >>

Nombre de visites du script : 887

Moyenne de visites des scripts : 13


Prix de vente moyen d'un script : 3 euros

// Commentaires sur ce script CSS :

Veuillez vous inscrire et/ou vous connecter pour laisser un commentaire

Il n'y a pas encore de commentaire sur ce script.
Essayez-le et soyez le premier à laisser votre avis !

Basile : Mascotte chez 1script.frSITE EN TEST PUBLIQUE :
Bonjour, je vous rappelle que le site est en phase de test. En savoir plus ?
Script par GwenWeb
Autres scripts du même membre GRATUIT

PARTAGER CE SCRIPT

Twitter Facebook Google Plus Linkedin email

SECTIONS / CATEGORIES

NEWSLETTER : S'ABONNER

BASIL VOUS EXPLIQUE TOUT

Découvrez 1script.fr en vidéo

SUIVEZ 1SCRIPT.FR

ACCÈS