目录
旋转始终
//css代码:
.box {
width: 200px;
height: 200px;
border: 5px solid silver;
border-radius: 50%;
margin: auto;
margin-top: 200px;
position:relative;
}
/* .line {
width: 200px;
height: 5px;
background-color: silver;
margin-top: 5px;
line-height: 200px;
} */
.line-1 {
margin-top: 97.5px;
width: 200px;
height: 5px;
background-color: silver;
position: absolute;
}
.line-1:nth-of-type(1){
transform: rotate(30deg);
}
.line-1:nth-of-type(2){
transform: rotate(60deg);
}
.line-1:nth-of-type(3){
transform: rotate(90deg);
}
.line-1:nth-of-type(4){
transform: rotate(120deg);
}
.line-1:nth-of-type(5){
transform: rotate(150deg);
}
.box1 {
width: 150px;
height: 150px;
margin: 25px;
/* border: 1px solid black; */
border-radius: 50%;
position: absolute;
background-color: white;
}
.center {
width: 20px;
height: 20px;
border-radius: 50px;
background-color: silver;
margin: 90px;
position: absolute;
}
.hour {
width: 4px;
height:60px;
position: absolute;
background-color:red ;
transform-origin: bottom;
margin-left: 100px;
animation-name: clock;
animation-duration: 43200s;
animation-iteration-count: infinite ;
margin-top: 40px;
}
.minter {
width: 3px;
height: 70px;
position: absolute;
background-color: green;
transform-origin: bottom;
margin-top: 30px;
margin-left: 100px;
animation-name: clock;
animation-duration: 3600s;
animation-iteration-count: infinite;
}
.s {
width: 1px;
height: 80px;
position: absolute;
background-color: blue;
transform-origin: bottom;
margin-top: 20px;
margin-left: 100px;
animation: clock 60s infinite steps(60,end );
}
@keyframes clock {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
//html代码:
<div class="box">
<div class="line-1"></div>
<div class="line-1"></div>
<div class="line-1"></div>
<div class="line-1"></div>
<div class="line-1"></div>
<div class="line-1"></div>
<div class="box1"></div>
<div class="hour"></div>
<div class="minter"></div>
<div class="s"></div>
<div class="center"></div>
</div>