描述:实现钟表时分秒针的转动 @[TOC]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* html{
perspective:800px
} */
.clock{
width: 500px;
height: 500px;
border-radius: 50%;
border: 10px rgb(16, 16, 24) solid;
margin: 50px auto;
position: relative;
}
/* >表示当前元素的子元素,不包括孙子元素 */
.clock>div{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
.box1{
width: 60%;
height: 60%;
/* background-color: blueviolet; */
animation:run 86400s linear infinite;
}
.hour{
height: 50%;
width: 15px;
background-color: rgb(0, 0, 0);
margin: 0 auto;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.box2{
width: 82%;
height: 82%;
/* background-color: blueviolet; */
/* infinite 表示一直持续(duration) */
animation:run 3600s linear infinite;
}
.minute{
height: 50%;
width: 7px;
background-color: rgb(36, 35, 35);
margin: 0 auto;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.box3{
width: 95%;
height: 95%;
/* background-color: blueviolet; */
/* 注意:linear和steps() 不能同时设置,因为他们属于时序函数的可选值 */
animation:run 60s steps(60) infinite;
}
.second{
height: 50%;
width: 3px;
background-color: rgb(230, 6, 6);
margin: 0 auto;
}
.cent{
width: 30px;
height: 30px;
background-color: rgb(78, 77, 77);
border-radius: 50%;
}
@keyframes run{
from{
transform:rotateZ(0);
}
to{
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="box1">
<div class="hour"></div>
</div>
<div class="box2">
<div class="minute"></div>
</div>
<div class="box3">
<div class="second"></div>
</div>
<div class="cent"></div>
</div>
</body>
</html>
效果图: