Using HTML5, CSS to achieve pendulum effect
Knowledge point:1) Use Position/LEFT/TOP and CALC () to achieve the level and vertical center of elements;
2) Use CSS3's Animative/Transform/Transform-Origin attribute definition animation;
3) Use Transform-Origin to realize the round heart adjustment of the rotation origin
Don't say much nonsense, look at the code directly, the specific code is shown below:
<! Doctype html> <html> <gead> <meta charset = UTF-8> </Title> <Style> Li {list-style: none;} #Box {width: 400px; 400px; position : absolute; Top: CALC (50% -200px); left: CALC (50% -200px); Border: 2px Solid Palegoldenrod;} #Dial {width: 200px; height: 200px; POSITION: Absolut e; TOP: CALC (50 % -100px); left: CALC (50% -100px); border: 2px solid Cyan; Border -Radius: 50%;}. Scaleindex {width: 4px; height: 12px; posity: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: 0: ; left: CALC (50%-2px); Background-COLOR: Gray; Transform-Origin: 2px 100px;} .Angle30 {transform: rotate (30Deg);} .Angle60 {transform: 60Deg); } .Angle90 {transform: rotate (90deg);} .Angle120 {transform: rotate (120Deg);} .angle150 {transform: rotate (150Deg);} .Angle180 {transform: rotate (180DEG);} .Angle210 {TRANSS Form: Rotate (210Deg);}. Angle240 {transform: rotate (240DEG);} .Angle270 {transform: rotate (270Deg);} .Angle300 {transform: rotate (300DEG);} .angle330 {transform: Rotate (3 30Deg);} #Fixpoint {width: 10px; Height: 10px; Position: Absolute; Top: CALC (50% -5px); left: CALC (50% -5px); background -color: cadetblue; Border -Radius: 50%;} {width: 6px; height : 70px; Position: Absolute; Top: 40px; left: CALC (50%-3px); Background-COLOR: DARKBLUE; Transform-Origin: 50% 60px;} #Minutehand {Width: 4P X; Height: 75px; Position: AbSolute ; Top: 35px; left: CALC (50%-2px); Background-COLOR: YELLOW; Transform-Origin: 50% 65px;} #Secondhand {width: 2px; 90px; absolute; Top: 20px; left : CALC (50%-1px); Background-COLOR: Red; Transform-Origin: 50% 80px;} </style> </head> <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 = Hourhand> </DIV> <DIV ID = Minutehand> </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 '); var minutehand = document.GetelementByid ( 'Minutehand'); VAR Secondhand = Document.GetelementByid ('Secondhand'); Setinterval (Function () {Var Currenttime = New Date (); Var Hourvalue = CUR renttime.gethouse (); VAR HOURANGLE = HOURVALUE / 24 * 360 + ' deg '; Var Minutevalue = Currenttime.getminutes (); VAR Minuteangle = Minutevalue / 60 * 360 +' DEG '; VAR SecondValue = Currenttime.getSeConds (); var secondangle = sexdvalue / 60 * 360 + 'deg'; console.log (Hourngle); // Method 1: Use jQuery's css () to increase attributes var cmdhouse = 'rotate ('+ house+ ')'; $ ('#Hourhand'). + ')') '}); VAR CMDMINUTE =' Rotate ('+ Minuteangle+') '; $ ('#minutehand '). econdangle +')) '; $ ('#sexdhand '). CSS ({transform: cmdsecond}); // Method 2: Use the style attribute settings of the DOM element // hourhand.style.transform =' rotate (' + hourangle +') '; // Minutehand.style.transform = 'Rotate (' + Minuteangle + ')'; // Secondhand.style.transform = 'Rotate (' + Secondangle + ')';}, 1000); T> </ Body> </html> SummarizeThe above is the simple clock effect based on the HTML5+CSS3 that I introduced to you. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!