div+css实现三维小球在立体方块网格滚动动画效果代码-html代码-BFW代码库

div+css实现三维小球在立体方块网格滚动动画效果代码

代码语言：html

所属分类：三维

代码描述：div+css实现三维小球在立体方块网格滚动动画效果代码，纯css实现，无js代码

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

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

<head>
  <meta charset="UTF-8">
  

  
<style>
*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

.scene {
  position: relative;
  -webkit-animation: sceneRotate var(--sceneRotateDuration) infinite linear;
          animation: sceneRotate var(--sceneRotateDuration) infinite linear;
  
  --ballRotateDuration: 4s;
  --sceneRotateDuration: 48s;
}

@-webkit-keyframes sceneRotate {
  0%  { transform: rotateX(60deg) rotateZ(0deg); }
  100% { transform: rotateX(60deg) rotateZ(360deg); }
}

@keyframes sceneRotate {
  0%  { transform: rotateX(60deg) rotateZ(0deg); }
  100% { transform: rotateX(60deg) rotateZ(360deg); }
}

.grid {
  position: absolute;
  inset: -47.5vmin;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  gap: 1vmin;

  & > i {
    --dist: sqrt(var(--x) * var(--x) + var(--y) * var(--y));
    --height: calc(cos(var(--dist) / 1.8) - 1);
    --angle: calc(sin(atan2(var(--y), var(--x)) / -6));
    --delay: calc((var(--angle) - 1.75) * var(--ballRotateDuration));
    --hue: calc(var(--angle) * 360);
      
    width: 100%; height: 100%;
    overflow: hidden;
    background-color: hsl(var(--hue) 100% 20%);
    -webkit-animation: i var(--ballRotateDuration) var(--delay) infinite ease-in-out;
            animation: i var(--ballRotateDuration) var(--delay) infinite ease-in-out;

    & > i:nth-child(1) {
      position: absolute;
      inset: 0;
      background-color: #fff;
      -webkit-animation: light var(--ballRotateDuration) var(--delay) infinite ease-in-out;
              animation: light var(--ballRotateDuration) var(--delay) infinite ease-in-out;
    }
    
    & > i:nth-child(2) {
      position: absolute;
      inset: -10vmin;
      background-image: radial-gradient(#000e 5vmin, #0000 12.5vmin);
      -webkit-animation: shadow var(--ballRotateDura.........完整代码请登录后点击上方下载按钮下载查看