CSS
语言:
CSSSCSS
确定
body {
background: black;
}
.clock {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.gears {
display: block;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.7;
}
.gears + .gears {
opacity: 1;
}
.gear,
.gear--standard,
.gear--reverse,
.gear--large {
display: block;
width: 50px;
height: 50px;
float: left;
background: blue;
border-radius: 50%;
position: relative;
}
.gear:before,
.gear--standard:before,
.gear--reverse:before,
.gear--large:before {
content: "";
display: block;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
z-index: 200;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
-webkit-animation: rainbow 20s linear;
-moz-animation: rainbow 20s linear;
animation: rainbow 20s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.gear:after,
.gear--standard:after,
.gear--reverse:after,
.gear--large:after {
content: "";
display: block;
width: 30px;
height: 30px;
background: black;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
border-radius: 50%;
}
.gear--standard {
-webkit-animation: spin 3s linear, rainbow 20s linear;
-moz-animation: spin 3s linear, rainbow 20s linear;
animation: spin 3s linear, rainbow 20s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0.55;
}
.gear--reverse {
-webkit-animation: spin_back 3s linear, rainbow 20s linear;
-moz-animation: spin_back 3s linear, rainbow 20s linear;
animation: spin_back 3s linear, rainbow 20s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.gear--large {
display: block;
width: 80px;
height: 80px;
-webkit-animation: spin 4.5s linear, rainbow 20s linear;
-moz-animation: spin 4.5s linear, rainbow 20s linear;
animation: spin 4.5s linear, rainbow 20s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.gear--large:after {
display: block;
width: 55px;
height: 55px;
}
.gear--large.cornered {
top: -40px;
left: 60px;
}
.gear--large.cornered + .cornered {
top: -37px;
left: 69px;
-webkit-animation: spin_back 4.5s linear, rainbow 20s linear;
-moz-animation: spin_back 4.5s linear, rainbow 20s linear;
animation: spin_back 4.5s linear, rainbow 20s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.gear__peg,
.gear__peg--large {
display: block;
width: 12px;
height: 30px;
background: blue;
position: absolute;
top: 0px;
left: 50%;
margin-top: -5px;
margin-left: -6px;
-webkit-animation: rainbow 20s linear;
-moz-animation: rainbow 20s linear;
animation: rainbow 20s linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.gear__peg--large {
display: block;
width: 12px;
height: 45px;
}
.gear__peg:nth-child(1),
.gear__peg--large:nth-child(1) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
-ms-transform: rotate(40deg);
-o-transform: rotate(40deg);
transform: rotate(40deg);
}
.gear__peg:nth-child(2),
.gear__peg--large:nth-child(2) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(80deg);
-moz-transform: rotate(80deg);
-ms-transform: rotate(80deg);
-o-transform: rotate(80deg);
transform: rotate(80deg);
}
.gear__peg:nth-child(3),
.gear__peg--large:nth-child(3) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.gear__peg:nth-child(4),
.gear__peg--large:nth-child(4) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(160deg);
-moz-transform: rotate(160deg);
-ms-transform: rotate(160deg);
-o-transform: rotate(160deg);
transform: rotate(160deg);
}
.gear__peg:nth-child(5),
.gear__peg--large:nth-child(5) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(200deg);
-moz-transform: rotate(200deg);
-ms-transform: rotate(200deg);
-o-transform: rotate(200deg);
transform: rotate(200deg);
}
.gear__peg:nth-child(6),
.gear__peg--large:nth-child(6) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
.gear__peg:nth-child(7),
.gear__peg--large:nth-child(7) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(280deg);
-moz-transform: rotate(280deg);
-ms-transform: rotate(280deg);
-o-transform: rotate(280deg);
transform: rotate(280deg);
}
.gear__peg:nth-child(8),
.gear__peg--large:nth-child(8) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(320deg);
-moz-transform: rotate(320deg);
-ms-transform: rotate(320deg);
-o-transform: rotate(320deg);
transform: rotate(320deg);
}
.gear__peg:nth-child(9),
.gear__peg--large:nth-child(9) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.gear__peg--large:nth-child(1) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.gear__peg--large:nth-child(2) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.gear__peg--large:nth-child(3) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.gear__peg--large:nth-child(4) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.gear__peg--large:nth-child(5) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(150deg);
-moz-transform: rotate(150deg);
-ms-transform: rotate(150deg);
-o-transform: rotate(150deg);
transform: rotate(150deg);
}
.gear__peg--large:nth-child(6) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.gear__peg--large:nth-child(7) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(210deg);
-moz-transform: rotate(210deg);
-ms-transform: rotate(210deg);
-o-transform: rotate(210deg);
transform: rotate(210deg);
}
.gear__peg--large:nth-child(8) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
.gear__peg--large:nth-child(9) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
.gear__peg--large:nth-child(10) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
.gear__peg--large:nth-child(11) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
}
.gear__peg--large:nth-child(12) {
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-ms-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
@-webkit-keyframes rainbow {
0% {
background: #00f;
}
16% {
background: #f0f;
}
48% {
background: #f90;
}
64% {
background: #3c3;
}
80% {
background: #09c;
}
100% {
background: #00f;
}
}
@-moz-keyframes rainbow {
0% {
background: #00f;
}
16% {
background: #f0f;
}
48% {
background: #f90;
}
64% {
background: #3c3;
}
80% {
background: #09c;
}
100% {
background: #00f;
}
}
@keyframes rainbow {
0% {
background: #00f;
}
16% {
background: #f0f;
}
48% {
background: #f90;
}
64% {
background: #3c3;
}
80% {
background: #09c;
}
100% {
background: #00f;
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin_back {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}
@-moz-keyframes spin_back {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-360deg);
}
}
@keyframes spin_back {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
-moz-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}