Code: Select all
<html><head>
<title>Rotate disc.png</title>
<style>
.speed {
-webkit-animation-duration:1.5s;
-moz-animation-duration:1.5s;
}
.scale {
/* height: 500px; */
/* height: 750px; */
height: 1000px; */
}
body {
background-color: #5C5C5C;
width: 2400px;
height: 1300px;
}
a {
display: block;
}
.cPicker {
width: 100px;
height: 60px;
position: absolute;
z-index: 6;
}
#pGray {
background-color: #5C5C5C;
left:410px;
}
#pBlack {
background-color: #000;
}
#pWhite {
background-color: #FFF;
left:110px;
}
#pRed {
background-color: #F00;
left:210px;
}
#pGreen {
background-color: #0F0;
left:310px;
}
#colours {
border: 2px solid #333;
z-index: 10;
width: 500px; height: 60px;
}
.discs {
width: 2400px; height: 1300px;
position:absolute;
top: 100px;
}
.reverse {
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-name: spinR;
-moz-animation-name: spinR;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
margin-left: 30px;
overflow: hidden;
z-index: 3;
}
.rotate {
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-webkit-animation-name: spin;
-moz-animation-name: spin;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
margin-left: 20px;
overflow: hidden;
z-index: 3;
}
@-webkit-keyframes spin {
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
@-moz-keyframes spin {
from {-moz-transform:scale(1) rotate(0deg);}
to {-moz-transform:scale(1) rotate(360deg);}
}
@-webkit-keyframes spinR {
from {-webkit-transform:scale(1) rotate(3600deg);}
to {-webkit-transform:scale(1) rotate(0deg);}
}
@-moz-keyframes spinR {
from {-moz-transform:scale(1) rotate(360deg);}
to {-moz-transform:scale(1) rotate(0deg);}
}
.divColor {
background-color: transparent;
position:absolute;
width: 2524px; height: 1400px;
margin-top: -100px;
margin-left: -8px;
padding-bottom: 16px;
z-index: -1;
}
#bcolorB:target {
background-color: #000;
}
#bcolorW:target {
background-color: #FFF;
}
#bcolorG:target {
background-color: #0F0;
}
#bcolorR:target {
background-color: #F00;
}
#bcolorGy:target {
background-color: #5C5C5C;
}
</style>
</head>
<body>
<div id="colours"><a id="pBlack" class="cPicker" href="#bcolorB"></a><a id="pWhite" class="cPicker" href="#bcolorW"></a><a id="pGreen" class="cPicker" href="#bcolorG"></a><a id="pRed" class="cPicker" href="#bcolorR"></a><a id="pGray" class="cPicker" href="#bcolorGy"></a></div>
<div class="discs">
<div id="bcolorB" class="divColor"></div><div id="bcolorW" class="divColor"></div><div id="bcolorG" class="divColor"></div><div id="bcolorR" class="divColor"></div><div id="bcolorGy" class="divColor"></div>
<img class="rotate speed scale" src="disc.png">
<img class="reverse speed scale" src="disc.png">
</div>
</body>
</html>