HTML5を使用して、CSSを使用して振り子効果を達成します
知識ポイント：1）位置/左/topとcalc（）を使用して、要素のレベルと垂直中心を達成します。
2）CSS3のAnimative/Transform/Transform-Origin属性定義アニメーションを使用します。
3）変換オリジンを使用して、回転起点の丸い心臓調整を実現する
あまりナンセンスを言わないでください、コードを直接見てください、特定のコードを以下に示します。
<！ Calc（50％-200px）; ;左翼（50％-100px）; 0：0：0：0：0：0：0：; Rotate（30Deg）;} .Angle60 {transform：60deg）; Angle90 {Rotate（90deg）;} .Angle120 {transform：Rotate（120deg）;} .Angle150 {Rotate（150Deg）;} .Angle180 {変換：回転（180deg）;} .Angle210 {transs form：Rotate（210deg）;} {Rotate（240Deg）;} .Angle270 {Transform：Rotate（270Deg）;} .Angle300：Rotate（ 300deg）.Angle330 {Transmate（3 30Deg）;}背景 - カデットブルー：50％：起源：} #MinuteHand {4P X： ;}＃width：2px; <body> <div id> <div id = 'dial'> <ul id = scale> <li class = scaleindex> </li> <li class = scaleindex angion30> </li> <li class = scaleindex angion60> < /li> <li class = scaleindex angion90> </l i> <li class = scaleindex angion120> </li> <li class = scaleindex angion150> </li> <li class = scaleindex angion180> </li> <li class = ScaleIndex Angle210> </li> class = ScaleIndex Angle240> </li> <li class = scaleIndex angle270> </li> <li class = scaleindex angion300> </li> <li class = seamerindex angion330> </li> </ul> <div id = fixpoint> </div> <div id = hourhand> </div> <div id = minuthhand> </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.getelementbyid（ 'hourhand（' hour '）; var.getelementbyid（' minuthhand '）; ; hourgurevalue / 'getminutes（）; 60 * 360 + deg '; '）'}）; }）; //メソッド2：dom要素のスタイル属性設定を使用します+ '）;要約します上記は、私があなたに紹介したHTML5+CSS3に基づくシンプルな時計効果です。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！