


Introduction détaillée aux détails de l'exemple de code de l'animation d'engrenage simulé HTML5
Il s'agit d'un effet spécial d'animation d'engrenage basé sur HTML5. Nous convertissons les principes physiques de la rotation des engrenages en code HTML5 et implémentons l'effet d'animation de la rotation des engrenages simulée sur la page Web. La plus grande caractéristique de cette animation d'engrenage est qu'elle est composée de plusieurs engrenages, ce qui augmente considérablement les exigences de l'algorithme pour la transmission des engrenages. De plus, nous n'avons pas utilisé JavaScript, mais du CSS3 pur pour l'implémenter.
Téléchargement du code source de la démo en ligne
Code HTML
<p id="level"> <p id="content"> <p id="gears"> <p id="gears-static"></p> <p id="gear-system-1"> <p class="shadow" id="shadow15"></p> <p id="gear15"></p> <p class="shadow" id="shadow14"></p> <p id="gear14"></p> <p class="shadow" id="shadow13"></p> <p id="gear13"></p> </p> <p id="gear-system-2"> <p class="shadow" id="shadow10"></p> <p id="gear10"></p> <p class="shadow" id="shadow3"></p> <p id="gear3"></p> </p> <p id="gear-system-3"> <p class="shadow" id="shadow9"></p> <p id="gear9"></p> <p class="shadow" id="shadow7"></p> <p id="gear7"></p> </p> <p id="gear-system-4"> <p class="shadow" id="shadow6"></p> <p id="gear6"></p> <p id="gear4"></p> </p> <p id="gear-system-5"> <p class="shadow" id="shadow12"></p> <p id="gear12"></p> <p class="shadow" id="shadow11"></p> <p id="gear11"></p> <p class="shadow" id="shadow8"></p> <p id="gear8"></p> </p> <p class="shadow" id="shadow1"></p> <p id="gear1"></p> <p id="gear-system-6"> <p class="shadow" id="shadow5"></p> <p id="gear5"></p> <p id="gear2"></p> </p> <p class="shadow" id="shadowweight"></p> <p id="chain-circle"></p> <p id="chain"></p> <p id="weight"></p> </p> </p> </p>
Code CSS
#level{ width:100%; height:1px; position:absolute; top:50%; } #content{ text-align:center; margin-top:-327px; } #gears{ width:478px; height:655px; position:relative; display:inline-block; vertical-align:middle; } #gears-static{ background:url(FgFnjks.png) no-repeat -363px -903px; width:329px; height:602px; position:absolute; bottom:5px; right:0px; opacity:0.4; } #title{ vertical-align:middle; color:#9EB7B5; width:43%; display:inline-block; } #title h1{ font-family: 'PTSansNarrowBold', sans-serif; font-size:3.6em; text-shadow:rgba(0, 0, 0, 0.36) 7px 7px 10px; } #title p{ font-family: sans-serif; font-size:1.2em; line-height:148%; text-shadow:rgba(0, 0, 0, 0.36) 1px 1px 0px; } .shadow{ -webkit-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36); -moz-box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36); box-shadow: 4px 7px 25px 10px rgba(43, 36, 0, 0.36); } /*gear-system-1*/ #gear15{ background: url(FgFnjks.png) no-repeat 0 -993px; width: 321px; height: 321px; position:absolute; left:45px; top:179px; -webkit-animation: rotate-back 24000ms linear infinite; -moz-animation: rotate-back 24000ms linear infinite; -ms-animation: rotate-back 24000ms linear infinite; animation: rotate-back 24000ms linear infinite; } #shadow15{ width:306px; height:306px; -webkit-border-radius:153px; -moz-border-radius:153px; border-radius:153px; position:absolute; left:52px; top:186px; } #gear14{ background: url(FgFnjks.png) no-repeat 0 -856px; width: 87px; height: 87px; position:absolute; left:162px; top:296px; } #shadow14{ width:70px; height:70px; -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px; position:absolute; left:171px; top:304px; } #gear13{ background: url(FgFnjks.png) no-repeat 0 -744px; width: 62px; height: 62px; position:absolute; left:174px; top:309px; -webkit-animation: rotate 8000ms linear infinite; -moz-animation: rotate 8000ms linear infinite; -ms-animation: rotate 8000ms linear infinite; animation: rotate 8000ms linear infinite; } #shadow13{ width:36px; height:36px; -webkit-border-radius:18px; -moz-border-radius:18px; border-radius:18px; position:absolute; left:187px; top:322px; } /*gear-system-2*/ #gear10{ background: url(FgFnjks.png) no-repeat 0 -184px; width: 122px; height: 122px; position:absolute; left:175px; top:0; -webkit-animation: rotate-back 8000ms linear infinite; -moz-animation: rotate-back 8000ms linear infinite; -ms-animation: rotate-back 8000ms linear infinite; animation: rotate-back 8000ms linear infinite; } #shadow10{ width:86px; height:86px; -webkit-border-radius:43px; -moz-border-radius:43px; border-radius:43px; position:absolute; left:193px; top:18px; } #gear3{ background: url(FgFnjks.png) no-repeat 0 -1493px; width: 85px; height: 84px; position:absolute; left:194px; top:19px; -webkit-animation: rotate 10000ms linear infinite; -moz-animation: rotate 10000ms linear infinite; -ms-animation: rotate 10000ms linear infinite; animation: rotate 10000ms linear infinite; } #shadow3{ width:60px; height:60px; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; position:absolute; left:206px; top:31px; } /*gear-system-3*/ #gear9{ background: url(FgFnjks.png) no-repeat -371px -280px; width: 234px; height: 234px; position:absolute; left:197px; top:96px; -webkit-animation: rotate 12000ms linear infinite; -moz-animation: rotate 12000ms linear infinite; -ms-animation: rotate 12000ms linear infinite; animation: rotate 12000ms linear infinite; } #shadow9{ width:200px; height:200px; -webkit-border-radius:100px; -moz-border-radius:100px; border-radius:100px; position:absolute; left:214px; top:113px; } #gear7{ background: url(FgFnjks.png) no-repeat -371px 0; width: 108px; height: 108px; position:absolute; left:260px; top:159px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite; } #shadow7{ width:76px; height:76px; -webkit-border-radius:38px; -moz-border-radius: 38px; border-radius: 38px; position:absolute; left:276px; top:175px; } /*gear-system-4*/ #gear6{ background: url(FgFnjks.png) no-repeat 0 -1931px; width: 134px; height: 134px; position:absolute; left:305px; bottom:212px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite; } #shadow6{ width:98px; height:98px; -webkit-border-radius:49px; -moz-border-radius: 49px; border-radius: 49px; position:absolute; left:323px; bottom:230px; } #gear4{ background: url(FgFnjks.png) no-repeat 0 -1627px; width: 69px; height: 69px; position:absolute; left:337px; bottom:245px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite; } /*gear-system-5*/ #gear12{ background: url(FgFnjks.png) no-repeat 0 -530px; width: 164px; height: 164px; position:absolute; left:208px; bottom:85px; -webkit-animation: rotate 8000ms linear infinite; -moz-animation: rotate 8000ms linear infinite; -ms-animation: rotate 8000ms linear infinite; animation: rotate 8000ms linear infinite; } #shadow12{ width:124px; height:124px; -webkit-border-radius:62px; -moz-border-radius:62px; border-radius:62px; position:absolute; left:225px; bottom:107px; } #gear11{ background: url(FgFnjks.png) no-repeat 0 -356px; width: 125px; height: 124px; position:absolute; left:228px; bottom:105px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite; } #shadow11{ width:88px; height:88px; -webkit-border-radius:44px; -moz-border-radius:44px; border-radius:44px; position:absolute; left:247px; bottom:123px; } #gear8{ background: url(FgFnjks.png) no-repeat -371px -158px; width: 72px; height: 72px; position:absolute; left:254px; bottom:131px; -webkit-animation: rotate 6000ms linear infinite; -moz-animation: rotate 6000ms linear infinite; -ms-animation: rotate 6000ms linear infinite; animation: rotate 6000ms linear infinite; } #shadow8{ width:42px; height:42px; -webkit-border-radius:21px; -moz-border-radius: 21px; border-radius: 21px; position:absolute; left:269px; bottom:146px; } /*gear1*/ #gear1{ background: url(FgFnjks.png) no-repeat 0 0; width: 135px; height: 134px; position:absolute; left:83px; bottom:111px; -webkit-animation: rotate-back 10000ms linear infinite; -moz-animation: rotate-back 10000ms linear infinite; -ms-animation: rotate-back 10000ms linear infinite; animation: rotate-back 10000ms linear infinite; } #shadow1{ width:96px; height:96px; -webkit-border-radius:48px; -moz-border-radius:48px; border-radius:48px; position:absolute; left:103px; bottom:130px; } /*gear-system-6*/ #gear5{ background: url(FgFnjks.png) no-repeat 0 -1746px; width: 134px; height: 135px; position:absolute; left:22px; top:108px; -webkit-animation: rotate 10000ms linear infinite alternate; -moz-animation: rotate 10000ms linear infinite alternate; -ms-animation: rotate 10000ms linear infinite alternate; animation: rotate 10000ms linear infinite alternate; } #shadow5{ width:96px; height:96px; -webkit-border-radius:48px; -moz-border-radius:48px; border-radius:48px; position:absolute; left:41px; top:127px; } #gear2{ background: url(FgFnjks.png) no-repeat 0 -1364px; width: 80px; height: 79px; position:absolute; left:49px; top:136px; -webkit-animation: rotate-back 10000ms linear infinite alternate; -moz-animation: rotate-back 10000ms linear infinite alternate; -ms-animation: rotate-back 10000ms linear infinite alternate; animation: rotate-back 10000ms linear infinite alternate; } /*weight*/ #weight{ background: url(FgFnjks.png) no-repeat -371px -564px; width: 34px; height: 92px; position:absolute; left:1px; bottom:0; -webkit-animation: up 10000ms linear infinite alternate; -moz-animation: up 10000ms linear infinite alternate; -ms-animation: up 10000ms linear infinite alternate; animation: up 10000ms linear infinite alternate; } #shadowweight{ width:10px; height:80px; position:absolute; left:12px; bottom:0px; -webkit-animation: up 10000ms linear infinite alternate; -moz-animation: up 10000ms linear infinite alternate; -ms-animation: up 10000ms linear infinite alternate; animation: up 10000ms linear infinite alternate; } /*chain*/ #chain-circle{ background: url(FgFnjks.png) no-repeat -371px -706px; width:146px; height:147px; position:absolute; left:17px; top:102px; -webkit-animation: rotate 10000ms linear infinite alternate; -moz-animation: rotate 10000ms linear infinite alternate; -ms-animation: rotate 10000ms linear infinite alternate; animation: rotate 10000ms linear infinite alternate; } #chain{ width:1px; height:380px; border-left:2px dotted #C8D94A; position:absolute; left:17px; top:175px; opacity:0.7; -webkit-animation: collapse 10000ms linear infinite alternate; -moz-animation: collapse 10000ms linear infinite alternate; -ms-animation: collapse 10000ms linear infinite alternate; animation: collapse 10000ms linear infinite alternate; } /*ANIMATIONS*/ /*rotate*/ @keyframes "rotate" { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes rotate { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes "rotate" { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes "rotate" { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes "rotate" { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(360deg); transform: rotate(360deg); } } /*rotate-back*/ @keyframes "rotate-back" { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-moz-keyframes rotate-back { from { -moz-transform: rotate(0deg); transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes "rotate-back" { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-ms-keyframes "rotate-back" { from { -ms-transform: rotate(0deg); transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); transform: rotate(-360deg); } } @-o-keyframes "rotate-back" { from { -o-transform: rotate(0deg); transform: rotate(0deg); } to { -o-transform: rotate(-360deg); transform: rotate(-360deg); } } /*weight up*/ @keyframes "up" { from { bottom: 0px; } to { bottom: 340px; } } @-moz-keyframes up { from { bottom: 0px; } to { bottom: 340px; } } @-webkit-keyframes "up" { from { bottom: 0px; } to { bottom: 340px; } } @-ms-keyframes "up" { from { bottom: 0px; } to { bottom: 340px; } } @-o-keyframes "up" { from { bottom: 0px; } to { bottom: 340px; } } /*chain up and down*/ @keyframes "collapse" { from { height: 387px; } to { height: 48px; } } @-moz-keyframes collapse { from { height: 387px; } to { height: 48px; } } @-webkit-keyframes "collapse" { from { height: 387px; } to { height: 48px; } } @-ms-keyframes "collapse" { from { height: 387px; } to { height: 48px; } } @-o-keyframes "collapse" { from { height: 387px; } to { height: 48px; } }
Ce qui précède est une introduction détaillée aux détails de l'exemple de code de l'animation d'engrenage simulé HTML5. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

