html css齿轮滚动特效,纯CSS3实现的齿轮滚动动画-优快云博客

CSS

语言：

CSSSCSS

确定

#gearwheel-a {

height: 400px;

width: 400px;

border-radius: 50% 50%;

background: -webkit-radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), -webkit-linear-gradient(90deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-linear-gradient(0deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), -webkit-linear-gradient(67.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(45deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(22.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(0deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(337.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(315deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(292.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(270deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));

background: radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), linear-gradient(0deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), linear-gradient(90deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), linear-gradient(22.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(45deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(67.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(90deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(112.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(135deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(157.5deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(180deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));

position: absolute;

top: 20px;

left: 20px;

-webkit-animation: spin 10s linear infinite;

animation: spin 10s linear infinite;

}

#gearwheel-b {

height: 200px;

width: 200px;

border-radius: 50% 50%;

background: -webkit-radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), -webkit-linear-gradient(56deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-linear-gradient(326deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), -webkit-radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), -webkit-linear-gradient(11deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(326deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(281deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), -webkit-linear-gradient(236deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));

background: radial-gradient(circle, SandyBrown 10%, black 10%, black 20%, transparent 20%), linear-gradient(34deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), linear-gradient(124deg, transparent calc(50% - 10px), black calc(50% - 10px), black calc(50% + 10px), transparent calc(50% + 10px)), radial-gradient(circle, SandyBrown 40%, black 40%, black 60%, transparent 60%), linear-gradient(79deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(124deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(169deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px)), linear-gradient(214deg, transparent calc(50% - 19px), black calc(50% - 19px), black calc(50% + 19px), transparent calc(50% + 19px));

position: absolute;

top: 279px;

left: 356px;

-webkit-animation: spin 5s linear infinite reverse;

animation: spin 5s linear infinite reverse;

}

#mech {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;