div+css实现点状三维跟随鼠标转动的小球动画效果代码-html代码-BFW代码库

div+css实现点状三维跟随鼠标转动的小球动画效果代码

代码语言：html

所属分类：其他

代码描述：div+css实现点状三维跟随鼠标转动的小球动画效果代码

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

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

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

  
  
  
<style>
:root {
  --container-x: 0;
  --container-y: 0;
  --cube-size: min(50vw, 50vh);
}

.Container {
  position: relative;
  width: var(--cube-size);
  aspect-ratio: 1 / 1;
  perspective: calc(var(--cube-size) * 4);
  transform: rotateX(calc(var(--container-x) * 1deg))
    rotateY(calc(var(--container-y) * 1deg));
  transform-style: preserve-3d;
}

.Container > div {
  position: absolute;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-width: 5px;
  border-style: dotted;
  border-radius: 50%;
  perspective: infinite;
  transform-style: preserve-3d;
}

.Container > div::before,
.Container > div::after {
  content: "";
  position: absolute;
  inset: 0;
  display: inline-block;
  width: calc(var(--cube-size) * 0.98);
  aspect-ratio: 1 / 1;
  border-width: 5px;
  border-style: dotted;
  border-radius: 50%;
  opacity: 0.2;
}
.Container > div::before {
  transform: translateZ(calc(var(--cube-size) / -8));
}
.Container > div::after {
  transform:translateZ(calc(var(--cube-size) / 8));
}

.Container > div:nth-child(1) {
  border-color: red;
  transform: rotateX(45deg) rotateY(45deg);
}
.Container > div:nth-child(2) {
  border-color: green;
  transform: rotateX(45deg) rotateY(135deg);
}
.Container > div:nth-child(3) {
  border-color: blue;
  transform: rotateX(135deg) rotateY(0deg);
}

.Container > div:nth-child(1)::before,
.Container > div:nth-child(1)::after {
  border-c.........完整代码请登录后点击上方下载按钮下载查看