Reiner CSS3-Code zur Implementierung einer laufenden Uhr

<div id="Uhr">
  <div Klasse="Rahmengesicht"></div>
  <ul class="Minutenmarkierungen">
    <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><li></li>
    <li></li><li></li><li></li><li></li><li></li><li></li><li></li>
  </ul>
  <div Klasse="digital-wrap">
    <ul Klasse="Ziffernstunden">
      <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 Klasse="Ziffer-Sekunden">
      <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 Klasse="Ziffern">
    <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="Stundenzeiger"></div>
  <div class="Minutenzeiger"></div>
  <div Klasse="Sekundenzeiger"></div>
</div>

body { Schriftgröße: 62,5 %; Rand: 1em; Hintergrund: #232425 }
ul { Listenstil: keine; Rand: 0; Polsterung: 0 }
#watch { Schriftgröße:1em; Position:relativ }
#Uhr .frame-face {
  Position: relativ;
  Breite: 30em;
  Höhe: 30em;
  Rand:2em automatisch;
  Rahmenradius: 15em;
  Hintergrund: -webkit-linear-gradient(oben, #f9f9f9,#666);
  Hintergrund: -moz-linear-gradient (oben, #f9f9f9,#666);
  Hintergrund: linearer Farbverlauf (nach unten, #f9f9f9,#666);
  Boxschatten: rgba (0,0,0, .8) .5em .5em 4em;
}
#uhr .frame-face:vor {
  Inhalt:'';
  Breite: 29,4em;
  Höhe: 29,4em;
  Rahmenradius: 14,7em;
  Position: absolut;
  oben: .3em; links: .3em;
  Hintergrund:
    -webkit-linear-gradient(135 Grad, 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(Mitte, Ellipsenabdeckung, rgba(246,248,249,1) 0 %, rgba(229,235,238,1) 65 %, rgba(205,212,217,1) 66 %, rgba(245,247,249,1) 100 %);
  Hintergrund:
    -moz-linear-gradient(135 Grad, 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(Mitte, Ellipsenabdeckung, rgba(246,248,249,1) 0 %, rgba(229,235,238,1) 65 %, rgba(205,212,217,1) 66 %, rgba(245,247,249,1) 100 %);
  Hintergrund:
    linearer Farbverlauf (135 Grad, rgba (246,248,249,0) 0 %, rgba (229,235,238,1) 50 %, rgba (205,212,217,1) 51 %, rgba (245,247,249,0) 100 %),
    radialer Farbverlauf (Ellipse in der Mitte, rgba(246,248,249,1) 0 %, rgba(229,235,238,1) 65 %, rgba(205,212,217,1) 66 %, rgba(245,247,249,1) 100 %);
}
#uhr .frame-face:nach {
  Inhalt:'';
  Breite: 28em;
  Höhe: 28em;
  Rahmenradius: 14,2em;
  Position: absolut;
  oben: .9em; links: .9em;
  Box-Schatten: Einschub rgba(0,0,0,.2) .2em .2em 1em;
  Rand: .1em durchgezogen rgba (0,0,0, .2);
  Hintergrund: -webkit-linear-gradient(oben, #fff, #ccc);
  Hintergrund: -moz-linear-gradient(oben, #fff, #ccc);
  Hintergrund: linearer Farbverlauf (nach unten, #fff, #ccc);
}
#Uhr .Minutenmarkierungen li {
  Anzeige:Block;
  Breite: .2em;
  Höhe: .6em;
  Hintergrund: #929394;
  Position: absolut;
  oben: 50 %; links: 50 %;
  Rand: -.4em 0 0 -.1em;
}
#Uhr .Minutenmarkierungen li:first-child {transform:rotate(6deg) translateY(-12.7em)}
#watch .minute-marks li:nth-child(2) {transform:rotate(12deg) translateY(-12.7em)}
#uhr .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)}
#uhr .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)}
#uhr .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)}
#uhr .minute-marks li:nth-child(10) {transform:rotate(72deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(11) {transform:rotate(78deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(12) {transform:rotate(84deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(13) {transform:rotate(96deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(14) {transform:rotate(102deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(15) {transform:rotate(108deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(16) {transform:rotate(114deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(17) {transform:rotate(126deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(18) {transform:rotate(132deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(19) {transform:rotate(138deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(20) {transform:rotate(144deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(21) {transform:rotate(156deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(22) {transform:rotate(162deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(23) {transform:rotate(168deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(24) {transform:rotate(174deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(25) {transform:rotate(186deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(26) {transform:rotate(192deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(27) {transform:rotate(198deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(28) {transform:rotate(204deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(29) {transform:rotate(216deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(30) {transform:rotate(222deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(31) {transform:rotate(228deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(32) {transform:rotate(234deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(33) {transform:rotate(246deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(34) {transform:rotate(252deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(35) {transform:rotate(258deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(36) {transform:rotate(264deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(37) {transform:rotate(276deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(38) {transform:rotate(282deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(39) {transform:rotate(288deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(40) {transform:rotate(294deg) translateY(-12.7em)}
#uhr .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)}
#uhr .minute-marks li:nth-child(43) {transform:rotate(318deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(44) {transform:rotate(324deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(45) {transform:rotate(336deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(46) {transform:rotate(342deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(47) {transform:rotate(348deg) translateY(-12.7em)}
#uhr .minute-marks li:nth-child(48) {transform:rotate(354deg) translateY(-12.7em)}
#Uhr .Ziffern {
  Breite: 30em;
  Höhe: 30em;
  Rahmenradius: 15em;
  Position: absolut;
  oben: 0; links: 50 %;
  Rand links: -15em;
}
#Uhr .Ziffern li {
  Schriftgröße: 1,6em;
  Anzeige:Block;
  Breite: 1,6em;
  Höhe: 1,6em;
  Position: absolut;
  oben: 50 %; links: 50 %;
  Zeilenhöhe: 1,6em;
  Textausrichtung: zentriert;
  Rand: -.8em 0 0 -.8em;
  Schriftstärke: fett;
}
#uhr .digits li:nth-child(1) { transform:translate(3.9em, -6.9em) }
#watch .digits li:nth-child(2) { transform:translate(6.9em, -4em) }
#uhr .digits li:nth-child(3) { transform:translate(8em, 0) }
#watch .digits li:nth-child(4) { transform:translate(6.8em, 4em) }
#uhr .digits li:nth-child(5) { transform:translate(3.9em, 6.9em) }
#watch .digits li:nth-child(6) { transform:translate(0, 8em) }
#uhr .digits li:nth-child(7) { transform:translate(-3.9em, 6.9em) }
#uhr .digits li:nth-child(8) { transform:translate(-6.8em, 4em) }
#uhr .digits li:nth-child(9) { transform:translate(-8em, 0) }
#uhr .digits li:nth-child(10) { transform:translate(-6.9em, -4em) }
#uhr .digits li:nth-child(11) { transform:translate(-3.9em, -6.9em) }
#uhr .digits li:nth-child(12) { transform:translate(0, -8em) }
#watch .digits:vor {
  Inhalt:'';
  Breite: 1,6em;
  Höhe: 1,6em;
  Rahmenradius: .8em;
  Position: absolut;
  oben: 50 %; links: 50 %;
  Rand: -.8em 0 0 -.8em;
  Hintergrund: #121314;
}
#watch .digits:nach {
  Inhalt:'';
  Breite: 4em;
  Höhe: 4em;
  Rahmenradius: 2,2em;
  Position: absolut;
  oben: 50 %; links: 50 %;
  Rand: -2,1em 0 0 -2,1em;
  Rand: .1em durchgezogen #c6c6c6;
  Hintergrund: -webkit-radial-gradient(Mitte, Ellipsenabdeckung, rgba(200,200,200,0), rgba(190,190,190,1) 90 %, rgba(130,130,130,1) 100 %);
  Hintergrund: -moz-radial-gradient (Mitte, Ellipsenabdeckung, rgba (200,200,200,0), rgba (190,190,190,1) 90 %, rgba (130,130,130,1) 100 %);
  Hintergrund: radialer Farbverlauf (Ellipse in der Mitte, rgba(200,200,200,0), rgba(190,190,190,1) 90 %, rgba(130,130,130,1) 100 %);
}
@keyframes Stunden { bis {transform:rotate(335deg)} }
#Uhr .Stundenzeiger {
  Breite: .8em;
  Höhe: 7em;
  Rahmenradius: 0 0 ,9em ,9em;
  Hintergrund: #232425;
  Position: absolut;
  unten: 50 %; links: 50 %;
  Rand: 0 0 -.8em -.4em;
  Kastenschatten: #232425 0 0 2px;
  Transform-Ursprung:0,4em 6,2em;
  transformieren: drehen (-25 Grad);
  Animation: Stunden 43200 s linear 0 s unendlich;
}
#Uhr .Stundenzeiger:vor {
  Inhalt:'';
  Hintergrund: erben;
  Breite: 1,8em;
  Höhe: .8em;
  Rahmenradius: 0 0 ,8em ,8em;
  Kastenschatten: #232425 0 0 1px;
  Position: absolut;
  oben: -.7em; links: -.5em;
}
#Uhr .Stundenzeiger:nach {
  Inhalt:'';
  Breite: 0; Höhe: 0;
  Rand: .9em durchgezogen #232425;
  Rahmenbreite: 0,9em 2,4em ,9em;
  Rahmenfarbe links: transparent;
  Rahmenfarbe rechts: transparent;
  Position: absolut;
  oben: -3,1em; links: -,5em;
}
@keyframes Minuten { bis {transform:rotate(422deg)} }
#Uhr .Minutenzeiger {
  Breite: .8em;
  Höhe: 12,5em;
  Rahmenradius: .5em;
  Hintergrund: #343536;
  Position: absolut;
  unten: 50 %; links: 50 %;
  Rand: 0 0 -1,5em -,4em;
  Kastenschatten: #343536 0 0 2px;
  Transform-Ursprung:0,4em 11em;
  transformieren: drehen (62 Grad);
  Animation: Minuten 3600 s linear 0 s unendlich;
}
@keyframes Sekunden { bis {transform:rotate(480deg)} }
#Uhr .Sekundenzeiger {
  Breite: .2em;
  Höhe: 14em;
  Rahmenradius: .1em .1em 0 0/10em 10em 0 0;
  Hintergrund: #c00;
  Position: absolut;
  unten: 50 %; links: 50 %;
  Rand: 0 0 -2em -.1em;
  Boxschatten:rgba(0,0,0,.8) 0 0 .2em;
  Transform-Ursprung:0,1em 12em;
  transformieren: drehen (120 Grad);
  Animation: Sekunden 60 s Schritte (60, Ende) 0 s unendlich;
}
#Uhr .Sekundenzeiger:nach {
  Inhalt:'';
  Breite: 1,4em;
  Höhe: 1,4em;
  Rahmenradius: .7em;
  Hintergrund: erben;
  Position: absolut;
  links: -.65em; unten: 1.35em;
}
#Uhr .Sekundenzeiger:vor {
  Inhalt:'';
  Breite: .8em;
  Höhe: 3em;
  Rahmenradius: .2em .2em .4em .4em/.2em .2em 2em 2em;
  Boxschatten:rgba(0,0,0,.8) 0 0 .2em;
  Hintergrund: erben;
  Position: absolut;
  links: -.35em; unten: -3em;
}
#ansehen .digital-wrap {
  Breite: 9em;
  Höhe: 3em;
  Rand: .1em durchgezogen #222;
  Rahmenradius: .2em;
  Position: absolut;
  oben: 50 %; links: 50 %;
  Rand: 3em 0 0 -4,5em;
  Überlauf: versteckt;
  Hintergrund: #4c4c4c;
  Hintergrund: -webkit-linear-gradient (oben, #4c4c4c 0 %, #0f0f0f 100 %);
  Hintergrund: -moz-linear-gradient (oben, #4c4c4c 0 %, #0f0f0f 100 %);
  Hintergrund: -ms-linear-gradient (oben, #4c4c4c 0 %, #0f0f0f 100 %);
  Hintergrund: -o-linear-gradient (oben, #4c4c4c 0 %, #0f0f0f 100 %);
  Hintergrund: linearer Farbverlauf (nach unten, #4c4c4c 0 %, #0f0f0f 100 %);
}
#Uhr .digital-wrap ul {
  schweben: links;
  Breite: 2,85em;
  Höhe: 3em;
  Rahmen rechts: .1em durchgezogen #000;
  Farbe: #ddd;
  Schriftfamilie: Consolas, Monaco, Monospace;
}
#Uhr .digital-wrap ul:last-child { border:none }
#Uhr .digital-wrap li {
  Schriftgröße: 1,5em;
  Zeilenhöhe: 2;
  Buchstabenabstand: 2px;
  Textausrichtung: zentriert;
  Position: relativ;
  links: 1px;
}
#Uhr .digit-minutes li {
  Animation: dsm 3600s Schritte (60, Ende) 0s unendlich;
}
#Uhr .digit-seconds li {
  Animation: dsm 60s Schritte (60, Ende) 0s unendlich;
}
@keyframes dsm {
  zu { transform:translateY(-120em) }
}