HTML5를 사용하여 CSS는 진자 효과를 달성합니다
지식 :1) 위치/왼쪽/상단 및 calc ()를 사용하여 요소의 레벨 및 수직 중심을 달성합니다.
2) CSS3의 애니메이션/Transform/Transform-Origin 속성 정의 애니메이션 사용;
3) Transform-Origin을 사용하여 회전 원점의 둥근 심장 조정을 실현하십시오.
말도 안되는 말을하지 말고 코드를 직접보십시오. 특정 코드는 다음과 같습니다.
<html> <html> <gead> <meta charset = utf-8 <style> listy {width : 400px; calc (50% -200px); 왼쪽; 0 : 0 : 0 : 0 : 0 : 0 : 0 : 0 : Calc (50%-2px); 회전 (30deg);} .angle60 {transform : 60deg). {변환 : 회전 (180deg);}. angle210 {transs form : rotate (210deg);} {rotate (240deg);}. 300deg). 배경-CadetBlue; 원산지 : #은 4p x; } Secondhand {2px; <body> <div id> <div id = 'div'> <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> “ type = 'text/javaScript'src = 'js/jquery-3.2.1.js'> </script> <script type = text/javaScript> window.onload = function () {var househand = document.getElementById ( 'HourHand '); var minute.getElementbal ('minutehand '); var hourangle = var minuteange = minutvalue / 60 * 360 + 'deg'; 660 + 'deg'; ')'}); }); / 방법 2 : dom 요소의 스타일 속성 설정을 사용하십시오. // houghhand.style.transform = 'rotate (' + hourangle + ')'; + ')'; 요약위는 내가 당신에게 소개 한 HTML5+CSS3를 기반으로 한 간단한 시계 효과입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!