Verwendung von HTML5, CSS, um einen Pendeleffekt zu erzielen
Wissenspunkt:1) Verwenden Sie die Position/links/ober und calc (), um das Level und das vertikale Elementzentrum zu erreichen.
2) Verwenden Sie CSS3s Animation/Transform/Transform/Transform-Origin-Attributdefinitionsanimation;
3) Verwenden Sie Transform-Origin
Sagen Sie nicht viel Unsinn, schauen Sie sich den Code direkt an, der spezifische Code ist unten angezeigt:
<! Calc (50% -200px); ; 0: 0: 0: 0: 0: 0: 0: 0: 0:; rotate (30deg);} .Angle60 {Transformation: 60DEG); {Transformation: Dreh (180 Grad);} .Angle210 {transs Form: rotate (210DEG);}. 300DEG);} .Annle330 {Transformation: 3 30DEG); Hintergrund-Color: CadetBlue; Ursprung: 60px;} #MinuteHand {Breite: 4p x; } #Secondhand {width: 2px; <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 = stoundhand> </div> <div id = winushand> </div> <div id = Secondhand> </div> </div> <skript Type = 'text/javaScript' src = 'js/jquery-3.2.1.js'> </script> <script type = text/javaScript> window.onload = function () {var hOUSHand = document.getElementById ('stoundhand '); ; 60 * 360 + 'Deg'; ')') '}); }); + ')'; ZusammenfassenDas oben genannte Einfache ist auf dem HTML5+CSS3, das ich Ihnen vorgestellt habe. Vielen Dank für Ihre Unterstützung für die VEVB Wulin -Website!