PROMULGATOR

    不过如此

    河南省洛阳市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="clock">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div class="cover"></div>
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
    <div class="center"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 * {
    padding:0;
    margin:0;
}
.clock {
    width:300px;
    height:300px;
    border:10px solid #ccc;
    /*border-radius:160px;
    */
            /*百分比参照元素的实际宽高*/
            border-radius:50%;
    margin:100px auto;
    position:relative;
}
.line {
    width:8px;
    height:300px;
    background-color:#ccc;
    position:absolute;
    /*参照父容器的宽*/
            left:50%;
    top:0;
    /*参照元素本身*/
            transform:translate(-50%,0);
}
.line1,.line4 {
    width:10px;
}
.line2 {
    transform:translate(-50%,0) rotate(30deg);
}
.line3 {
    transform:translate(-50%,0) rotate(60deg);
}
.line4 {
    transform:translate(-50%,0) rotate(90deg);
}
.line5 {
    transform:translate(-50%,0) rotate(120deg);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.8.3
 立即下载

纯CSS3写得模拟时钟

0