HTML5 est une technologie clé pour créer des pages Web modernes, offrant de nombreux nouveaux éléments et fonctionnalités. 1. HTML5 introduit des éléments sémantiques tels que, etc., qui améliore la structure des pages Web et le référencement. 2. Prise en charge des éléments multimédias et des supports intégrés sans plug-ins. 3. Les formulaires améliorent les nouveaux types d'entrée et les propriétés de vérification, simplifiant le processus de vérification. 4. Offrez des fonctions de stockage hors ligne et locales pour améliorer les performances des pages Web et l'expérience utilisateur.

Les meilleures pratiques pour le code H5 incluent: 1. Utilisez des déclarations de doctype correctes et l'encodage des caractères; 2. Utilisez des balises sémantiques; 3. Réduire les demandes HTTP; 4. Utiliser le chargement asynchrone; 5. Optimiser les images. Ces pratiques peuvent améliorer l'efficacité, la maintenabilité et l'expérience utilisateur des pages Web.

Les normes et technologies Web ont évolué à ce jour de HTML4, CSS2 et JavaScript simple et ont subi des développements importants. 1) HTML5 introduit des API telles que Canvas et WebStorage, ce qui améliore la complexité et l'interactivité des applications Web. 2) CSS3 ajoute des fonctions d'animation et de transition pour rendre la page plus efficace. 3) JavaScript améliore l'efficacité de développement et la lisibilité du code par la syntaxe moderne de Node.js et ES6, telles que les fonctions et classes Arrow. Ces changements ont favorisé le développement de l'optimisation des performances et les meilleures pratiques des applications Web.

