css+div布局彩色三维圆环旋转动画效果代码-html代码-BFW代码库

css+div布局彩色三维圆环旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：css+div布局彩色三维圆环旋转动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

     <style>

.am-container {
  background-color: #212121;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  place-items: center;

  .scene {
    width: 100%;
    perspective: 500vmax;
    transform-style: preserve-3d;

    .wrapper {
      width: 100%;
      height: 100%;
      transform: rotateY(0) translateZ(0);
      transform-style: preserve-3d;

      .container-rings-2 {
        width: 6.52vmax;
        height: 6.52vmax;
        position: relative;
        margin-inline: auto;
        animation: move 9s ease infinite alternate;
        transform-style: preserve-3d;

        .ring {
          width: 100%;
          height: 100%;
          border: 0.13vmax dotted currentColor;
          position: absolute;
          left: 0;
          top: 0;
          transform-origin: 50% 50%;
        }
      }
    }
  }
}

@keyframes move {
  from {
    transform: scale(0.7) rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: scale(0.7) rotateX(360deg) rotateY(360deg);
  }
}

      </style>
</head>
<body>
 
<section class="am-container">
  <aside class="scene">
    <section class="wrapper">
      <article class="container-rings-2">
        <div
          class="ring"
          style="color: rgb(255, 0, 0); transform: rotateX(0deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 6, 0); transform: rotateX(1.4deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 12, 0); transform: rotateX(2.8deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 18, 0); transform: rotateX(4.2deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 24, 0); transform: rotateX(5.6deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 30, 0); transform: rotateX(7deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 36, 0); transform: rotateX(8.4deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 42, 0); transform: rotateX(9.8deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 48, 0); transform: rotateX(11.2deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 54, 0); transform: rotateX(12.6deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 59, 0); transform: rotateX(14deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 65, 0); transform: rotateX(15.4deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 71, 0); transform: rotateX(16.8deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 77, 0); transform: rotateX(18.2deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 83, 0); transform: rotateX(19.6deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 89, 0); transform: rotateX(21deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 95, 0); transform: rotateX(22.4deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 101, 0); transform: rotateX(23.8deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 107, 0); transform: rotateX(25.2deg) translateY(-13.02vmax);"
        ></div>
        <div
          class="ring"
          style="color: rgb(255, 113, 0); transform: rotat.........完整代码请登录后点击上方下载按钮下载查看