如何使用HTML5实现一个时钟动画

这篇文章主要为大家展示了“如何使用HTML5实现一个时钟动画”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用html5实现一个时钟动画”这篇文章吧。

　　具体细节注意见代码：

　　时钟

　　*{

　　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%,0);

　　}

　　.line2{

　　transform: translate(-50%,0) rotate(30deg);

　　}

　　.line3{

　　transform: translate(-50%,0) rotate(60deg);

　　}

　　.line4{

　　transform: translate(-50%,0) rotate(90deg);

　　}

　　.line5{

　　transform: translate(-50%,0) rotate(120deg);

　　}

　　.line6{

　　transform: translate(-50%,0) rotate(150deg);

　　}

　　.cover{

　　width: 250px;

　　height: 250px;

　　border-radius: 50%;

　　background-color: #fff;

　　position: absolute;

　　left: 50%;

　　top: 50%;

　　transform: translate(-50%,-50%);

　　}

　　.hour{

　　width: 6px;

　　height: 80px;

　　background-color: red;

　　position: absolute;

　　left: 50%;

　　top: 50%;

　　transform: translate(-50%,-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%,-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%,-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%,-50%);

　　}

　　@keyframes move{

　　0%{

　　transform: translate(-50%,-100%) rotate(0deg);

　　}

　　100%{

　　transform: translate(-50%,-100%) rotate(360deg);

　　}

　　}

以上是“如何使用HTML5实现一个时钟动画”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！