全国联动css,CSS3 齿轮啮合联动动画

CSS

语言：

CSSSCSS

确定

body {

background: radial-gradient(circle, #333, #111);

overflow: hidden;

}

.cog {

position: absolute;

width: 200px;

height: 200px;

top: 50%;

left: 50%;

border-radius: 200px;

margin: -100px 0 0 -230px;

background-image: radial-gradient(#666 60%, rgba(0, 0, 0, 0) 61%), repeating-conic-gradient(#666 0 15deg, transparent 0 30deg);

animation-name: rotate;

animation-duration: 6s;

animation-iteration-count: infinite;

animation-timing-function: linear;

}

.cog:before {

content: "";

position: absolute;

width: 50%;

height: 50%;

top: 25%;

left: 25%;

border-radius: 400px;

background-image: radial-gradient(#2e2e2e 20%, #666 21%, #666 30%, rgba(0, 0, 0, 0) 31%), repeating-conic-gradient(#2e2e2e 0 45deg, transparent 0 90deg);

}

@keyframes rotate {

from {

transform: rotate(0);

}

to {

transform: rotate(360deg);

}

}

.cog-2,

.cog-3 {

animation-direction: reverse;

width: 100px;

height: 100px;

margin: 20px 0 0 -58px;

animation-duration: 3s;

background-image: radial-gradient(#666 50%, rgba(0, 0, 0, 0) 51%), repeating-conic-gradient(#666 0 30deg, transparent 0 60deg);

}

.cog-3 {

animation-direction: normal;

margin: -23px 0 0 20px;

}

.cog-bg1 {

animation-direction: reverse;

width: 300px;

height: 300px;

margin: -150px 0 0 -200px;

animation-duration: 9s;

background-image: radial-gradient(#252525 65%, rgba(0, 0, 0, 0) 65%), repeating-conic-gradient(#252525 0 10deg, transparent 0 20deg);

}

.cog-bg1:before {

width: 70%;

height: 70%;

top: 15%;

left: 15%;

background-image: radial-gradient(#333 20%, #252525 21%, #252525 30%, rgba(0, 0, 0, 0) 31%), repeating-conic-gradient(#333 0 45deg, transparent 0 90deg);

}