纯css实现三维空间飞舞的卡片动画效果-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：纯css实现三维空间飞舞的卡片动画效果

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


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

<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
<style>
body {
  -webkit-perspective: 180em;
          perspective: 180em;
}

#play {
  height: 95vh;
  width: 98vw;
  overflow: hidden;
}

#stage {
  width: 70%;
  margin-left: 15%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation-name: animate;
          animation-name: animate;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#stage .card {
  height: 200px;
  width: 129.87013px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  border-radius: 4px;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  top: 120px;
}

#stage .card:nth-of-type(1) {
  -webkit-transform: translate3d(9.375em, 10.125em, -64.875em) rotate3d(2, -3, -3, 53deg);
          transform: translate3d(9.375em, 10.125em, -64.875em) rotate3d(2, -3, -3, 53deg);
}

#stage .card:nth-of-type(2) {
  -webkit-transform: translate3d(6.375em, 9.125em, -153.125em) rotate3d(1, -3, -4, 62deg);
          transform: translate3d(6.375em, 9.125em, -153.125em) rotate3d(1, -3, -4, 62deg);
}

#stage .card:nth-of-type(3) {
  -webkit-transform: translate3d(-79.375em, 9.375em, -76.875em) rotate3d(0, 0, -3, 216deg);
          transform: translate3d(-79.375em, 9.375em, -76.875em) rotate3d(0, 0, -3, 216deg);
}

#stage .card:nth-of-type(4) {
  -webkit-transform: translate3d(-13.625em, 0.875em, 45.875em) rotate3d(-1, -3, -3, 2deg);
          transform: translate3d(-13.625em, 0.875em, 45.875em) rotate3d(-1, -3, -3, 2deg);
}

#stage .card:nth-of-type(5) {
  -webkit-transform: translate3d(-65.875em, 3.875em, 54.125em) rotate3d(-2, 3, 3, 77deg);
          transform: translate3d(-65.875em, 3.875em, 54.125em) rotate3d(-2, 3, 3, 77deg);
}

#stage .card:nth-of-type(6) {
  -webkit-transform: translate3d(24.875em, 0.625em, 24.125em) rotate3d(3, -1, -2, 84deg);
          transform: translate3d(24.875em, 0.625em, 24.125em) rotate3d(3, -1, -2, 84deg);
}

#stage .card:nth-of-type(7) {
  -webkit-transform: translate3d(-65.625em, 6.875em, -8.375em) rotate3d(-4, 2, -4, 62deg);
          transform: translate3d(-65.625em, 6.875em, -8.375em) rotate3d(-4, 2, -4, 62deg);
}

#stage .card:nth-of-type(8) {
  -webkit-transform: translate3d(4.125em, 7.875em, -45.125em) rotate3d(-3, -1, -4, 40deg);
          transform: translate3d(4.125em, 7.875em, -45.125em) rotate3d(-3, -1, -4, 40deg);
}

#stage .card:nth-of-type(9) {
  -webkit-transform: translate3d(-1.875em, -6.625em, 25.375em) rotate3d(1, 0, 2, 276deg);
          transform: translate3d(-1.875em, -6.625em, 25.375em) rotate3d(1, 0, 2, 276deg);
}

#stage .card:nth-of-type(10) {
  -webkit-transform: translate3d(-42.875em, 11.625em, -59.375em) rotate3d(-4, 2, 0, 30deg);
          transform: translate3d(-42.875em, 11.625em, -59.375em) rotate3d(-4, 2, 0, 30deg);
}

#stage .card:nth-of-type(11) {
  -webkit-transform: translate3d(41.375em, -4.625em, 12.125em) rotate3d(1, 1, 0, 184deg);
          transform: translate3d(41.375em, -4.625em, 12.125em) rotate3d(1, 1, 0, 184deg);
}

#stage .card:nth-of-type(12) {
  -webkit-transform: translate3d(-98.625em, -5.625em, -25.375em) rotate3d(2, -4, 3, 190deg);
          transform: translate3d(-98.625em, -5.625em, -25.375em) rotate3d(2, -4, 3, 190deg);
}

#stage .card:nth-of-type(13) {
  -webkit-transform: translate3d(-36.125em, 9.625em, -75.875em) rotate3d(3, 0, 3, 321deg);
          transform: translate3d(-36.125em, 9.625em, -75.875em) rotate3d(3, 0, 3, 321deg);
}

#stage .card:nth-of-type(14) {
  -webkit-transform: translate3d(23.625em, 10.375em, -130.875em) rotate3d(1, -1, -1, 334deg);
          transform: translate3d(23.625em, 10.375em, -130.875em) rotate3d(1, -1, -1, 334deg);
}

#stage .card:nth-of-type(15) {
  -webkit-transform: translate3d(-48.875em, 5.125em, 36.625em) rotate3d(3, -2, 0, 14deg);
          transform: translate3d(-48.875em, 5.125em, 36.625em) rotate3d(3, -2, 0, 14deg);
}

