div+css实现彩色方格围成圈转动动画效果代码-html代码-BFW代码库

div+css实现彩色方格围成圈转动动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现彩色方格围成圈转动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
<style>
:root {
  --mza-size: min(86vmin, 86vh);
  --mza-square-size: calc(var(--mza-size) / 14);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #0f172a 0, #020617 55%, #000 100%);
  overflow: hidden;
}

.mza-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}

.mza-orbit {
  position: relative;
  width: var(--mza-size);
  height: var(--mza-size);
}

.mza-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}

.mza-ring-core {
  animation: mza-spin 24s linear infinite;
}

.mza-ring-inner {
  animation: mza-spin-reverse 22s linear infinite;
}

.mza-ring-middle {
  animation: mza-spin 18s linear infinite;
}

.mza-ring-outer {
  animation: mza-spin-reverse 26s linear infinite;
}

.mza-square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mza-square-size);
  height: var(--mza-square-size);
  margin: calc(var(--mza-square-size) / -2);
  transform-origin: center center;
}

.mza-square-inner {
  width: 100%;
  height: 100%;
  border-radius: 20%;
  animation: mza-square-spin 8s linear infinite;
  transform-origin: center center;
}

.mza-center-square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--mza-square-size) * 2);
  height: calc(var(--mza-square-size) * 2);
  margin: calc(var(--mza-square-size) * -1);
  transform-origin: center center;
}

.mza-center-square-inner {
  width: 100%;
  height: 100%;
  border-radius: 20%;
  background: conic-gradient(from 0deg, #22d3ee, #a855f7, #f97316, #22c55e, #22d3ee);
  animation: mza-center-spin 10s linear infinite;
  transform-origin: center center;
}

.mza-ring-core .mza-square:nth-child(1) {
  transform: rotate(0deg) translate(calc(var(--mza-size) * 0.16)) rotate(0deg);
}

.mza-ring-core .mza-square:nth-child(1) .mza-square-inner {
  background: color-mix(in hsl, #f17e7e 70%, #020617 30%);
  box-shadow: 0 0 10px color-mix(in hsl, #f17e7e 70%, #000 30%), 0 0 30px color-mix(in hsl, #f17e7e 40%, #000 60%);
  animation-delay: -0.25s;
}

.mza-ring-core .mza-square:nth-child(2) {
  transform: rotate(36deg) translate(calc(var(--mza-size) * 0.16)) rotate(-36deg);
}

.mza-ring-core .mza-square:nth-child(2) .mza-square-inner {
  background: color-mix(in hsl, #f18c7e 70%, #020617 30%);
  box-shadow: 0 0 10px color-mix(in hsl, #f18c7e 70%, #000 30%), 0 0 30px color-mix(in hsl, #f18c7e 40%, #000 60%);
  animation-delay: -0.5s;
}

.mza-ring-core .mza-square:nth-child(3) {
  transform: rotate(72deg) translate(calc(var(--mza-size) * 0.16)) rotate(-72deg);
}

.mza-ring-core .mza-square:nth-child(3) .mza-square-inner {
  background: color-mix(in hsl, #f1997e 70%, #020617 30%);
  box-shadow: 0 0 10px color-mix(in hsl, #f1997e 70%, #000 30%), 0 0 30px c.........完整代码请登录后点击上方下载按钮下载查看