CSS3 clock

by Ulrich Bangert

HTML

<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="8">8 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>
<button id="fahr">Fahr</button>
</div><br>




<div id="wrapper"><div id="wrapper1">
 
<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"></span>   
<span class="speiche speiche7 acht zwolf"></span>
<span class="speiche speiche8 acht vier"></span>
 
  <span class="speiche speiche9 vier"></span>
     <span class="speiche speiche10 vier"></span>
    <span class="speiche speiche11 vier"></span>
     <span class="speiche speiche12 vier"></span>
      <span class="speiche speiche13 vier"></span>
     <span class="speiche speiche14 vier"></span>   
        <span class="speiche speiche15 vier"></span>
     <span class="speiche speiche16 vier"></span> 

 
 </div>  </div> </div>

CSS

#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;
}

@keyframes fahr {
    from {left:0px; }
    to   {left:300px; }
}
//#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);}
 
  .speiche9{ transform: rotate(22.5deg);}
  .speiche10{ transform: rotate(67.5deg);}
  .speiche11{ transform: rotate(112.5deg);}
  .speiche12{ transform: rotate(157.5deg);}
  .speiche13{ transform: rotate(202.5deg);}
  .speiche14{ transform: rotate(247.5deg);}
  .speiche15{ transform: rotate(292.5deg);}
  .speiche16{ transform: rotate(337.5deg);}

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;
 
 
 $("#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");}
}
function stoppen(){
 $("#wrapper").css("animation-play-state","paused");
 
}
function run(){
 $("#wrapper").css("animation-play-state","running");
 
}
function runback(){
 $("#wrapper").css("animation","dreh1 4s linear infinite");
}
wahl.onchange=auswahl
color1.onchange=auswahl
color2.onchange=auswahl
color3.onchange=auswahl
play.onclick=run
back.onclick=runback
fahr.onclick=auswahl
stopa.onclick=stoppen














//$("#felge").css("border-color", "black");
/*
.box:nth-child(1) 

#nav input:not([type="number"])


$(".speiche").css("box-shadow", "blue  0 0 0 5px");


document.querySelector("div#homeheader"); 

$("#felge").css("border-color", "black");

//$("#felge").css("border-width", "10px");
//dashed double dotted
$(document).ready(function(){
    $("#felge").css("border", "10px solid red");//double
});

            <input type="radio" name="typ1" onClick="document.getElementById('verstecken').style.display='inline';" />
            Anzeigen
        </td>
        <td>
            <input type="radio" name="typ1" onClick="document.getElementById('verstecken').style.display='none';" />
            Verstecken
        </td>
document.getElementById('mehr').style.display='none';

*/