CSS3 clock

by basti1012

HTML

<div id="hint">
</div>
<div id="wahldiv">
  <input type="color" id="color1" name="color1" value="#012548">
  <input type="color" id="color2" name="color2" value="#645875">
  <input type="color" id="color3" name="color3" value="#132548">
  <select id="wahl" name="wahl">
    <option value="4">4 speichen</option>
    <option value="5">5 speichen</option>
    <option value="7">7 speichen</option>
    <option value="8">8 Speichen</option>
    <option value="9">9 Speichen</option>
    <option value="12">12 Speichen</option>
    <option value="16">16 speichen </option>


  </select>
  <button id="play">Play</button>
  <button id="stopa">Stop</button>
  <button id="back">Back</button>

  <br>

  <input type="color" id="color4" name="color4" value="#c12548">
  <input type="color" id="color5" name="color5" value="#c12548">
  <select id="border" name="border">
    <option value="solid">Solid </option>
    <option value="dotted">dotted</option>
    <option value="dashed">dashed</option>
    <option value="double">double</option>
  </select>Emblem:
  <input type="text" id="text" name="text" size="2" value="Sk">
  <button id="jump">JumpStart</button>
  <button id="fahr">FahrStart</button>
</div>
<div id="fahrdiv">
  <div id="wrapper">

    <div id="felge">


      <span class="speiche speiche1 acht zwolf"></span>
      <span class="speiche speiche2 acht vier"></span>
      <span class="speiche speiche3 acht zwolf"></span>
      <span class="speiche speiche4 acht vier"></span>
      <span class="speiche speiche5 acht zwolf"></span>
      <span class="speiche speiche6 acht vier funf"></span>
      <span class="speiche speiche7 acht zwolf funf"></span>
      <span class="speiche speiche8 acht vier funf sieben"></span>

      <span class="speiche speiche9 vier funf sieben"></span>
      <span class="speiche speiche10 vier funf neun sieben"></span>
      <span class="speiche speiche11 vier funf neun sieben"></span>
      <span class="speiche speiche12 vier funf neun...

CSS

#hint {
  position: absolute;
  left: 200px;
  top: 50px;
  background: red; //transparent;
  width: 200px;
  height: 100px;
  display: none;
}

p {
  font-size: 30px;
  color: yellow;
  text-align: center;
  margin-top: 12px;
}

#wrapper {
  position: absolute;
  top: 100px;
  display: inline-block;
  background-color: blue;
  border-radius: 50%;
  animation: dreh 4s infinite linear;
  animation-play-state: paused;
}

#wahldiv {
  padding-bottom: 30px;
  position: absolute;
  left: 100px;
}

#fahrdiv {
  position: absolute;
  top: 100px;
  width: 0px;
  height: 0px;
  display: inline-block;
  background-color: green;
  border-radius: 50%;
  animation-play-state: paused;
}

@keyframes fahr {
  from {
    left: 0px;
  }
  to {
    left: 350px;
  }
}

@keyframes jump {
  0% {
    top: 0px;
    left: 50px;
  }
  10% {
    top: 110px;
    left: 100px;
  }
  20% {
    top: 0px;
    left: 150px;
  }
  30% {
    top: 110px;
    left: 200px;
  }
  40% {
    top: 0px;
    left: 250px;
  }
  50% {
    top: 110px;
    left: 300px;
  }
  60% {
    top:  0px;
    left: 250px;
  }
  70% {
    top: 110px;
    left: 200px;
  }
  80% {
    top:  0px;
    left: 150px;
  }
  90% {
    top: 110px;
    left: 100px;
  }
  100% {
    top: 0px;
    left: 50px;
  }
}

//#felge { animation:dreh 4s infinite linear; }
@keyframes dreh {
  from {
    transform: rotate( 0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dreh1 {
  from {
    transform: rotate( 0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

#felge {
  position: relative;
  //  display: inline-block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 10px solid red;
}

span {
  position: absolute;
  left: 100px;
  transform-origin: bottom;
  z-index: -100;
}

.speiche {
  box-shadow: black 0 0 0 5px;
  height: 100px;
  top: 0px;
}


b {
  position: absolute;
  top: 4px;
  left: 4px;
}

span#mitte {
  posision: absolute;
  background: red;
  height: 40px;
  width: 40px;
  border-radius:...

JavaScript

function auswahl() {
  $(".speiche").css("display", "block");
  felgen_richten()
  var was = document.getElementsByName('wahl')[0].value;
  var color1 = document.getElementsByName('color1')[0].value;
  var color2 = document.getElementsByName('color2')[0].value;
  var color3 = document.getElementsByName('color3')[0].value;
  var color4 = document.getElementsByName('color4')[0].value;
  var color5 = document.getElementsByName('color5')[0].value;
  var border = document.getElementsByName('border')[0].value;


  $("span#mitte").css("background-color", color4);
  $("span#mitte").css("border-color", color5);
  $("span#mitte").css("border-style", border);

  $("#felge").css("border-color", color1);
  $("#wrapper").css("background-color", color2);
  $(".speiche").css("box-shadow", color3 + "  0 0 0 5px");

  if (was == 8) {
    $(".acht").css("display", "none");
  }
  if (was == 12) {
    $(".zwolf").css("display", "none");
  }
  if (was == 4) {
    $(".vier").css("display", "none");
  }
  if (was == 5) {
    $(".funf").css("display", "none");
    $(".speiche1").css("transform", "rotate(72deg)");
    $(".speiche2").css("transform", "rotate(144deg)");
    $(".speiche3").css("transform", "rotate(216deg)");
    $(".speiche4").css("transform", "rotate(288deg)");
    $(".speiche5").css("transform", "rotate(360deg)");
  }
  if (was == 9) {
    $(".neun").css("display", "none");
    $(".speiche1").css("transform", "rotate(40deg)");
    $(".speiche2").css("transform", "rotate(80deg)");
    $(".speiche3").css("transform", "rotate(120deg)");
    $(".speiche4").css("transform", "rotate(160deg)");
    $(".speiche5").css("transform", "rotate(200deg)");
    $(".speiche6").css("transform", "rotate(240deg)");
    $(".speiche7").css("transform", "rotate(280deg)");
    $(".speiche8").css("transform", "rotate(320deg)");
    $(".speiche9").css("transform", "rotate(360deg)");

  }
  if (was == 7) {
    $(".sieben").css("display", "none");
    $(".speiche1").css("transform",...