<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.clock {
position: relative;
border: black 10px solid;
border-radius: 50%;
width: 600px;
height: 600px;
margin: 0 auto;
margin-top: 50px;
background-image:url(/xiaomi/image/微信图片_20220119164442.jpg );
background-size: cover;
}
.shizhen {
position: absolute;
height: 60%;
width: 60%;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
animation: run 7200s linear infinite;
/* background-color: chocolate; */
}
.shizhen-image {
height: 50%;
width: 6px;
margin: 0 auto;
background-color:blue
;
}
.fenzhen {
position: absolute;
height: 75%;
width: 75%;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
animation: run 600s steps(60) infinite;
/* background-color: chocolate; */
}
.fenzhen-image {
height: 50%;
width: 4px;
margin: 0 auto;
background-color: green;
}
.miaozhen {
position: absolute;
height: 90%;
width: 90%;
right: 0;
left: 0;
top: 0;
bottom: 0;
margin: auto;
animation: run 10s steps(60) infinite;
/* background-color: chocolate; */
}
.miaozhen-image {
height: 50%;
width: 2px;
margin: 0 auto;
background-color: red;
}
@keyframes run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="clock">
<div class="shizhen">
<div class="shizhen-image"></div>
</div>
<div class="fenzhen">
<div class="fenzhen-image"></div>
</div>
<div class="miaozhen">
<div class="miaozhen-image"></div>
</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
