body{
font-size: 14px;
color: #FFA500;
font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
background: url(../image/Brh-.jpg) no-repeat;
padding: 0;
margin: 0;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
.clock{
list-style: none;
margin: auto;
padding: 0;
width: 700px;
height: 700px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 20px;
user-select: none;
}
.clock .date{
position: absolute;
z-index: 1;
width: 100%;
height: 20px;
text-align: center;
top: 340px;
left: 0;
}
.clock .hour{
position: absolute;
z-index: 3;
width: 360px;
height: 20px;
top: 340px;
left: 170px;
transition: transform 0.3s ease-in-out 0s;
transform:rotate(0deg);
}
.clock .hour>div{
position: absolute;
width: 100%;
right: 0;
top: 0;
transition: transform 1s ease-in-out 0s;
transform:rotate(0deg);
}
.clock .hour>div>div{
float: right;
width: 60px;
text-align: right;
}
.clock .minute{
position: absolute;
z-index: 4;
width: 520px;
height: 20px;
top: 340px;
left: 90px;
}
.clock .sec{
position: absolute;
z-index: 5;
width: 680px;
height: 20px;
top: 340px;
left: 10px;
}
.clock>hr{
height: 0;
width: 0%;
position: absolute;
z-index: 1;
border: #ffffff solid 0;
border-bottom-width: 1px;
margin: 10px 0 0 0;
left: 50%;
top: 50%;
transition: width 0.3s ease-in-out 0s;
overflow: visible;
}
.clock>hr.active:before{
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #ffffff;
top: -2px;
left: 0;
position: absolute;
}
binfontsworldor(clock.css)
于 2024-06-09 09:34:02 首次发布