Использование HTML5, CSS для достижения эффекта маятника
Точка знания:1) Используйте положение/левое/верхнее и calc () для достижения уровня и вертикального центра элементов;
2) использовать анимацию атрибута атрибута CSS3/преобразование/преобразование атрибута;
3) Используйте преобразование-оригин, чтобы реализовать круглую регулировку сердца происхождения вращения
Не говорите много чепухи, посмотрите на код напрямую, конкретный код показан ниже:
<! Calc (50% -200px); ; 0: 0: 0: 0: 0: 0: 0: 0: 0:; rotate (30deg);} .Angle60 {Transform: 60Deg); {Transform: rotate (180Deg);} .Angle210 {Transs Form: rotate (210Deg);}. 300Deg);} .Ang330 {Transform: rotate (3 30deg);} #fixpoint {ширина: 10px; ; Происхождение: 50% ;} #Secondhand {ширина: 2PX; <body> <div id> <div id = 'dial'> <ul id = scale> <li class = scaleindex> </li> <li class = scaleindex angel30> </li> <li class = scaleindex angel60> < /li> <li class = scaleindex angel90> </l i> <li class = scaleindex angel120> </li> <li class = scaleindex angel150> </li> <li class = scaleindex angel180> </li> <li class = ScaleIndex angel210> </li> class = scaleindex angel240> </li> <li class = scaleindex angle270> </li> <li class = scaleindex angel300> </li> <li class = scaleindex angel330> </li> </ul> <div id = fixpoint> </div> <div id = hourhand> </div> <div id = minutehand> </div> <div id = sendhand> </div> </div> <script Type = 'text/javascript' src = 'js/jquery-3.2.2.1.js'> </script> <script type = text/javascript> window.onload = function () {var HouseHand = document.getElementById ('Hourhandhand '); ; 60 * 360 + DEG '; ')') '}); }); + ')'; СуммироватьПриведенное выше - это простой эффект, основанный на HTML5+CSS3, который я познакомился с вами. Большое спасибо за вашу поддержку на веб -сайте Vevb Wulin!