js+css实现齿轮多层圆圈旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现齿轮多层圆圈旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; margin: 0; position: relative; } :root { --basesize: 6vmin; --line: calc(var(--basesize) / 2); --color-line: white; --color-bg: black; --color-gradient: 0%; --anim-simple-unit: 2s; } html { height: 100%; font-size: 100%; } body { min-height: 100%; font-family: sans-serif; display: grid; place-items: center center; background-color: var(--color-bg); } button { all: unset; display: inline-block; color: var(--color-line); border: 1px solid; padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 2px; } button:hover { border-color: dodgerblue; } button:focus-visible { outline: 2px solid hotpink; outline-offset: 2px; } .button-group { position: fixed; top: 0; left: 0; right: 0; max-width: 100vw; padding: 0.5rem; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-end; z-index: 1; gap: 0.5rem; } @media (min-width: 800px) { .button-group { gap: 1rem; flex-direction: row; } .button-group :first-child { margin-left: auto; } } .button-group button { min-width: 5rem; text-align: center; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .app { width: 100vmin; height: 100vmin; background: var(--color-bg); max-width: 100vw; overflow: hidden; } .layers { position: absolute; transform: rotate(calc(1turn / $layer-count)); width: inherit; height: inherit; max-width: 100vw; display: grid; grid-template-areas: "stacked"; } .layers > * { grid-area: stacked; } .layer { border-radius: 50%; will-change: transform; margin: auto; max-width: 100vw; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-play-state: paused; animation-play-state: paused; -webkit-animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1); overflow: hidden; } .layer > * { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; } .layer > *::before { content: ""; display: block; position: absolute; background: var(--color-line); width: 2px; width: clamp(2px, 0.25vmin, 4px); height: var(--line); left: 50%; transform: translateX(-50%); } .layer--1 { width: calc(var(--basesize) * 1); height: calc(var(--basesize) * 1); background: var(--color-bg); background: hsl(30, 50%, var(--color-gradient)); -webkit-animation-delay: 100ms; animation-delay: 100ms; -webkit-animation-duration: 601ms; animation-duration: 601ms; -webkit-animation-name: spin-1; animation-name: spin-1; } .layer--2 { width: calc(var(--basesize) * 2); height: calc(var(--basesize) * 2); background: var(--color-bg); background: hsl(60, 50%, var(--color-gradient)); -webkit-animation-delay: 200ms; animation-delay: 200ms; -webkit-animation-duration: 602ms; animation-duration: 602ms; -webkit-animation-name: spin-2; animation-name: spin-2; } .layer--3 { width: calc(var(--basesize) * 3); height: calc(var(--basesize) * 3); background: var(--color-bg); background: hsl(90, 50%, var(--color-gradient)); -webkit-animation-delay: 300ms; animation-delay: 300ms; -webkit-animation-duration: 603ms; animation-duration: 603ms; -webkit-animation-name: spin-3; animation-name: spin-3; } .layer--4 { width: calc(var(--basesize) * 4); height: calc(var(--basesize) * 4); background: var(--color-bg); background: hsl(120, 50%, var(--color-gradient)); -webkit-animation-delay: 400ms; animation-delay: 400ms; -webkit-animation-duration: 604ms; animation-duration: 604ms; -webkit-animation-name: spin-4; animation-name: spin-4; } .layer--5 { width: calc(var(--basesize) * 5); height: calc(var(--basesize) * 5); background: var(--color-bg); background: hsl(150, 50%, var(--color-gradient)); -webkit-animation-delay: 500ms; animation-delay: 500ms; -webkit-animation-duration: 605ms; animation-duration: 605ms; -webkit-animation-name: spin-5; animation-name: spin-5; } .layer--6 { width: calc(var(--basesize) * 6); height: calc(var(--basesize) * 6); background: var(--color-bg); background: hsl(180, 50%, var(--color-gradient)); -webkit-animation-delay: 600ms; animation-delay: 600ms; -webkit-animation-duration: 606ms; animation-duration: 606ms; -webkit-animation-name: spin-6; animation-name: spin-6; } .layer--7 { width: calc(var(--basesize) * 7); height: calc(var(--basesize) * 7); background: var(--color-bg); background: hsl(210, 50%, var(--color-gradient)); -webkit-animation-delay: 700ms; animation-delay: 700ms; -webkit-animation-duration: 607ms; animation-duration: 607ms; -webkit-animation-name: spin-7; animation-name: spin-7; } .layer--8 { width: calc(var(--basesize) * 8); height: calc(var(--basesize) * 8); background: var(--color-bg); background: hsl(240, 50%, var(--color-gradient)); -webkit-animation-delay: 800ms; animation-delay: 800ms; -webkit-animation-duration: 608ms; animation-duration: 608ms; -webkit-animation-name: spin-8; animation-name: spin-8; } .layer--9 { width: calc(var(--basesize) * 9); height: calc(var(--basesize) * 9); background: var(--color-bg); background: hsl(270, 50%, var(--color-gradient)); -webkit-animation-delay: 900ms; animation-delay: 900ms; -webkit-animation-duration: 609ms; animation-duration: 609ms; -webkit-animation-name: spin-9; animation-name: spin-9; } .layer--10 { width: calc(var(--basesize) * 10); height: calc(var(--basesize) * 10); background: var(--color-bg); background: hsl(300, 50%, var(--color-gradient)); -webkit-animation-delay: 1000ms; animation-delay: 1000ms; -webkit-animation-duration: 610ms; animation-duration: 610ms; -webkit-animation-name: spin-10; animation-name: spin-10; } .layer--11 { width: calc(var(--basesize) * 11); height: calc(var(--basesize) * 11); background: var(--color-bg); background: hsl(330, 50%, var(--color-gradient)); -webkit-animation-delay: 1100ms; animation-delay: 1100ms; -webkit-animation-duration: 611ms; animation-duration: 611ms; -webkit-animation-name: spin-11; animation-name: spin-11; } .layer--12 { width: calc(var(--basesize) * 12); height: calc(var(--basesize) * 12); background: var(--color-bg); background: hsl(0, 50%, var(--color-gradient)); -webkit-animation-delay: 1200ms; animation-delay: 1200ms; -webkit-animation-duration: 612ms; animation-duration: 612ms; -webkit-animation-name: spin-12; animation-name: spin-12; } .layer--1 :nth-child(1) { transform: rotate(0.1666666667turn); } .layer--1 :nth-child(2) { transform: rotate(0.3333333333turn); } .layer--1 :nth-child(3) { transform: rotate(0.5turn); } .layer--1 :nth-child(4) { transform: rotate(0.6666666667turn); } .layer--1 :nth-child(5) { transform: rotate(0.8333333333turn); } .layer--1 :nth-child(6) { transform: rotate(1turn); } .layer--2 :nth-child(1) { transform: rotate(0.0833333333turn); } .layer--2 :nth-child(2) { transform: rotate(0.1666666667turn); } .layer--2 :nth-child(3) { transform: rotate(0.25turn); } .layer--2 :nth-child(4) { transform: rotate(0.3333333333turn); } .layer--2 :nth-child(5) { transform: rotate(0.4166666667turn); } .layer--2 :nth-child(6) { transform: rotate(0.5turn); } .layer--2 :nth-child(7) { transform: rotate(0.5833333333turn); } .layer--2 :nth-child(8) { transform: rotate(0.6666666667turn); } .layer--2 :nth-child(9) { transform: rotate(0.75turn); } .layer--2 :nth-child(10) { transform: rotate(0.8333333333turn); } .layer--2 :nth-child(11) { transform: rotate(0.9166666667turn); } .layer--2 :nth-child(12) { transform: rotate(1turn); } .layer--3 :nth-child(1) { transform: rotate(0.0555555556turn); } .layer--3 :nth-child(2) { transform: rotate(0.1111111111turn); } .layer--3 :nth-child(3) { transform: rotate(0.1666666667turn); } .layer--3 :nth-child(4) { transform: rotate(0.2222222222turn); } .layer--3 :nth-child(5) { transform: rotate(0.2777777778turn); } .layer--3 :nth-child(6) { transform: rotate(0.3333333333turn); } .layer--3 :nth-child(7) { transform: rotate(0.3888888889turn); } .layer--3 :nth-child(8) { transform: rotate(0.4444444444turn); } .layer--3 :nth-child(9) { transform: rotate(0.5turn); } .layer--3 :nth-child(10) { transform: rotate(0.5555555556turn); } .layer--3 :nth-child(11) { transform: rotate(0.6111111111turn); } .layer--3 :nth-child(12) { transform: rotate(0.6666666667turn); } .layer--3 :nth-child(13) { transform: rotate(0.7222222222turn); } .layer--3 :nth-child(14) { transform: rotate(0.7777777778turn); } .layer--3 :nth-child(15) { transform: rotate(0.8333333333turn); } .layer--3 :nth-child(16) { transform: rotate(0.8888888889turn); } .layer--3 :nth-child(17) { transform: rotate(0.9444444444turn); } .layer--3 :nth-child(18) { transform: rotate(1turn); } .layer--4 :nth-child(1) { transform: rotate(0.0416666667turn); } .layer--4 :nth-child(2) { transform: rotate(0.0833333333turn); } .layer--4 :nth-child(3) { transform: rotate(0.125turn); } .layer--4 :nth-child(4) { transform: rotate(0.1666666667turn); } .layer--4 :nth-child(5) { transform: rotate(0.2083333333turn); } .layer--4 :nth-child(6) { transform: rotate(0.25turn); } .layer--4 :nth-child(7) { transform: rotate(0.2916666667turn); } .layer--4 :nth-child(8) { transform: rotate(0.3333333333turn); } .layer--4 :nth-child(9) { transform: rotate(0.375turn); } .layer--4 :nth-child(10) { transform: rotate(0.4166666667turn); } .layer--4 :nth-child(11) { transform: rotate(0.4583333333turn); } .layer--4 :nth-child(12) { transform: rotate(0.5turn); } .layer--4 :nth-child(13) { transform: rotate(0.5416666667turn); } .layer--4 :nth-child(14) { transform: rotate(0.5833333333turn); } .layer--4 :nth-child(15) { transform: rotate(0.625turn); } .layer--4 :nth-child(16) { transform: rotate(0.6666666667turn); } .layer--4 :nth-child(17) { transform: rotate(0.7083333333turn); } .layer--4 :nth-child(18) { transform: rotate(0.75turn); } .layer--4 :nth-child(19) { transform: rotate(0.7916666667turn); } .layer--4 :nth-child(20) { transform: rotate(0.8333333333turn); } .layer--4 :nth-child(21) { transform: rotate(0.875turn); } .layer--4 :nth-child(22) { transform: rotate(0.9166666667turn); } .layer--4 :nth-child(23) { transform: rotate(0.9583333333turn); } .layer--4 :nth-child(24) { transform: rotate(1turn); } .layer--5 :nth-child(1) { transform: rotate(0.0333333333turn); } .layer--5 :nth-child(2) { transform: rotate(0.0666666667turn); } .layer--5 :nth-child(3) { transform: rotate(0.1turn); } .layer--5 :nth-child(4) { transform: rotate(0.1333333333turn); } .layer--5 :nth-child(5) { transform: rotate(0.1666666667turn); } .layer--5 :nth-child(6) { transform: rotate(0.2turn); } .layer--5 :nth-child(7) { transform: rotate(0.2333333333turn); } .layer--5 :nth-child(8) { transform: rotate(0.2666666667turn); } .layer--5 :nth-child(9) { transform: rotate(0.3turn); } .layer--5 :nth-child(10) { transform: rotate(0.3333333333turn); } .layer--5 :nth-child(11) { transform: rotate(0.3666666667turn); } .layer--5 :nth-child(12) { transform: rotate(0.4turn); } .layer--5 :nth-child(13) { transform: rotate(0.4333333333turn); } .layer--5 :nth-child(14) { transform: rotate(0.4666666667turn); } .layer--5 :nth-child(15) { transform: rotate(0.5turn); } .layer--5 :nth-child(16) { transform: rotate(0.5333333333turn); } .layer--5 :nth-child(17) { transform: rotate(0.5666666667turn); } .layer--5 :nth-child(18) { transform: rotate(0.6turn); } .layer--5 :nth-child(19) { transform: rotate(0.6333333333turn); } .layer--5 :nth-child(20) { transform: rotate(0.6666666667turn); } .layer--5 :nth-child(21) { transform: rotate(0.7turn); } .layer--5 :nth-child(22) { transform: rotate(0.7333333333turn); } .layer--5 :nth-child(23) { transform: rotate(0.7666666667turn); } .layer--5 :nth-child(24) { transform: rotate(0.8turn); } .layer--5 :nth-child(25) { transform: rotate(0.8333333333turn); } .layer--5 :nth-child(26) { transform: rotate(0.8666666667turn); } .layer--5 :nth-child(27) { transform: rotate(0.9turn); } .layer--5 :nth-child(28) { transform: rotate(0.9333333333turn); } .layer--5 :nth-child(29) { transform: rotate(0.9666666667turn); } .layer--5 :nth-child(30) { transform: rotate(1turn); } .layer--6 :nth-child(1) { transform: rotate(0.0277777778turn); } .layer--6 :nth-child(2) { transform: rotate(0.0555555556turn); } .layer--6 :nth-child(3) { transform: rotate(0.0833333333turn); } .layer--6 :nth-child(4) { transform: rotate(0.1111111111turn); } .layer--6 :nth-child(5) { transform: rotate(0.1388888889turn); } .layer--6 :nth-child(6) { transform: rotate(0.1666666667turn); } .layer--6 :nth-child(7) { transform: rotate(0.1944444444turn); } .layer--6 :nth-child(8) { transform: rotate(0.2222222222turn); } .layer--6 :nth-child(9) { transform: rotate(0.25turn); } .layer--6 :nth-child(10) { transform: rotate(0.2777777778turn); } .layer--6 :nth-child(11) { transform: rotate(0.3055555556turn); } .layer--6 :nth-child(12) { transform: rotate(0.3333333333turn); } .layer--6 :nth-child(13) { transform: rotate(0.3611111111turn); } .layer--6 :nth-child(14) { transform: rotate(0.3888888889turn); } .layer--6 :nth-child(15) { transform: rotate(0.4166666667turn); } .layer--6 :nth-child(16) { transform: rotate(0.4444444444turn); } .layer--6 :nth-child(17) { transform: rotate(0.4722222222turn); } .layer--6 :nth-child(18) { transform: rotate(0.5turn); } .layer--6 :nth-child(19) { transform: rotate(0.5277777778turn); } .layer--6 :nth-child(20) { transform: rotate(0.5555555556turn); } .layer--6 :nth-child(21) { transform: rotate(0.5833333333turn); } .layer--6 :nth-child(22) { transform: rotate(0.6111111111turn); } .layer--6 :nth-child(23) { transform: rotate(0.6388888889turn); } .layer--6 :nth-child(24) { transform: rotate(0.6666666667turn); } .layer--6 :nth-child(25) { transform: rotate(0.6944444444turn); } .layer--6 :nth-child(26) { transform: rotate(0.7222222222turn); } .layer--6 :nth-child(27) { transform: rotate(0.75turn); } .layer--6 :nth-child(28) { transform: rotate(0.7777777778turn); } .layer--6 :nth-child(29) { transform: rotate(0.8055555556turn); } .layer--6 :nth-child(30) { transform: rotate(0.8333333333turn); } .layer--6 :nth-child(31) { transform: rotate(0.8611111111turn); } .layer--6 :nth-child(32) { transform: rotate(0.8888888889turn); } .layer--6 :nth-child(33) { transform: rotate(0.9166666667turn); } .layer--6 :nth-child(34) { transform: rotate(0.9444444444turn); } .layer--6 :nth-child(35) { transform: rotate(0.9722222222turn); } .layer--6 :nth-child(36) { transform: rotate(1turn); } .layer--7 :nth-child(1) { transform: rotate(0.0238095238turn); } .layer--7 :nth-child(2) { transform: rotate(0.0476190476turn); } .layer--7 :nth-child(3) { transform: rotate(0.0714285714turn); } .layer--7 :nth-child(4) { transform: rotate(0.0952380952turn); } .layer--7 :nth-child(5) { transform: rotate(0.119047619turn); } .layer--7 :nth-child(6) { transform: rotate(0.1428571429turn); } .layer--7 :nth-child(7) { transform: rotate(0.1666666667turn); } .layer--7 :nth-child(8) { transform: rotate(0.1904761905turn); } .layer--7 :nth-child(9) { transform: rotate(0.2142857143turn); } .layer--7 :nth-child(10) { transform: rotate(0.2380952381turn); } .layer--7 :nth-child(11) { transform: rotate(0.2619047619turn); } .layer--7 :nth-child(12) { transform: rotate(0.2857142857turn); } .layer--7 :nth-child(13) { transform: rotate(0.3095238095turn); } .layer--7 :nth-child(14) { transform: rotate(0.3333333333turn); } .layer--7 :nth-child(15) { transform: rotate(0.3571428571turn); } .layer--7 :nth-child(16) { transform: rotate(0.380952381turn); } .layer--7 :nth-child(17) { transform: rotate(0.4047619048turn); } .layer--7 :nth-child(18) { transform: rotate(0.4285714286turn); } .layer--7 :nth-child(19) { transform: rotate(0.4523809524turn); } .layer--7 :nth-child(20) { transform: rotate(0.4761904762turn); } .layer--7 :nth-child(21) { transform: rotate(0.5turn); } .layer--7 :nth-child(22) { transform: rotate(0.5238095238turn); } .layer--7 :nth-child(23) { transform: rotate(0.5476190476turn); } .layer--7 :nth-child(24) { transform: rotate(0.5714285714turn); } .layer--7 :nth-child(25) { transform: rotate(0.5952380952turn); } .layer--7 :nth-child(26) { transform: rotate(0.619047619turn); } .layer--7 :nth-child(27) { transform: rotate(0.6428571429turn); } .layer--7 :nth-child(28) { transform: rotate(0.6666666667turn); } .layer--7 :nth-child(29) { transform: rotate(0.6904761905turn); } .layer--7 :nth-child(30) { transform: rotate(0.7142857143turn); } .layer--7 :nth-child(31) { transform: rotate(0.7380952381turn); } .layer--7 :nth-child(32) { transform: rotate(0.7619047619turn); } .layer--7 :nth-child(33) { transform: rotate(0.7857142857turn); } .layer--7 :nth-child(34) { transform: rotate(0.8095238095turn); } .layer--7 :nth-child(35) { transform: rotate(0.8333333333turn); } .layer--7 :nth-child(36) { transform: rotate(0.8571428571turn); } .layer--7 :nth-child(37) { transform: rotate(0.880952381turn); } .layer--7 :nth-child(38) { transform: rotate(0.9047619048turn); } .layer--7 :nth-child(39) { transform: rotate(0.9285714286turn); } .layer--7 :nth-child(40) { transform: rotate(0.9523809524turn); } .layer--7 :nth-child(41) { transform: rotate(0.9761904762turn); } .layer--7 :nth-child(42) { transform: rotate(1turn); } .layer--8 :nth-child(1) { transform: rotate(0.0208333333turn); } .layer--8 :nth-child(2) { transform: rotate(0.0416666667turn); } .layer--8 :nth-child(3) { transform: rotate(0.0625turn); } .layer--8 :nth-child(4) { transform: rotate(0.0833333333turn); } .layer--8 :nth-child(5) { transform: rotate(0.1041666667turn); } .layer--8 :nth-child(6) { transform: rotate(0.125turn); } .layer--8 :nth-child(7) { transform: rotate(0.1458333333turn); } .layer--8 :nth-child(8) { transform: rotate(0.1666666667turn); } .layer--8 :nth-child(9) { transform: rotate(0.1875turn); } .layer--8 :nth-child(10) { transform: rotate(0.2083333333turn); } .layer--8 :nth-child(11) { transform: rotate(0.2291666667turn); } .layer--8 :nth-child(12) { transform: rotate(0.25turn); } .layer--8 :nth-child(13) { transform: rotate(0.2708333333turn); } .layer--8 :nth-child(14) { transform: rotate(0.2916666667turn); } .layer--8 :nth-child(15) { transform: rotate(0.3125turn); } .layer--8 :nth-child(16) { transform: rotate(0.3333333333turn); } .layer--8 :nth-child(17) { transform: rotate(0.3541666667turn); } .layer--8 :nth-child(18) { transform: rotate(0.375turn); } .layer--8 :nth-child(19) { transform: rotate(0.3958333333turn); } .layer--8 :nth-child(20) { transform: rotate(0.4166666667turn); } .layer--8 :nth-child(21) { transform: rotate(0.4375turn); } .layer--8 :nth-child(22) { transform: rotate(0.4583333333turn); } .layer--8 :nth-child(23) { transform: rotate(0.4791666667turn); } .layer--8 :nth-child(24) { transform: rotate(0.5turn); } .layer--8 :nth-child(25) { transform: rotate(0.5208333333turn); } .layer--8 :nth-child(26) { transform: rotate(0.5416666667turn); } .layer--8 :nth-child(27) { transform: rotate(0.5625turn); } .layer--8 :nth-child(28) { transform: rotate(0.5833333333turn); } .layer--8 :nth-child(29) { transform: rotate(0.6041666667turn); } .layer--8 :nth-child(30) { transform: rotate(0.625turn); } .layer--8 :nth-child(31) { transform: rotate(0.6458333333turn); } .layer--8 :nth-child(32) { transform: rotate(0.6666666667turn); } .layer--8 :nth-child(33) { transform: rotate(0.6875turn); } .layer--8 :nth-child(34) { transform: rotate(0.7083333333turn); } .layer--8 :nth-child(35) { transform: rotate(0.7291666667turn); } .layer--8 :nth-child(36) { transform: rotate(0.75turn); } .layer--8 :nth-child(37) { transform: rotate(0.7708333333turn); } .layer--8 :nth-child(38) { transform: rotate(0.7916666667turn); } .layer--8 :nth-child(39) { transform: rotate(0.8125turn); } .layer--8 :nth-child(40) { transform: rotate(0.8333333333turn); } .layer--8 :nth-child(41) { transform: rotate(0.8541666667turn); } .layer--8 :nth-child(42) { transform: rotate(0.875turn); } .layer--8 :nth-child(43) { transform: rotate(0.8958333333turn); } .layer--8 :nth-child(44) { transform: rotate(0.9166666667turn); } .layer--8 :nth-child(45) { transform: rotate(0.9375turn); } .layer--8 :nth-child(46) { transform: rotate(0.9583333333turn); } .layer--8 :nth-child(47) { transform: rotate(0.9791666667turn); } .layer--8 :nth-child(48) { transform: rotate(1turn); } .layer--9 :nth-child(1) { transform: rotate(0.0185185185turn); } .layer--9 :nth-child(2) { transform: rotate(0.037037037turn); } .layer--9 :nth-child(3) { transform: rotate(0.0555555556turn); } .layer--9 :nth-child(4) { transform: rotate(0.0740740741turn); } .layer--9 :nth-child(5) { transform: rotate(0.0925925926turn); } .layer--9 :nth-child(6) { transform: rotate(0.1111111111turn); } .layer--9 :nth-child(7) { transform: rotate(0.1296296296turn); } .layer--9 :nth-child(8) { transform: rotate(0.1481481481turn); } .layer--9 :nth-child(9) { transform: rotate(0.1666666667turn); } .layer--9 :nth-child(10) { transform: rotate(0.1851851852turn); } .layer--9 :nth-child(11) { transform: rotate(0.2037037037turn); } .layer--9 :nth-child(12) { transform: rotate(0.2222222222turn); } .layer--9 :nth-child(13) { transform: rotate(0.2407407407turn); } .layer--9 :nth-child(14) { transform: rotate(0.2592592593turn); } .layer--9 :nth-child(15) { transform: rotate(0.2777777778turn); } .layer--9 :nth-child(16) { transform: rotate(0.2962962963turn); } .layer--9 :nth-child(17) { transform: rotate(0.3148148148turn); } .layer--9 :nth-child(18) { transform: rotate(0.3333333333turn); } .layer--9 :nth-child(19) { transform: rotate(0.3518518519turn); } .layer--9 :nth-child(20) { transform: rotate(0.3703703704turn); } .layer--9 :nth-child(21) { transform: rotate(0.3888888889turn); } .layer--9 :nth-child(22) { transform: rotate(0.4074074074turn); } .layer--9 :nth-child(23) { transform: rotate(0.4259259259turn); } .layer--9 :nth-child(24) { transform: rotate(0.4444444444turn); } .layer--9 :nth-child(25) { transform: rotate(0.462962963turn); } .layer--9 :nth-child(26) { transform: rotate(0.4814814815turn); } .layer--9 :nth-child(27) { transform: rotate(0.5turn); } .layer--9 :nth-child(28) { transform: rotate(0.5185185185turn); } .layer--9 :nth-child(29) { transform: rotate(0.537037037turn); } .layer--9 :nth-child(30) { transform: rotate(0.5555.........完整代码请登录后点击上方下载按钮下载查看
网友评论0