本文介绍了一种使用纯CSS实现的时钟动画效果，通过关键帧动画实现了时针、分针和秒针的旋转，同时展示了如何定位数字标记。
* {
margin:0;
padding:0
}
.clock {
width:200px;
height:200px;
border:1px solid red;
border-radius:50%;
margin:200px auto;
position:relative;
}
.clock span:first-of-type {
display:inline-block;
position:absolute;
height:200px;
left:50%;
animation:zhuanquan 1s linear infinite
}
.clock span:nth-of-type(2) {
display:inline-block;
position:absolute;
height:200px;
left:50%;
animation:zhuanquan 60s linear infinite
}
.clock span:last-of-type {
display:inline-block;
position:absolute;
height:200px;
left:50%;
animation:zhuanquan 720s linear infinite
}
.clock span:first-of-type:before {
position:absolute;
bottom:50%;
left:-.5px;
display:inline-block;
width:1px;
height:100px;
background:black;
content:""
}
.clock span:nth-of-type(2):before {
position:absolute;
bottom:50%;
left:-1.5px;
display:inline-block;
width:3px;
height:80px;
background:red;
content:""
}
.clock span:last-of-type:before {
position:absolute;
bottom:50%;
left:-2.5px;
display:inline-block;
width:5px;
height:60px;
background:#dbdbdb;
content:""
}
@keyframes zhuanquan {
0% {
transform:rotate(0deg)
}
100% {
transform:rotate(360deg)
}
}.clock p:before {
position:absolute;
bottom:0;
transform:translateX(-50%) rotate(-180deg);
}
.clock p:after {
position:absolute;
top:0;
transform:translateX(-50%)
}
.clock p {
position:absolute;
top:0;
left:100px;
width:1px;
height:200px;
}
.clock p:nth-of-type(1) {
transform:rotate(30deg)
}
.clock p:nth-of-type(1):after {
content:"1";
}
.clock p:nth-of-type(1):before {
content:"7";
}
.clock p:nth-of-type(2) {
transform:rotate(60deg)
}
.clock p:nth-of-type(2):after {
content:"2";
}
.clock p:nth-of-type(2):before {
content:"8";
}
.clock p:nth-of-type(3) {
background:rosybrown;
transform:rotate(90deg)
}
.clock p:nth-of-type(3):after {
content:"3";
}
.clock p:nth-of-type(3):before {
content:"9";
}
.clock p:nth-of-type(4) {
transform:rotate(120deg)
}
.clock p:nth-of-type(4):after {
content:"4";
}
.clock p:nth-of-type(4):before {
content:"10";
}
.clock p:nth-of-type(5) {
transform:rotate(150deg)
}
.clock p:nth-of-type(5):after {
content:"5";
}
.clock p:nth-of-type(5):before {
content:"11";
}
.clock p:nth-of-type(6) {
background:blueviolet;
transform:rotate(180deg)
}
.clock p:nth-of-type(6):after {
content:"6";
}
.clock p:nth-of-type(6):before {
content:"12";
}
扫一扫
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
