J'allais à travers des exemples de sites Web simples et trouvais ceci: http://alwayscreative.net/ . Je suis totalement émerveillé par le disque dans l'arrière-plan qui tourne infiniment. J'ai examiné quelques exemples mais aucun n'a fonctionné de cette façon. Quelqu'un peut-il me dire comment était-ce mis en œuvre? Merci.
5 Réponses :
Je viens de faire un "élément d'inspecter" en chrome. Voici le CSS.
.vector1 {
-moz-animation: rotation1 30s linear infinite;
-o-animation: rotation1 30s linear infinite;
-webkit-animation: rotation1 30s linear infinite;
animation: rotation1 30s linear infinite;
}
Oui, je l'ai fait sur Firebug, mais cela ne fera pas pivoter une image que j'utilise dans ma page Web.
Avez-vous un code que vous pouvez montrer?
Vous devez également ajouter keyframes règle pour le faire fonctionner.
CSS3: strong> p>
<img src="//placehold.it/200x200/cfc?text=Wooo!" />
Aucune raison de préfixer avec des sélecteurs basés sur le navigateur dans JQuery 1.8.
@Roko: Hey, je sais que c'est boiteux, pouvez-vous m'aider avec un problème JS: D, je l'ai posté ici il y a longtemps, mais il est encore non résolu, peut-être que vous pouvez me donner votre identifiant email ou fb ...
@Roko Stackoverflow.com/Questtions/11883124/...
Laissez-nous Continuer cette discussion en chat
Est possible de changer la durée de la boucle?
S'il vous plaît vérifier cette ligne. Nous pouvons utiliser CSS3 pour faire pivoter l'image. et je vais tester au chrome fonctionne bien http://jsfiddle.net/suhkh/
Veuillez inclure le code et la description correspondants dans la réponse elle-même afin que nous ayons une réponse complète si le lien diminue
Voici comment il est implémenté dans votre exemple: mais je ne vois aucun intérêt (j'oserais dire qu'il semblait un peu étrange ...) dans la mise en place du navigateur préfixé transformer dans un autre navigateur spécifique des images clés. P> Il manque également d'une charge clé générique et de support IE10, il s'agit donc de la mise en œuvre: P> @-webkit-keyframes rotation1{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation1{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation1{
from{-o-transform:rotate(0deg);}
to{-o-transform:rotate(360deg);}
}
@keyframes rotation1{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.vector1{-moz-animation:rotation1 30s linear infinite;-o-animation:rotation1 30s linear infinite;-webkit-animation:rotation1 30s linear infinite;animation:rotation1 30s linear infinite}
Cet exemple rend très bien la rotation infinie: Vous pouvez le tester ici: http://jsfiddle.net/hs68a/2/
-BrowserSpecificSyntax-Animation: 30S linéaire 0S Normal Aucun Infinit Rotation1;@OhgodWhy: Je ne travaille pas dans ma page Web en utilisant une autre image.
@Anuj kaitithwas bien duh ... c'est Beacuse
rotation1 est une clé CSS pré-définie ....@ - webkit-keyframmes rotation1 {/ * ligne 220, ../sass/screen .SSSS * / de {-WebKit-Transform: rotation (0deg); -Moz-transformer: rotation (0deg); -Ms-transformer: rotation (0deg); -O-transformer: tournez (0deg); transformer: pivoter (0deg); } Pourquoi ne pas simplement inspecter ce fichier CSS et consulter les images clés dans?