纯css实现方块圆动画效果-html代码-BFW代码库

纯css实现方块圆动画效果

代码语言：html

所属分类：动画

代码描述：纯css实现方块圆动画效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
  body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, Ubuntu, sans-serif,
                "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

[data-whatintent='mouse'] *:focus,
[data-whatintent='touch'] *:focus {
  outline: none;
}

</style>
<style>
:root {
  --cube-size: 30vmax;
  --light-hue: 260deg;
  --light-saturation: 50%;
  --light-power: 50%;
  --faces-transparency: 50%;
}


.Cube {
  --cube-half: calc(var(--cube-size) / 2);
  --cube-z: calc(var(--cube-half) * -1);
  --light: var(--light-hue) var(--light-saturation) calc(var(--light-power) + 20%);
  --surface: var(--light-hue) var(--light-saturation) var(--light-power);
  
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(var(--cube-z));
          transform: translateZ(var(--cube-z));
  -webkit-animation: rotation 60s infinite linear;
          animation: rotation 60s infinite linear;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards
}


.Cube::before,
  .Cube::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: move 1s infinite ease-in-out alternate;
            animation: move 1s infinite ease-in-out alternate;
    background: radial-gradient(
      circle at center,
      white,
      hsl(var(--surface))
    );
  }


.Cube::before {
    --from-z: -3vmax;
    --to-z: 6vmax;
    -webkit-mask-image: radial-gradient(
      transparent 0%, transparent 40%,
      black 40.1%, black 60%,
      transparent 60.1% 
    );
            mask-image: radial-gradient(
      transparent 0%, transparent 40%,
      black 40.1%, black 60%,
      transparent 60.1% 
    )
  }


.Cube::after {
   --from-z: 6vmax;
    --to-z: -3vmax;
    -webkit-mask-image: radial-gradient(
      black 0, black 10%,
      transparent 10.1%, transparent 20%,
      black 20.1%, black 30%,
      transparent 30.1%
    );
            mask-image: radial-gradient(
      black 0, black 10%,
      transparent 10.1%, transparent 20%,
      black 20.1%, black 30%,
      transparent 30.1%
    )
  }


.Face { 
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(2px);
  box-shadow: inset 0 0 3vmax -2vmax hsl(0deg 0% 100% / max(50%, var(--light-saturation)));
  background-image: linear-gradient(
    45deg,
    hsl(var(--surface)),
    hsl(var(--light) / var(--faces-transparency))
  );
}


/* Position each face to the correct side */
[front]  { -webkit-transform: rotateY(0) translateZ(var(--cube-half)); transform: rotateY(0) translateZ(var(--cube-half)); }
[right]  { -webkit-transform: rotateY(90deg) translateZ(var(--cube-half)); transform: rotateY(90deg) translateZ(var(--cube-half)); }
[back]   { -webkit-transform: rotateY(180deg) translateZ(var(--cube-half)); transform: rotateY(180deg) translateZ(var(--cube-half)); }
[left]   { -webkit-transform: rotateY(-90deg) translateZ(var(--cube-half)); transform: rotateY(-90deg) tr.........完整代码请登录后点击上方下载按钮下载查看