Usando HTML5, CSS para lograr el efecto péndulo
Punto de conocimiento:1) Use la posición/izquierda/top y calc () para lograr el nivel y el centro vertical de elementos;
2) Use la animación de definición de atributos animativa/transformada/transformación de origen de CSS3;
3) Use el origen de transformación para realizar el ajuste redondo del corazón del origen de rotación
No digas muchas tonterías, mira el código directamente, el código específico se muestra a continuación:
<! Calc (50% -200px); ; 0: 0: 0: 0: 0: 0: 0: 0: 0:; rotado (30deg);} .Angle60 {Transform: 60deg); {Transform: Rotate (180deg);} .AnGle210 {transs Form: Rotate (210deg);}. 300DEG);} .Angle330 {Transformar: Rotado (3 30deg);} #FixPoint {ancho: 10px; ; Origen: 50% 60px; ;} #Secondhand {ancho: 2px; <Body> <ViD ID> <div id = 'dial'> <ul id = escala> <li class = scaleIndex> </li> <li class = scaleIndex Angle30> </li> <li class = scaleIndex Angle60> < /li> <li class = scaleIndex Angle90> </li> <li class = scaleIndex Angle120> </li> <li class = scaleIndex Angle150> </li> <li class = scaleIndex Angle180> </li> <Li class = Escalaindex 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 = hora> </div> <div id = minutohand> </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 houshand = document.getElementById ('Hourhandhand ') ; 60 * 360 + 'DEG'; ')') '}); }); // + ')'; ResumirLo anterior es el simple efecto de reloj basado en el HTML5+CSS3 que le presentó a usted. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!