先上效果图
html代码
<!-- 时钟边框 -->
<div class="clock">
<!-- 分针 -->
<div class="minute"></div>
<!-- 秒针 -->
<div class="second"></div>
<!-- 数字 -->
<span>12</span>
<span>3</span>
<span>6</span>
<span>9</span>
</div>
css样式
.clock{
width:400px;
height:400px;
border:1px solid black;
border-radius: 50%;
position: relative;
}
/* 指针的位置形状 */
.minute{
width:100px;
height:30px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background:green;
top:185px;
animation-duration: 3600s;
}
.second{
width:180px;
height:20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
background:red;
z-index:2;
top:190px;
animation-duration: 60s;
}
/* 定义动画 */
@keyframes myclock{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
/* 兼容不同浏览器 */
@-o-keyframes myclock{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
@-ms-keyframes myclock{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
@-webkit-keyframes myclock{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
@-moz-keyframes myclock{
0%{
transform: rotate(0);
}
100%{
transform: rotate(360deg);
}
}
/* 调用动画 */
.second,.minute{
position:absolute;
left:50%;
animation-name: myclock;
animation-iteration-count: infinite;
transform-origin:left center;
animation-timing-function: linear;
}
/* 有关数字的位置样式 */
span{
position: absolute;
width:60px;
height:60px;
font-size:40px;
font-weight: bold;
text-align: center;
line-height: 60px;
}
span:nth-child(3){
left:170px;
}
span:nth-child(4){
right:0;
top:170px;
}
span:nth-child(5){
bottom:0;
left:170px;
}
span:nth-child(6){
left:0;
top:170px;
}
让我们的小时钟转起来吧,有疑问的可以留言哦