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"></span>

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

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:10px;
height:10px;
  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:100px;left:0px; }
   10%{top:0px;left:100px; }
      20%{top:100px;left:100px; }
   30%{top:0px;left:200px; }
       40%{top:100px;left:200px; }
   50%{top:0px;left:300px; }  
        60%{top:100px;left:300px; }
   70%{top:0px;left:200px; } 
           80%{top:100px;left:200px; }
   90%{top:0px;left:100px; } 
    100%{top:100px;left:0px; }  
}


//#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; }
 .speiche1{ transform: rotate(45deg);}
  .speiche2{ transform: rotate(90deg);}
  .speiche3{ transform: rotate(135deg);}
  .speiche4{ transform: rotate(180deg);}
  .speiche5{ transform: rotate(225deg);}
  .speiche6{ transform: rotate(270deg);}
  .speiche7{ transform: rotate(315deg);}
  .speiche8{ transform: rotate(360deg);}
 
...

JavaScript

function auswahl(){
$(".speiche").css("display","block");
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)");

}








}





function stoppen(){
 $("#wrapper").css("animation-play-state","paused");
 
}
function run(){
 $("#wrapper").css("animation","dreh 4s infinite linear");

}

function runback(){

 $("#wrapper").css("animation","dreh1 4s infinite linear");
}
s=true;
l=true;
function fahrlos(){
 
if(l==true){
 
...