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