css3 旋转 不停,CSS3 不断变换颜色的旋转齿轮

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);

}

}