Question

高级css怎样做表盘分针时针

Answer 1

提供个参考代码，主要代码
HTMl部分：

<div id="watch">
<div class="frame-face"></div>
<ul class="minute-marks">
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<div class="digital-wrap">
<ul class="digit-hours">
<li>23</li>
<li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
<li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
<li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
<li>18</li><li>19</li><li>20</li><li>21</li><li>22</li>
</ul>
<ul class="digit-minutes">
<li>10</li><li>11</li>
<li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
<li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li>
<li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
<li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
<li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
<li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
<li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
<li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
<li>06</li><li>07</li><li>08</li><li>09</li>
</ul>
<ul class="digit-seconds">
<li>20</li><li>21</li><li>22</li><li>23</li>
<li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li>
<li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li>
<li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li>
<li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li>
<li>48</li><li>49</li><li>50</li><li>51</li><li>52</li><li>53</li>
<li>54</li><li>55</li><li>56</li><li>57</li><li>58</li><li>59</li>
<li>00</li><li>01</li><li>02</li><li>03</li><li>04</li><li>05</li>
<li>06</li><li>07</li><li>08</li><li>09</li><li>10</li><li>11</li>
<li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li>
<li>18</li><li>19</li>
</ul>
</div>
<ul class="digits">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
<li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li>
</ul>
<div class="hours-hand"></div>
<div class="minutes-hand"></div>
<div class="seconds-hand"></div>
</div>
css部分：
body { font-size:62.5%; margin:1em; background:#232425 }
ul { list-style:none; margin:0; padding:0 }
#watch { font-size:1em; position:relative }
#watch .frame-face {
position:relative;
width:30em;
height:30em;
margin:2em auto;
border-radius:15em;
background:-webkit-linear-gradient(top, #f9f9f9,#666);
background:-moz-linear-gradient(top, #f9f9f9,#666);
background:linear-gradient(to bottom, #f9f9f9,#666);
box-shadow:rgba(0,0,0,.8) .5em .5em 4em;
}
#watch .frame-face:before {
content:'';
width:29.4em;
height:29.4em;
border-radius:14.7em;
position:absolute;
top:.3em; left:.3em;
background:
-webkit-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
-webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
background:
-moz-linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
-moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
background:
linear-gradient(135deg, rgba(246,248,249,0) 0%,rgba(229,235,238,1) 50%,rgba(205,212,217,1) 51%,rgba(245,247,249,0) 100%),
radial-gradient(ellipse at center, rgba(246,248,249,1) 0%,rgba(229,235,238,1) 65%,rgba(205,212,217,1) 66%,rgba(245,247,249,1) 100%);
}
#watch .frame-face:after {
content:'';
width:28em;
height:28em;
border-radius:14.2em;
position:absolute;
top:.9em; left:.9em;
box-shadow:inset rgba(0,0,0,.2) .2em .2em 1em;
border:.1em solid rgba(0,0,0,.2);
background:-webkit-linear-gradient(top, #fff, #ccc);
background:-moz-linear-gradient(top, #fff, #ccc);
background:linear-gradient(to bottom, #fff, #ccc);
}
#watch .minute-marks li {
display:block;
width:.2em;
height:.6em;
background:#929394;
position:absolute;
top:50%; left:50%;
margin:-.4em 0 0 -.1em;
}
#watch .minute-marks li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(3) {transform:rotate(18deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(4) {transform:rotate(24deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(5) {transform:rotate(36deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(6) {transform:rotate(42deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(7) {transform:rotate(48deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(8) {transform:rotate(54deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(9) {transform:rotate(66deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(41) {transform:rotate(306deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(42) {transform:rotate(312deg) translateY(-12.7em)}
translateY(-12.7em)}

#watch .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#watch .digits {
width:30em;
height:30em;
border-radius:15em;
position:absolute;
top:0; left:50%;
margin-left:-15em;
}
#watch .digits li {
font-size:1.6em;
display:block;
width:1.6em;
height:1.6em;
position:absolute;
top:50%; left:50%;
line-height:1.6em;
text-align:center;
margin:-.8em 0 0 -.8em;
font-weight:bold;
}
#watch .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }

:translate(0, -8em) }

#watch .digits:before {
content:'';
width:1.6em;
height:1.6em;
border-radius:.8em;
position:absolute;
top:50%; left:50%;
margin:-.8em 0 0 -.8em;
background:#121314;
}
#watch .digits:after {
content:'';
width:4em;
height:4em;
border-radius:2.2em;
position:absolute;
top:50%; left:50%;
margin:-2.1em 0 0 -2.1em;
border:.1em solid #c6c6c6;
background:-webkit-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
background:-moz-radial-gradient(center, ellipse cover, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
background:radial-gradient(ellipse at center, rgba(200,200,200,0), rgba(190,190,190,1) 90%, rgba(130,130,130,1) 100%);
}