Utilisation de HTML5, CSS pour atteindre l'effet de pendule
Point de connaissance:1) Utilisez la position / gauche / haut et calc () pour atteindre le niveau et le centre vertical des éléments;
2) Utiliser l'animation de définition d'attribut Animative / Transform / Transform-Origin de CSS3;
3) Utilisez l'origine transformée pour réaliser le réglage du cœur rond de l'origine de rotation
Ne dites pas beaucoup de bêtises, regardez directement le code, le code spécifique est illustré ci-dessous:
<! CALC (50% -200px); ; 0: 0: 0: 0: 0: 0: 0: 0: 0:; Rotate (30Deg);} .angle60 {transform: 60Deg);} .angle90 {Transform: Rotate (90Deg);} .angle120 {transform: rotate (120Deg);} .ang {Transform: Rotate (180Deg);} .angle210 {transs Form: Rotate (210Deg);}. 300Deg);} .Angle330 {Transform: Rotation (3 30Deg);} #FixPoint {Largeur: 10px; ; Origine: 50% 60px;} #MinuteHand {Largeur: 4p x; ;} #Second hand {largeur: 2px; 90px; <body> <div id> <div id = 'dial'> <ul id = scale> <li class = ScaleIndex> </li> <li class = ScaleIndex angle30> </li> <li class = ScaleIndex angle60> < / li> <li class = ScaleIndex angle90> </l i> <li class = ScaleIndex angle120> </li> <li class = ScaleIndex angle150> </li> <li class = ScaleIndex angle180> </li> <li Class = ScaleIndex angle210> </li> class = ScaleIndex angle240> </li> <li class = ScaleIndex angle270> </li> <li class = ScaleIndex angle300> </li> <li class = ScaleIndex angle330> </li> </ul> <div id = fixpoint> </ div> <div id = hourhand> </div> <div id = minutehand> </div> <div id = secondhand> </div> </div> <script Type = 'text / javascript' src = 'js / jquery-3.2.1.js'> </ script> <script type = text / javascript> window.onload = function () {var househand = document.getElementyid ('hourhand '); var Minutehand = document.getElementyId (' MinuteHand '); ; 60 * 360 + 'deg'; ')') '}); }); + ')'; RésumerCe qui précède est le simple effet d'horloge basé sur le HTML5 + CSS3 que je vous ai présenté. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!