css实现文字三维空间变换动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现文字三维空间变换动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">


  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&amp;display=swap'>
  
<style>
body {
  background: #BF3979;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Roboto Mono", monospace;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
  perspective: 600px;
  color: #fff;
}

div {
  transform-style: preserve-3d;
}

.camera.-y {
  -webkit-animation: rotateY 20000ms linear infinite;
          animation: rotateY 20000ms linear infinite;
}
.camera.-z {
  -webkit-animation: rotateZ 15000ms infinite alternate;
          animation: rotateZ 15000ms infinite alternate;
}

.move {
  -webkit-animation: move 12000ms infinite alternate;
          animation: move 12000ms infinite alternate;
}

.star:nth-child(1) {
  transform: translate3d(5.5px, 327.5px, -202.25px) rotateY(111deg);
}
.star:nth-child(1)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1278ms -1395ms infinite;
          animation: code 1278ms -1395ms infinite;
}
.star:nth-child(2) {
  transform: translate3d(-20.5px, 82.25px, 190px) rotateY(259deg);
}
.star:nth-child(2)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1661ms -982ms infinite;
          animation: code 1661ms -982ms infinite;
}
.star:nth-child(3) {
  transform: translate3d(69px, 35.25px, 48px) rotateY(21deg);
}
.star:nth-child(3)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1760ms -1588ms infinite;
          animation: code 1760ms -1588ms infinite;
}
.star:nth-child(4) {
  transform: translate3d(-167px, 63.75px, -89.5px) rotateY(50deg);
}
.star:nth-child(4)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1459ms -1707ms infinite;
          animation: code 1459ms -1707ms infinite;
}
.star:nth-child(5) {
  transform: translate3d(-93px, -94.5px, -171.25px) rotateY(249deg);
}
.star:nth-child(5)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1181ms -675ms infinite;
          animation: code 1181ms -675ms infinite;
}
.star:nth-child(6) {
  transform: translate3d(228.75px, -141.5px, 151.25px) rotateY(353deg);
}
.star:nth-child(6)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1611ms -36ms infinite;
          animation: code 1611ms -36ms infinite;
}
.star:nth-child(7) {
  transform: translate3d(-353.75px, 53.25px, 11px) rotateY(56deg);
}
.star:nth-child(7)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1289ms -1769ms infinite;
          animation: code 1289ms -1769ms infinite;
}
.star:nth-child(8) {
  transform: translate3d(-34px, 209.75px, 87px) rotateY(317deg);
}
.star:nth-child(8)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1188ms -1812ms infinite;
          animation: code 1188ms -1812ms infinite;
}
.star:nth-child(9) {
  transform: translate3d(-281.75px, -50.75px, -42.5px) rotateY(348deg);
}
.star:nth-child(9)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1521ms -1738ms infinite;
          animation: code 1521ms -1738ms infinite;
}
.star:nth-child(10) {
  transform: translate3d(-209.5px, 103.75px, -268.5px) rotateY(358deg);
}
.star:nth-child(10)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1859ms -1178ms infinite;
          animation: code 1859ms -1178ms infinite;
}
.star:nth-child(11) {
  transform: translate3d(-87.75px, -111.75px, 63.5px) rotateY(107deg);
}
.star:nth-child(11)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1301ms -1517ms infinite;
          animation: code 1301ms -1517ms infinite;
}
.star:nth-child(12) {
  transform: translate3d(-65.25px, 173.75px, -2px) rotateY(59deg);
}
.star:nth-child(12)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1176ms -1293ms infinite;
          animation: code 1176ms -1293ms infinite;
}
.star:nth-child(13) {
  transform: translate3d(51.25px, -12.25px, -172.5px) rotateY(290deg);
}
.star:nth-child(13)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1317ms -1999ms infinite;
          animation: code 1317ms -1999ms infinite;
}
.star:nth-child(14) {
  transform: translate3d(-21.25px, 49px, 48.75px) rotateY(340deg);
}
.star:nth-child(14)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1535ms -1061ms infinite;
          animation: code 1535ms -1061ms infinite;
}
.star:nth-child(15) {
  transform: translate3d(259.5px, -141.25px, 149px) rotateY(291deg);
}
.star:nth-child(15)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1944ms -1482ms infinite;
          animation: code 1944ms -1482ms infinite;
}
.star:nth-child(16) {
  transform: translate3d(49px, 188px, -36.5px) rotateY(354deg);
}
.star:nth-child(16)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1561ms -874ms infinite;
          animation: code 1561ms -874ms infinite;
}
.star:nth-child(17) {
  transform: translate3d(-121.75px, 132.75px, -161.25px) rotateY(60deg);
}
.star:nth-child(17)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1934ms -1557ms infinite;
          animation: code 1934ms -1557ms infinite;
}
.star:nth-child(18) {
  transform: translate3d(147.75px, 94.75px, 119.5px) rotateY(148deg);
}
.star:nth-child(18)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1232ms -1559ms infinite;
          animation: code 1232ms -1559ms infinite;
}
.star:nth-child(19) {
  transform: translate3d(-81px, -57.5px, -18.75px) rotateY(11deg);
}
.star:nth-child(19)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1151ms -1707ms infinite;
          animation: code 1151ms -1707ms infinite;
}
.star:nth-child(20) {
  transform: translate3d(-263.25px, 8.75px, -94.5px) rotateY(138deg);
}
.star:nth-child(20)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1458ms -1358ms infinite;
          animation: code 1458ms -1358ms infinite;
}
.star:nth-child(21) {
  transform: translate3d(-115px, -0.75px, -204.75px) rotateY(54deg);
}
.star:nth-child(21)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1132ms -421ms infinite;
          animation: code 1132ms -421ms infinite;
}
.star:nth-child(22) {
  transform: translate3d(124px, -260px, -142px) rotateY(15deg);
}
.star:nth-child(22)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1651ms -720ms infinite;
          animation: code 1651ms -720ms infinite;
}
.star:nth-child(23) {
  transform: translate3d(18.5px, -76.25px, -92.5px) rotateY(46deg);
}
.star:nth-child(23)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1047ms -151ms infinite;
          animation: code 1047ms -151ms infinite;
}
.star:nth-child(24) {
  transform: translate3d(-230.25px, 154px, 27px) rotateY(226deg);
}
.star:nth-child(24)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1873ms -1565ms infinite;
          animation: code 1873ms -1565ms infinite;
}
.star:nth-child(25) {
  transform: translate3d(212.25px, -139.5px, 16.5px) rotateY(285deg);
}
.star:nth-child(25)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1097ms -949ms infinite;
          animation: code 1097ms -949ms infinite;
}
.star:nth-child(26) {
  transform: translate3d(-115.75px, -28.5px, 2px) rotateY(47deg);
}
.star:nth-child(26)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1293ms -1002ms infinite;
          animation: code 1293ms -1002ms infinite;
}
.star:nth-child(27) {
  transform: translate3d(-176.25px, -88.75px, 54.25px) rotateY(256deg);
}
.star:nth-child(27)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1947ms -762ms infinite;
          animation: code 1947ms -762ms infinite;
}
.star:nth-child(28) {
  transform: translate3d(26.25px, -26.5px, -204.5px) rotateY(123deg);
}
.star:nth-child(28)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1048ms -773ms infinite;
          animation: code 1048ms -773ms infinite;
}
.star:nth-child(29) {
  transform: translate3d(101px, -33px, -172.75px) rotateY(99deg);
}
.star:nth-child(29)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1156ms -1277ms infinite;
          animation: code 1156ms -1277ms infinite;
}
.star:nth-child(30) {
  transform: translate3d(159px, -179px, -20.5px) rotateY(91deg);
}
.star:nth-child(30)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1135ms -1392ms infinite;
          animation: code 1135ms -1392ms infinite;
}
.star:nth-child(31) {
  transform: translate3d(-236.25px, -255.5px, 114.5px) rotateY(46deg);
}
.star:nth-child(31)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1071ms -1342ms infinite;
          animation: code 1071ms -1342ms infinite;
}
.star:nth-child(32) {
  transform: translate3d(77.25px, -58.25px, -353px) rotateY(19deg);
}
.star:nth-child(32)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1317ms -1424ms infinite;
          animation: code 1317ms -1424ms infinite;
}
.star:nth-child(33) {
  transform: translate3d(57.5px, -72.75px, 64.25px) rotateY(148deg);
}
.star:nth-child(33)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1748ms -862ms infinite;
          animation: code 1748ms -862ms infinite;
}
.star:nth-child(34) {
  transform: translate3d(53px, 60.25px, -70.25px) rotateY(121deg);
}
.star:nth-child(34)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1291ms -1595ms infinite;
          animation: code 1291ms -1595ms infinite;
}
.star:nth-child(35) {
  transform: translate3d(111px, 134.5px, 14.25px) rotateY(137deg);
}
.star:nth-child(35)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1827ms -1884ms infinite;
          animation: code 1827ms -1884ms infinite;
}
.star:nth-child(36) {
  transform: translate3d(-352.75px, 100px, -189.75px) rotateY(179deg);
}
.star:nth-child(36)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1362ms -47ms infinite;
          animation: code 1362ms -47ms infinite;
}
.star:nth-child(37) {
  transform: translate3d(20px, 143.75px, 97.75px) rotateY(76deg);
}
.star:nth-child(37)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1323ms -1888ms infinite;
          animation: code 1323ms -1888ms infinite;
}
.star:nth-child(38) {
  transform: translate3d(87.25px, -145.75px, 116.5px) rotateY(106deg);
}
.star:nth-child(38)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1338ms -1428ms infinite;
          animation: code 1338ms -1428ms infinite;
}
.star:nth-child(39) {
  transform: translate3d(-226.25px, -195.25px, -149.25px) rotateY(250deg);
}
.star:nth-child(39)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1666ms -251ms infinite;
          animation: code 1666ms -251ms infinite;
}
.star:nth-child(40) {
  transform: translate3d(-11.75px, -24.5px, -150px) rotateY(123deg);
}
.star:nth-child(40)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1847ms -1699ms infinite;
          animation: code 1847ms -1699ms infinite;
}
.star:nth-child(41) {
  transform: translate3d(162px, 65px, -87.25px) rotateY(229deg);
}
.star:nth-child(41)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1079ms -905ms infinite;
          animation: code 1079ms -905ms infinite;
}
.star:nth-child(42) {
  transform: translate3d(-20px, 132.25px, -50px) rotateY(89deg);
}
.star:nth-child(42)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1847ms -266ms infinite;
          animation: code 1847ms -266ms infinite;
}
.star:nth-child(43) {
  transform: translate3d(-31.75px, 147.75px, -28.5px) rotateY(236deg);
}
.star:nth-child(43)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1487ms -1868ms infinite;
          animation: code 1487ms -1868ms infinite;
}
.star:nth-child(44) {
  transform: translate3d(-56px, -105.75px, 218px) rotateY(217deg);
}
.star:nth-child(44)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1314ms -1969ms infinite;
          animation: code 1314ms -1969ms infinite;
}
.star:nth-child(45) {
  transform: translate3d(109.25px, -12.25px, 125.25px) rotateY(243deg);
}
.star:nth-child(45)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1062ms -229ms infinite;
          animation: code 1062ms -229ms infinite;
}
.star:nth-child(46) {
  transform: translate3d(154px, 218px, -114px) rotateY(298deg);
}
.star:nth-child(46)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1196ms -1357ms infinite;
          animation: code 1196ms -1357ms infinite;
}
.star:nth-child(47) {
  transform: translate3d(-40px, 6.25px, -158.25px) rotateY(200deg);
}
.star:nth-child(47)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1919ms -269ms infinite;
          animation: code 1919ms -269ms infinite;
}
.star:nth-child(48) {
  transform: translate3d(32.5px, 166px, 36.5px) rotateY(161deg);
}
.star:nth-child(48)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1897ms -663ms infinite;
          animation: code 1897ms -663ms infinite;
}
.star:nth-child(49) {
  transform: translate3d(134.25px, -189.5px, 216.25px) rotateY(317deg);
}
.star:nth-child(49)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1126ms -1436ms infinite;
          animation: code 1126ms -1436ms infinite;
}
.star:nth-child(50) {
  transform: translate3d(131.75px, 31.5px, 128px) rotateY(64deg);
}
.star:nth-child(50)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1035ms -1107ms infinite;
          animation: code 1035ms -1107ms infinite;
}
.star:nth-child(51) {
  transform: translate3d(-134.75px, 9.25px, -274px) rotateY(42deg);
}
.star:nth-child(51)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1265ms -627ms infinite;
          animation: code 1265ms -627ms infinite;
}
.star:nth-child(52) {
  transform: translate3d(183.25px, -295.75px, 47px) rotateY(305deg);
}
.star:nth-child(52)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1661ms -1818ms infinite;
          animation: code 1661ms -1818ms infinite;
}
.star:nth-child(53) {
  transform: translate3d(-19.25px, 98.75px, 79.5px) rotateY(275deg);
}
.star:nth-child(53)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1447ms -50ms infinite;
          animation: code 1447ms -50ms infinite;
}
.star:nth-child(54) {
  transform: translate3d(-39.5px, -82.5px, -107.5px) rotateY(289deg);
}
.star:nth-child(54)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1770ms -1936ms infinite;
          animation: code 1770ms -1936ms infinite;
}
.star:nth-child(55) {
  transform: translate3d(-172px, 13.5px, 86.5px) rotateY(135deg);
}
.star:nth-child(55)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1760ms -1074ms infinite;
          animation: code 1760ms -1074ms infinite;
}
.star:nth-child(56) {
  transform: translate3d(136.5px, 90.75px, -183px) rotateY(250deg);
}
.star:nth-child(56)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1156ms -495ms infinite;
          animation: code 1156ms -495ms infinite;
}
.star:nth-child(57) {
  transform: translate3d(-40.25px, -51.5px, 11.5px) rotateY(292deg);
}
.star:nth-child(57)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1464ms -217ms infinite;
          animation: code 1464ms -217ms infinite;
}
.star:nth-child(58) {
  transform: translate3d(-121px, -281px, -112.75px) rotateY(253deg);
}
.star:nth-child(58)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1936ms -1353ms infinite;
          animation: code 1936ms -1353ms infinite;
}
.star:nth-child(59) {
  transform: translate3d(-176.25px, 47px, 187.5px) rotateY(51deg);
}
.star:nth-child(59)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1144ms -418ms infinite;
          animation: code 1144ms -418ms infinite;
}
.star:nth-child(60) {
  transform: translate3d(41.25px, 51px, 178.75px) rotateY(65deg);
}
.star:nth-child(60)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1109ms -450ms infinite;
          animation: code 1109ms -450ms infinite;
}
.star:nth-child(61) {
  transform: translate3d(-103.5px, 155.5px, -12.75px) rotateY(237deg);
}
.star:nth-child(61)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1222ms -971ms infinite;
          animation: code 1222ms -971ms infinite;
}
.star:nth-child(62) {
  transform: translate3d(50.25px, -49px, 125.25px) rotateY(138deg);
}
.star:nth-child(62)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1587ms -216ms infinite;
          animation: code 1587ms -216ms infinite;
}
.star:nth-child(63) {
  transform: translate3d(-105.75px, -34.25px, 171.75px) rotateY(117deg);
}
.star:nth-child(63)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1144ms -1546ms infinite;
          animation: code 1144ms -1546ms infinite;
}
.star:nth-child(64) {
  transform: translate3d(-81.25px, -168.75px, -93.75px) rotateY(18deg);
}
.star:nth-child(64)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1398ms -543ms infinite;
          animation: code 1398ms -543ms infinite;
}
.star:nth-child(65) {
  transform: translate3d(-85.75px, -85.75px, 46px) rotateY(291deg);
}
.star:nth-child(65)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1464ms -947ms infinite;
          animation: code 1464ms -947ms infinite;
}
.star:nth-child(66) {
  transform: translate3d(-38px, -6.75px, -102.75px) rotateY(67deg);
}
.star:nth-child(66)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1681ms -876ms infinite;
          animation: code 1681ms -876ms infinite;
}
.star:nth-child(67) {
  transform: translate3d(271px, 34.5px, -117px) rotateY(192deg);
}
.star:nth-child(67)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1309ms -312ms infinite;
          animation: code 1309ms -312ms infinite;
}
.star:nth-child(68) {
  transform: translate3d(165.25px, -184.75px, 223.25px) rotateY(90deg);
}
.star:nth-child(68)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1986ms -1308ms infinite;
          animation: code 1986ms -1308ms infinite;
}
.star:nth-child(69) {
  transform: translate3d(44.75px, 119.25px, -4.75px) rotateY(160deg);
}
.star:nth-child(69)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1193ms -1203ms infinite;
          animation: code 1193ms -1203ms infinite;
}
.star:nth-child(70) {
  transform: translate3d(122.75px, 65.75px, -0.75px) rotateY(94deg);
}
.star:nth-child(70)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1117ms -1297ms infinite;
          animation: code 1117ms -1297ms infinite;
}
.star:nth-child(71) {
  transform: translate3d(-286px, 16.25px, -78px) rotateY(223deg);
}
.star:nth-child(71)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1031ms -1390ms infinite;
          animation: code 1031ms -1390ms infinite;
}
.star:nth-child(72) {
  transform: translate3d(18.25px, -107px, 59.5px) rotateY(136deg);
}
.star:nth-child(72)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1129ms -328ms infinite;
          animation: code 1129ms -328ms infinite;
}
.star:nth-child(73) {
  transform: translate3d(227.75px, 3.25px, -62.25px) rotateY(11deg);
}
.star:nth-child(73)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1097ms -765ms infinite;
          animation: code 1097ms -765ms infinite;
}
.star:nth-child(74) {
  transform: translate3d(20px, 98px, 57px) rotateY(230deg);
}
.star:nth-child(74)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1279ms -1534ms infinite;
          animation: code 1279ms -1534ms infinite;
}
.star:nth-child(75) {
  transform: translate3d(28.75px, 205.5px, 337px) rotateY(309deg);
}
.star:nth-child(75)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1823ms -1479ms infinite;
          animation: code 1823ms -1479ms infinite;
}
.star:nth-child(76) {
  transform: translate3d(-257.75px, -186.25px, 251.75px) rotateY(322deg);
}
.star:nth-child(76)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1886ms -525ms infinite;
          animation: code 1886ms -525ms infinite;
}
.star:nth-child(77) {
  transform: translate3d(-97px, -115.25px, -106.75px) rotateY(246deg);
}
.star:nth-child(77)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1639ms -1655ms infinite;
          animation: code 1639ms -1655ms infinite;
}
.star:nth-child(78) {
  transform: translate3d(-62.75px, -5.25px, 26.5px) rotateY(181deg);
}
.star:nth-child(78)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1626ms -1312ms infinite;
          animation: code 1626ms -1312ms infinite;
}
.star:nth-child(79) {
  transform: translate3d(-64.25px, 46px, -41.5px) rotateY(55deg);
}
.star:nth-child(79)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1042ms -576ms infinite;
          animation: code 1042ms -576ms infinite;
}
.star:nth-child(80) {
  transform: translate3d(-159.75px, -56.5px, 206.25px) rotateY(27deg);
}
.star:nth-child(80)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1449ms -1917ms infinite;
          animation: code 1449ms -1917ms infinite;
}
.star:nth-child(81) {
  transform: translate3d(-127.25px, 22px, -69.5px) rotateY(263deg);
}
.star:nth-child(81)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1236ms -1603ms infinite;
          animation: code 1236ms -1603ms infinite;
}
.star:nth-child(82) {
  transform: translate3d(38.25px, -216px, 132.5px) rotateY(295deg);
}
.star:nth-child(82)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1718ms -1936ms infinite;
          animation: code 1718ms -1936ms infinite;
}
.star:nth-child(83) {
  transform: translate3d(50.75px, 67px, -231.5px) rotateY(37deg);
}
.star:nth-child(83)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1610ms -808ms infinite;
          animation: code 1610ms -808ms infinite;
}
.star:nth-child(84) {
  transform: translate3d(-195.25px, 156.5px, 109.25px) rotateY(321deg);
}
.star:nth-child(84)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1057ms -484ms infinite;
          animation: code 1057ms -484ms infinite;
}
.star:nth-child(85) {
  transform: translate3d(44.75px, -8.5px, -17.5px) rotateY(322deg);
}
.star:nth-child(85)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1639ms -118ms infinite;
          animation: code 1639ms -118ms infinite;
}
.star:nth-child(86) {
  transform: translate3d(9.5px, 105.5px, 137.75px) rotateY(228deg);
}
.star:nth-child(86)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1587ms -1357ms infinite;
          animation: code 1587ms -1357ms infinite;
}
.star:nth-child(87) {
  transform: translate3d(-80.75px, 115px, 4.25px) rotateY(99deg);
}
.star:nth-child(87)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1189ms -1106ms infinite;
          animation: code 1189ms -1106ms infinite;
}
.star:nth-child(88) {
  transform: translate3d(289px, -203.5px, 52.5px) rotateY(171deg);
}
.star:nth-child(88)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1831ms -1118ms infinite;
          animation: code 1831ms -1118ms infinite;
}
.star:nth-child(89) {
  transform: translate3d(-219px, 137.5px, 124.25px) rotateY(16deg);
}
.star:nth-child(89)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1212ms -1150ms infinite;
          animation: code 1212ms -1150ms infinite;
}
.star:nth-child(90) {
  transform: translate3d(-29.75px, 195.75px, 223.25px) rotateY(300deg);
}
.star:nth-child(90)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1377ms -1620ms infinite;
          animation: code 1377ms -1620ms infinite;
}
.star:nth-child(91) {
  transform: translate3d(38.25px, 15px, 345.25px) rotateY(320deg);
}
.star:nth-child(91)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1202ms -404ms infinite;
          animation: code 1202ms -404ms infinite;
}
.star:nth-child(92) {
  transform: translate3d(233.75px, -76.25px, -6.25px) rotateY(9deg);
}
.star:nth-child(92)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1484ms -1836ms infinite;
          animation: code 1484ms -1836ms infinite;
}
.star:nth-child(93) {
  transform: translate3d(46.75px, 4.75px, -2.25px) rotateY(18deg);
}
.star:nth-child(93)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1010ms -1339ms infinite;
          animation: code 1010ms -1339ms infinite;
}
.star:nth-child(94) {
  transform: translate3d(8.25px, -162px, -161.75px) rotateY(328deg);
}
.star:nth-child(94)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1072ms -1547ms infinite;
          animation: code 1072ms -1547ms infinite;
}
.star:nth-child(95) {
  transform: translate3d(252.75px, -36.5px, 15.75px) rotateY(204deg);
}
.star:nth-child(95)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1010ms -1184ms infinite;
          animation: code 1010ms -1184ms infinite;
}
.star:nth-child(96) {
  transform: translate3d(78.5px, -58.25px, 322.75px) rotateY(27deg);
}
.star:nth-child(96)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1995ms -1748ms infinite;
          animation: code 1995ms -1748ms infinite;
}
.star:nth-child(97) {
  transform: translate3d(126px, 21.5px, 292.25px) rotateY(323deg);
}
.star:nth-child(97)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1183ms -1270ms infinite;
          animation: code 1183ms -1270ms infinite;
}
.star:nth-child(98) {
  transform: translate3d(72.5px, 131.5px, 238.5px) rotateY(359deg);
}
.star:nth-child(98)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1291ms -1648ms infinite;
          animation: code 1291ms -1648ms infinite;
}
.star:nth-child(99) {
  transform: translate3d(79.5px, -37px, 29px) rotateY(336deg);
}
.star:nth-child(99)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1588ms -1464ms infinite;
          animation: code 1588ms -1464ms infinite;
}
.star:nth-child(100) {
  transform: translate3d(190.5px, -168.25px, -245.25px) rotateY(232deg);
}
.star:nth-child(100)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1731ms -472ms infinite;
          animation: code 1731ms -472ms infinite;
}
.star:nth-child(101) {
  transform: translate3d(46px, -187px, 24.5px) rotateY(141deg);
}
.star:nth-child(101)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1311ms -137ms infinite;
          animation: code 1311ms -137ms infinite;
}
.star:nth-child(102) {
  transform: translate3d(10.25px, -45.75px, 163.5px) rotateY(24deg);
}
.star:nth-child(102)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1848ms -1265ms infinite;
          animation: code 1848ms -1265ms infinite;
}
.star:nth-child(103) {
  transform: translate3d(63px, 56.5px, -19.5px) rotateY(270deg);
}
.star:nth-child(103)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1625ms -894ms infinite;
          animation: code 1625ms -894ms infinite;
}
.star:nth-child(104) {
  transform: translate3d(-115px, 111.25px, -79px) rotateY(74deg);
}
.star:nth-child(104)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1956ms -521ms infinite;
          animation: code 1956ms -521ms infinite;
}
.star:nth-child(105) {
  transform: translate3d(110.75px, -58.25px, 152.5px) rotateY(102deg);
}
.star:nth-child(105)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1316ms -1172ms infinite;
          animation: code 1316ms -1172ms infinite;
}
.star:nth-child(106) {
  transform: translate3d(-19.75px, 9.5px, 293.75px) rotateY(123deg);
}
.star:nth-child(106)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1456ms -740ms infinite;
          animation: code 1456ms -740ms infinite;
}
.star:nth-child(107) {
  transform: translate3d(-116px, -169.75px, 0px) rotateY(186deg);
}
.star:nth-child(107)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1621ms -465ms infinite;
          animation: code 1621ms -465ms infinite;
}
.star:nth-child(108) {
  transform: translate3d(-33.25px, -138.5px, -176.75px) rotateY(49deg);
}
.star:nth-child(108)::before {
  content: "L";
  position: absolute;
  -webkit-animation: code 1430ms -1958ms infinite;
          animation: code 1430ms -1958ms infinite;
}
.star:nth-child(109) {
  transform: translate3d(119.75px, -36.5px, -122.25px) rotateY(243de.........完整代码请登录后点击上方下载按钮下载查看