jQuery和CSS3精美翻页式电子时钟特效代码

jQuery和CSS3精美翻页式电子时钟特效代码

这是一款jQuery和CSS3精美翻页式电子时钟特效。该电子时钟使用CSS3渐变和transform来制作翻页电子时钟的外观,然后通过jquery代码来驱动电子时钟的翻页显示时间效果。

使用方法
在页面中引入jquery和style.css文件。

1
2
<script src="path/to/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">

HTML结构
该翻页式电子时钟的HTML结构如下。

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<main>
  <div style="display:none">
    <div id="top-test-anim" class="num-anim top-anim" style="display:none;">
      <div class="top-half-num">2</div>
    </div>
    <div id="bottom-test-anim" class="num-anim bottom-anim" style="display:none;">
      <div class="bottom-half-num">
        <div class="dropper">3</div></div>
    </div>
  </div>
  <canvas id="my-canvas"></canvas>
  <div id="clock">
    <div class="time-container hours">
      <div class="digit">
        <div class="fade"> </div>
        <span class="num top" id="hour-tens-top">1</span>
        <span class="num bottom" id="hour-tens-bottom">
          <div class="bottom-container">1</div></span>
          <div class="swapper">
            <div id="top-hour-tens-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-hour-tens-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
      <div class="digit">
        <div class="fade"> </div>
        <span class="num top" id="hour-ones-top">3</span>
        <span class="num bottom" id="hour-ones-bottom">
          <div class="bottom-container">3</div></span>
          <div class="swapper">
            <div id="top-hour-ones-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-hour-ones-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
    </div>
    <div class="time-container minutes">
      <div class="digit">
        <div class="fade"> </div>
        <span class="num top" id="minute-tens-top">4</span>
        <span class="num bottom" id="minute-tens-bottom">
          <div class="bottom-container">4</div></span>
          <div class="swapper">
            <div id="top-minute-tens-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-minute-tens-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
      <div class="digit">
        <div class="fade"> </div>
        <span class="num top" id="minute-ones-top">3</span>
        <span class="num bottom" id="minute-ones-bottom">
          <div class="bottom-container">3</div></span>
          <div class="swapper">
            <div id="top-minute-ones-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-minute-ones-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
    </div>
    <div class="time-container seconds">
      <div class="digit">
        <div class="fade"> </div>
        <span class="num top" id="second-tens-top">5</span>
        <span class="num bottom" id="second-tens-bottom">
          <div class="bottom-container">5</div></span>
          <div class="swapper">
            <div id="top-second-tens-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-second-tens-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
      <div class="digit">
        <div class="fade"> </div>
        <span class="num top" id="second-ones-top">3</span>
        <span class="num bottom" id="second-ones-bottom">
          <div class="bottom-container">2</div></span>
          <div class="swapper">
            <div id="top-second-ones-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">2</div>
            </div>
            <div id="bottom-second-ones-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">3</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
    </div>
  </div>
</main>

文件信息:

    0

    发表评论