#stage .card:nth-of-type(16) {
  -webkit-transform: translate3d(-45.125em, -7.875em, -107.375em) rotate3d(-4, -4, 3, 199deg);
          transform: translate3d(-45.125em, -7.875em, -107.375em) rotate3d(-4, -4, 3, 199deg);
}

#stage .card:nth-of-type(17) {
  -webkit-transform: translate3d(-83.125em, 3.875em, -28.125em) rotate3d(2, 2, 0, 208deg);
          transform: translate3d(-83.125em, 3.875em, -28.125em) rotate3d(2, 2, 0, 208deg);
}

#stage .card:nth-of-type(18) {
  -webkit-transform: translate3d(-17.625em, 0.625em, 0.125em) rotate3d(3, 2, -3, 219deg);
          transform: translate3d(-17.625em, 0.625em, 0.125em) rotate3d(3, 2, -3, 219deg);
}

#stage .card:nth-of-type(19) {
  -webkit-transform: translate3d(-13.375em, -4.875em, -55.125em) rotate3d(0, -3, 1, 267deg);
          transform: translate3d(-13.375em, -4.875em, -55.125em) rotate3d(0, -3, 1, 267deg);
}

#stage .card:nth-of-type(20) {
  -webkit-transform: translate3d(-130.875em, 10.875em, -66.125em) rotate3d(-1, 2, 0, 285deg);
          transform: translate3d(-130.875em, 10.875em, -66.125em) rotate3d(-1, 2, 0, 285deg);
}

#stage .card:nth-of-type(21) {
  -webkit-transform: translate3d(-95.625em, 4.625em, -54.125em) rotate3d(2, -4, -4, 44deg);
          transform: translate3d(-95.625em, 4.625em, -54.125em) rotate3d(2, -4, -4, 44deg);
}

#stage .card:nth-of-type(22) {
  -webkit-transform: translate3d(-150.375em, 7.375em, -16.375em) rotate3d(2, 1, -2, 241deg);
          transform: translate3d(-150.375em, 7.375em, -16.375em) rotate3d(2, 1, -2, 241deg);
}

#stage .card:nth-of-type(23) {
  -webkit-transform: translate3d(-144.375em, 13.875em, -117.625em) rotate3d(0, 2, 2, 35deg);
          transform: translate3d(-144.375em, 13.875em, -117.625em) rotate3d(0, 2, 2, 35deg);
}

#stage .card:nth-of-type(24) {
  -webkit-transform: translate3d(-56.125em, -5.625em, 38.625em) rotate3d(-4, 3, 2, 189deg);
          transform: translate3d(-56.125em, -5.625em, 38.625em) rotate3d(-4, 3, 2, 189deg);
}

#stage .card:nth-of-type(25) {
  -webkit-transform: translate3d(30.125em, 1.625em, -63.375em) rotate3d(-4, 2, 3, 261deg);
          transform: translate3d(30.125em, 1.625em, -63.375em) rotate3d(-4, 2, 3, 261deg);
}

#stage .card:nth-of-type(26) {
  -webkit-transform: translate3d(-94.875em, -6.875em, -72.375em) rotate3d(-1, 3, 1, 129deg);
          transform: translate3d(-94.875em, -6.875em, -72.375em) rotate3d(-1, 3, 1, 129deg);
}

#stage .card:nth-of-type(27) {
  -webkit-transform: translate3d(0.875em, 2.625em, 25.625em) rotate3d(1, -4, -2, 353deg);
          transform: translate3d(0.875em, 2.625em, 25.625em) rotate3d(1, -4, -2, 353deg);
}

#stage .card:nth-of-type(28) {
  -webkit-transform: translate3d(-2.625em, 8.125em, -118.125em) rotate3d(-4, -4, 3, 81deg);
          transform: translate3d(-2.625em, 8.125em, -118.125em) rotate3d(-4, -4, 3, 81deg);
}

#stage .card:nth-of-type(29) {
  -webkit-transform: translate3d(-78.875em, 8.625em, -25.875em) rotate3d(-2, -3, -4, 56deg);
          transform: translate3d(-78.875em, 8.625em, -25.875em) rotate3d(-2, -3, -4, 56deg);
}

#stage .card:nth-of-type(30) {
  -webkit-transform: translate3d(-42.375em, 13.875em, -44.875em) rotate3d(3, 1, -2, 255deg);
          transform: translate3d(-42.375em, 13.875em, -44.875em) rotate3d(3, 1, -2, 255deg);
}

#stage .card:nth-of-type(31) {
  -webkit-transform: translate3d(-56.375em, 14.375em, -50.875em) rotate3d(0, -4, -2, 336deg);
          transform: translate3d(-56.375em, 14.375em, -50.875em.........完整代码请登录后点击上方下载按钮下载查看