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