js+css实现方块脉冲动画效果代码-html代码-BFW代码库

js+css实现方块脉冲动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现方块脉冲动画效果代码

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

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

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

  
  
  
<style>
.scene,
.cubes, .cube > *, .cube, body {
  position: absolute;
  transform-style: preserve-3d;
}

.cube > *, .cube, body {
  display: grid;
}
.cube > * > *, .cube > *, body > * {
  place-self: center;
}

*,
*::after,
*::before {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --fill: #db6400;
  --stroke: #ffa62b;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  perspective: var(--perspective, 400vmin);
  background: var(--background, #16697a);
}

:root {
  --cubes: 10;
  --background: #420516;
}

.scene {
  -webkit-animation: scene 30s ease-in-out infinite;
          animation: scene 30s ease-in-out infinite;
}

.cubes {
  -webkit-animation: cubes 60s linear infinite;
          animation: cubes 60s linear infinite;
}

.cube {
  position: absolute;
}
.cube > * {
  background: rgba(230, 62, 109, 0.125);
  border: var(--border) solid #7d1935;
}
.cube > *:nth-of-type(1), .cube > *:nth-of-type(2) {
  height: var(--size);
  width: var(--size);
}
.cube > *:nth-of-type(1) {
  --transform: translate3d(0, 0, calc(var(--size) / 2));
  transform: var(--transform);
}
.cube > *:nth-of-type(2) {
  --transform: rotate3d(0, -1, 0, 180deg) translate3d(0, 0, calc(var(--size) / 2));
  transform: var(--transform);
}
.cube > *:nth-of-type(3), .cube > *:nth-of-type(4) {
  height: var(--size);
  width: var(--size);
}
.cube > *:nth-of-type(3) {
  --transform: rotate3d(0, 1, 0, 90deg) translate3d(0, 0, calc(var(--size) / 2));
  transform: var(--transform);
}
.cube > *:nth-of-type(4) {
  --transform: rotate3d(0, -1, 0, 90deg) translate3d(0, 0, calc(var(--size) / 2));
  transform: var(--transform);
}
.cube > *:nth-of-type(5), .cube > *:nth-of-type(6) {
  height: var(--size);
  width: var(--size);
}
.cube > *:nth-of-type(5) {
  --transform: rotate3d(1, 0, 0, 90deg) translate3d(0, 0, calc(var(--size) / 2));
  transform: var(--transform);
}
.cube > *:nth-of-type(6) {
  --transform: rotate3d(-1, 0, 0, 90deg) translate3d(0, 0, calc(var(--size) / 2));
  transform: var(--transform);
}
.cube:nth-child(1) {
  --size: 5vmin;
  --border: 0.5vmin;
  --delay-face: 0s;
  --distance: 45vmin;
}
.cube:nth-child(2) {
  --size: 10vmin;
  --border: 0.5vmin;
  --delay-face: 0.1666666667s;
  --distance: 40vmin;
}
.cube:nth-child(3) {
  --size: 15vmin;
  --border: 0.5vmin;
  --delay-face: 0.3333333333s;
  --distance: 35vmin;
}
.cube:nth-child(4) {
  --size: 20vmin;
  --border: 0.5vmin;
  --delay-face: 0.5s;
  --distance: 30vmin;
}
.cube:nth-child(5) {
  --.........完整代码请登录后点击上方下载按钮下载查看