自学前端开发 新版css时钟效果图
想要自学前端开发，你要的学习资料到了-web前端交流学习群21，新版css时钟效果图
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>RunJS</title>
<style>
.clock{
width:200px;
height:200px;
border-radius:100%;
position:relative;
background-image:url(
);
background-size:100%;
}
.line{
height:4px;
margin-left:-15px;
margin-top:-2px;
}
.original{
position:absolute;
left:50%;
top:50%;
width:1px;
height:1px;
float:left;
}
.clock>.point{
position:absolute;
top:50%;
left:50%;
margin-left:-5px;
margin-top:-6px;
width:3px;
height:3px;
padding:5px;
border-radius:13px;
}
.original.seconds{
-webkit-animation:rotate_origin60s linear infinite;
animation:rotate_origin60s linear infinite;
}
.original.seconds>.line{
width:100px;
height:2px;
}
.original.minutes{
-webkit-animation:rotate_origin3600s linear infinite;
animation:rotate_origin3600s linear infinite;
}
.original.minutes>.line{
width:80px;
height:3px;
}
.original.hours{
-webkit-animation:rotate_origin86400s linear infinite;
animation:rotate_origin86400s linear infinite;
}
.original.hours>.line{
width:60px;
}
@-webkit-keyframes rotate_origin{
from{
-webkit-transform:rotateZ(0deg);
}
to{
-webkit-transform:rotateZ(360deg);
}
}
@keyframes rotate_origin{
from{
transform:rotateZ(0deg);
}
to{
transform:rotateZ(360deg);
}
}
</style>
</head>
<body>
<divclass="clock">
<divclass="original hours">
<divclass="line"></div>
</div>
<divclass="original minutes">
<divclass="line"></div>
</div>
<divclass="original seconds">
<divclass="line"></div>
</div>
<divclass="point"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号