H5 n'est pas seulement l'abréviation de HTML5, il représente un écosystème de technologie de développement Web moderne plus large: 1. H5 comprend HTML5, CSS3, JavaScript et API et technologies connexes; 2. Il offre une expérience utilisateur plus riche, interactive et fluide et peut fonctionner de manière transparente sur plusieurs appareils; 3. À l'aide de la pile de technologie H5, vous pouvez créer des pages Web réactives et des fonctions interactives complexes.

H5 et HTML5 se réfèrent à la même chose, à savoir HTML5. HTML5 est la cinquième version de HTML, apportant de nouvelles fonctionnalités telles que les balises sémantiques, la prise en charge multimédia, la toile et les graphiques, le stockage hors ligne et le stockage local, l'amélioration de l'expressivité et de l'interactivité des pages Web.

H5Referstohtml5, apivotaltechnologyInwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp OrtsMultimeDiaHithoutPlugins, améliorant la réception detièmeaCrOsDevices.3) SemantelelementsImproveContentsTructureAndSeo.4) H5'sRespo

Les outils et les frameworks qui doivent être maîtrisés dans le développement H5 incluent Vue.js, React et WebPack. 1.Vue.js convient à la construction d'interfaces utilisateur et prend en charge le développement des composants. 2. React optimise le rendu de la page via Virtual DOM, adapté aux applications complexes. 3.WebPack est utilisé pour l'emballage des modules et optimiser le chargement des ressources.

Html5hassignifytransformedwebdevelopmentByIntroduCingSémanticElements, améliorant laMultimeSupport, et improvingperformance.1) itmadewebsitesMoreAccessSiblendSeo-friendlywithsemiticslike, et.2)


Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Navigateur d'examen sécurisé
Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

MantisBT
Mantis est un outil Web de suivi des défauts facile à déployer, conçu pour faciliter le suivi des défauts des produits. Cela nécessite PHP, MySQL et un serveur Web. Découvrez nos services de démonstration et d'hébergement.

VSCode Windows 64 bits Télécharger
Un éditeur IDE gratuit et puissant lancé par Microsoft

Version Mac de WebStorm
Outils de développement JavaScript utiles