js+css实现齿轮多层圆圈旋转动画效果代码-html代码-BFW代码库

代码语言：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) {
          .........完整代码请登录后点击上方下载按钮下载查看