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.
...
Animation de sphère Css3
<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
Vous trouverez un bouton "signaler" en haut à droite de cette fiche pour avertir le créateur d'un problème.
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 :
Nombre de visites du script : 1393
Moyenne de visites des scripts : 13
Prix de vente moyen d'un script : 3 euros