How to realize clock effect by HTML5+CSS3

This article mainly introduces the relevant knowledge of HTML5+CSS3 how to achieve clock effect, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this HTML5+CSS3 article on how to achieve clock effect. Let's take a look at it.

Objective:

Using html5,css to realize pendulum effect

Knowledge points:

1) using position/left/top and calc () to center elements horizontally and vertically.

2) use the animation/transform/transform-origin attribute of CSS3 to define animation

3) using transform-origin to adjust the center of the rotation origin.

The specific code is as follows:

Li {list-style:none;} # box {width: 400px; height: 400px; position: absolute; top:calc (50%-200px); left:calc (50%-200px); border: 2px solid palegoldenrod;} # dial {width: 200px Height: 200px; position: absolute; top:calc (50%-100px); left:calc (50%-100px); border: 2px solid cyan; border-radius: 50%;} .scaleIndex {width: 4px; height: 12px; position: absolute Top: 0; left: calc (50-2px); background-color: gray; transform-origin: 2px 100px;} .angle30 {transform: rotate (30deg);} .angle60 {transform: rotate (60deg);} .angle90 {transform: rotate (90deg);} .angle120 {transform: rotate (120deg);} .angle150 {transform: rotate (150deg) } .angle180 {transform: rotate (180deg);} .angle210 {transform: rotate (210deg);} .angle240 {transform: rotate (240deg);} .angle270 {transform: rotate (270deg);} .angle300 {transform: rotate (300deg);} .angle330 {transform: rotate (330deg);} # fixPoint {width: 10px; height: 10px; position: Top:calc (50-5px); left:calc (50-5px); background-color: cadetblue; border-radius: 50%;} # hourHand {width: 6px; height: 70px; position:absolute; top: 40px; left:calc (50-3px) Background-color: darkblue; transform-origin: 50% 60px;} # minuteHand {width: 4px; height: 75px; position:absolute; top: 35px; left: calc (50%-2px); background-color: yellow; transform-origin: 50% 65px } # secondHand {width: 2px; height: 90px; position:absolute; top: 20px; left: calc (50%-1px); background-color: red; transform-origin: 50% 80px } _ window.onload = function () {var hourHand = document.getElementById ('hourHand') Var minuteHand = document.getElementById ('minuteHand'); var secondHand = document.getElementById (' secondHand'); setInterval (function () {var currentTime = new Date (); var hourValue = currentTime.getHours (); var hourAngle = hourValue / 24 * 360 + 'deg'; var minuteValue = currentTime.getMinutes () Var minuteAngle = minuteValue / 60 * 360 + 'deg'; var secondValue = currentTime.getSeconds (); var secondAngle = secondValue / 60 * 360 +' deg'; console.log (hourAngle); / / method 1: use jquery's css () to add attribute var cmdHour = 'rotate (' + hourAngle +')' $('# hourHand'). Css ({transform:'rotate ('+ hourAngle +')'}); var cmdMinute = 'rotate (' + minuteAngle +')'; $('# minuteHand'). Css ({transform:cmdMinute}); var cmdSecond = 'rotate (' + secondAngle +')'; $('# secondHand'). Css ({transform:cmdSecond}); / / method 2: use the style attribute of the DOM element to set / / hourHand.style.transform = 'rotate (' + hourAngle +')' / / minuteHand.style.transform = 'rotate (' + minuteAngle +')'; / / secondHand.style.transform = 'rotate (' + secondAngle +')';}, 1000);} this is the end of the article on "how to achieve clock effect in HTML5+CSS3". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve clock effect in HTML5+CSS3". If you want to learn more knowledge, you are welcome to follow the industry information channel.