Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use HTML5 to achieve a clock animation", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use HTML5 to achieve a clock animation" this article.

For more details, please see the code:

Clock

* {

Padding: 0

Margin: 0

}

.clock {

Width: 300px

Height: 300px

Border: 10px solid # ccc

Border-radius: 50%

Margin: 20px auto

Position: relative

}

.line {

Width: 8px

Height: 300px

Background-color: # ccc

Position: absolute

Left: 50%

Top: 0

Transform: translate (- 50%)

}

.line2 {

Transform: translate (- 50% jin0) rotate (30deg)

}

.line3 {

Transform: translate (- 50% jin0) rotate (60deg)

}

.line4 {

Transform: translate (- 50% jin0) rotate (90deg)

}

.line5 {

Transform: translate (- 50% jin0) rotate (120deg)

}

.line6 {

Transform: translate (- 50% jin0) rotate (150deg)

}

.cover {

Width: 250px

Height: 250px

Border-radius: 50%

Background-color: # fff

Position: absolute

Left: 50%

Top: 50%

Transform: translate (- 50% Murray 50%)

}

.hour {

Width: 6px

Height: 80px

Background-color: red

Position: absolute

Left: 50%

Top: 50%

Transform: translate (- 50% mai mi 100%)

Transform-origin: center bottom

-webkit-animation: move 43200s linear infinite

}

.minute {

Width: 4px

Height: 90px

Background-color: green

Position: absolute

Left: 50%

Top: 50%

Transform: translate (- 50% mai mi 100%)

Transform-origin: center bottom

-webkit-animation: move 3600s linear infinite

}

.second {

Width: 2px

Height: 100px

Background-color: blue

Position: absolute

Left: 50%

Top: 50%

Transform: translate (- 50% mai mi 100%)

Transform-origin: center bottom

-webkit-animation: move 60s infinite steps (60)

}

.center {

Width:20px

Height:20px

Background-color: # ccc

Border-radius: 50%

Position: absolute

Left: 50%

Top: 50%

Transform: translate (- 50% Murray 50%)

}

@ keyframes move {

0% {

Transform: translate (- 50% mai mi 100%) rotate (0deg)

}

100% {

Transform: translate (- 50% mai mi 100%) rotate (360deg)

}

}

The above is all the contents of the article "how to use HTML5 to achieve a clock animation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.