CSS3圆形时钟效果代码

快乐打工仔 分类:实例代码
本章节分享一段代码实例,它实现了圆形时钟效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
.divBox {
width: 600px;
height: 600px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
.circle {
width: 400px;
height: 400px;
border-radius: 50%;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
border: 12px solid #000;
}
.line {
height: 20px;
width: 0px;
border: 8px solid #000;
position: absolute;
}
.lineTop {
top: 0px;
left: 0px;
right: 0px;
margin: 0 auto;
}
.lineBottom {
bottom: 0px;
left: 0px;
right: 0px;
margin: 0 auto;
}
.lineLeft {
left: 0px;
top: 0px;
bottom: 0px;
margin: auto;
transform: rotate(90deg);
}
.lineRight {
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
transform: rotate(90deg);
}
.line1 {
height: 10px;
border: 4px solid #000;
position: absolute;
top: 27px;
right: 98px;
transform: rotate(30deg);
}
.line2 {
height: 10px;
border: 4px solid #000;
position: absolute;
top: 98px;
right: 27px;
transform: rotate(60deg);
}
.line4 {
height: 10px;
border: 4px solid #000;
position: absolute;
bottom: 98px;
right: 27px;
transform: rotate(-60deg);
}
.line5 {
height: 10px;
border: 4px solid #000;
position: absolute;
bottom: 27px;
right: 98px;
transform: rotate(-30deg);
}
.line7 {
height: 10px;
border: 4px solid #000;
position: absolute;
bottom: 27px;
left: 98px;
transform: rotate(30deg);
}
.line8 {
height: 10px;
border: 4px solid #000;
position: absolute;
bottom: 98px;
left: 27px;
transform: rotate(60deg);
}
.line10 {
height: 10px;
border: 4px solid #000;
position: absolute;
top: 98px;
left: 27px;
transform: rotate(-60deg);
}
.line11 {
height: 10px;
border: 4px solid #000;
position: absolute;
top: 27px;
left: 98px;
transform: rotate(-30deg);
}
.center {
width: 0px;
height: 0px;
border-radius: 50%;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
border: 20px solid #000;
}
.hourLine {
width: 120px;
border: 6px solid #000;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
position: absolute;
left: 132px;
right: 0px;
margin: 197px auto;
transform: rotate(-90deg);
animation: hour 43200s linear infinite;
}
.minuteLine {
width: 130px;
border: 4px solid #000;
position: absolute;
left: 138px;
right: 0px;
margin: 197px auto;
transform: rotate(-90deg);
animation: minute 3600s linear infinite;
}
.secondLine {
width: 140px;
border: 2px solid #000;
position: absolute;
left: 144px;
right: 0px;
margin: 197px auto;
transform: rotate(-90deg);
transform-origin: 0% 50%;
animation: second 60s linear infinite;
}
@keyframes second {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(270deg);
}
}
@keyframes minute {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(270deg);
}
}
@keyframes hour {
0% {
transform: rotate(-90deg);
}
100% {
transform: rotate(270deg);
}
}
</style>
</head>
<body>
<div class="divBox">
<div class="circle">
<div class="line lineTop"></div>
<div class="line lineBottom"></div>
<div class="line lineLeft"></div>
<div class="line lineRight"></div>
<div class="line_1 line1"></div>
<div class="line_1 line2"></div>
<div class="line_1 line4"></div>
<div class="line_1 line5"></div>
<div class="line_1 line7"></div>
<div class="line_1 line8"></div>
<div class="line_1 line10"></div>
<div class="line_1 line11"></div>
<div class="center"></div>
<div class="hourLine"></div>
<div class="minuteLine"></div>
<div class="secondLine"></div>
</div>
<div class="lineDom">
</div>
</div>
</body>
</html>

回复

我来回复
  • 暂无回复内容