添加对Edge浏览器的CSS3星型滚动支持

Question

我的明星滚动css3在Edge浏览器上无法正常工作。

https://jsfiddle.net/8o4nvgLr/

HTML：

<div class="stars">
</div>

CSS：

html, body {
  height: 100%;
  perspective: 350px;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: 'Share Tech', sans-serif;
}

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  box-shadow: 693px -83px #f0f0f0, 684px -218px white, -1391px -478px #dedede, 745px 11px #c2c2c2, 756px 284px #c4c4c4, -599px -394px #c4c4c4, 329px 35px #d9d9d9, 1082px 337px #c4c4c4, 611px -282px #dbdbdb, -1429px -39px #d4d4d4, -1174px 319px #fafafa, 82px -53px #cfcfcf, -1248px 17px #f7f7f7, 819px -307px #c4c4c4, -373px -162px #c4c4c4, -367px -44px #cfcfcf, 48px 303px #d6d6d6, -560px -323px #f7f7f7, 1002px 194px #e3e3e3, -1040px 453px #d1d1d1, 1009px -238px #cfcfcf, -518px 169px whitesmoke, -893px 8px #c9c9c9, -1464px 129px #e6e6e6, -1322px -470px #c7c7c7, 961px -203px #c4c4c4, -1249px -396px #e6e6e6, -1166px 143px #f7f7f7, 260px 231px #ebebeb, -382px -54px #dbdbdb, 1320px 110px #cfcfcf, -76px 333px #d4d4d4, 1015px 186px #d6d6d6, -1192px -31px #d1d1d1, 675px 450px #e6e6e6, 242px 252px #c9c9c9, 157px 272px whitesmoke, 905px -191px #c4c4c4, -151px 446px #f7f7f7, -1159px 439px #fafafa, 972px 423px #e8e8e8, -1423px -466px #d4d4d4, 440px 191px #f0f0f0, -433px 87px #c7c7c7, 1273px 193px #c4c4c4, -1405px 205px #dbdbdb, -673px -349px #c2c2c2, -1106px 468px #c4c4c4, -1408px -32px #d6d6d6, -448px 109px white, 332px 190px #f0f0f0, -1255px -405px #f2f2f2, -1217px 213px #d6d6d6, 771px 129px #cfcfcf, -692px 94px #f2f2f2, -59px -45px #c2c2c2, 1345px -59px #e8e8e8, 1476px 119px #dbdbdb, -439px -304px #ededed, -166px 1px #d9d9d9, 836px 391px #c2c2c2, -766px -215px #c4c4c4, 1217px 195px #fcfcfc, 334px -92px #dedede, -829px 124px #e0e0e0, -1461px 337px #f2f2f2, -900px 42px #cccccc, -800px -168px #e8e8e8, -727px -129px #c7c7c7, -858px -105px #c7c7c7, 797px 170px #e3e3e3, 989px 398px #cfcfcf, 495px 95px #d6d6d6, 819px -299px #c2c2c2, 1401px -43px #f0f0f0, 1410px -389px #ebebeb, -624px 86px #e0e0e0, 1178px -333px #e3e3e3, -1424px -165px #e0e0e0, -178px 133px #e6e6e6, -75px 10px #e8e8e8, 1047px 458px #d4d4d4, -347px 228px #f7f7f7, 1096px 176px #f0f0f0, -751px -98px #cccccc, 1499px 248px #c7c7c7, -554px -84px #e3e3e3, -64px 178px #f0f0f0, -690px -249px #d4d4d4, -64px 232px whitesmoke, 1119px 296px #d1d1d1, 339px -325px #c7c7c7, 42px 241px #f0f0f0, 1408px 361px #ededed, 1235px -416px #f0f0f0, -732px 75px #e6e6e6, 318px -82px #cccccc, 919px 477px #cfcfcf, 76px 41px #f7f7f7, -50px -258px #d1d1d1, -1139px 93px #dedede, 1241px -454px #c2c2c2, 1264px 160px #c2c2c2, -597px 434px #d1d1d1, 1085px 473px #e3e3e3, -629px -457px #ebebeb, -381px -354px #f2f2f2, 905px 226px #c9c9c9, 1114px -11px #d6d6d6, -782px 269px #dedede, -541px 113px #ebebeb, -347px 318px #e0e0e0, 863px -51px #c2c2c2, 193px -8px #dbdbdb, -1429px -300px #c2c2c2, 1020px -105px #cfcfcf, -482px -122px #c4c4c4, 487px -479px #d6d6d6, -1408px -194px #f2f2f2, 1364px -141px #e3e3e3, 1486px 471px #e8e8e8, 418px -473px #d4d4d4, -806px 55px #d1d1d1, 244px 83px #d9d9d9, 272px -74px #c9c9c9, -62px -289px #c7c7c7, -106px 388px #f0f0f0, 628px 414px #f2f2f2, 1208px 388px white, -1048px -413px whitesmoke, 976px -304px #dbdbdb, -763px -313px #fcfcfc, 1323px 455px #c7c7c7, 37px 334px whitesmoke, 98px 242px #f2f2f2, -128px -75px whitesmoke, 1338px 182px #f2f2f2, 1348px 17px #e0e0e0, -500px 360px #dedede, -1283px 87px #cfcfcf, -588px -1px #e3e3e3, 823px 175px #c4c4c4, -540px 402px #e8e8e8, -476px -97px #ededed, -1484px 132px #e8e8e8, 383px -45px #d4d4d4, 692px 428px #e0e0e0, -558px 404px white, -252px -414px #d4d4d4, 1331px -247px #c9c9c9, 1032px 86px #c2c2c2, -1333px -58px #ededed, 1248px -161px #cccccc, -1195px 241px #e6e6e6, -897px 207px #f0f0f0, -813px -387px #f2f2f2, 765px -445px #e3e3e3, 1065px -394px #d1d1d1, -1257px -202px #f0f0f0, -1398px 9px #fcfcfc, 1345px 237px #d9d9d9, -1325px 325px #d4d4d4, -597px 31px #ebebeb, 114px 142px #d4d4d4, 678px -122px #d4d4d4, 596px -305px #e6e6e6, -205px 453px #ededed, -278px 90px whitesmoke, -715px -206px #dedede, 1251px -458px whitesmoke, 1199px -356px #c2c2c2, 263px 251px #d1d1d1, -180px -439px #e8e8e8, 279px 84px #e8e8e8, -1293px 112px #ebebeb, 162px -438px #e0e0e0, -1050px -438px #e6e6e6, 243px 382px white, -1230px -462px #dedede, 162px -298px #c4c4c4, 521px -195px #d1d1d1, 715px 268px #e0e0e0, 1096px -446px #c9c9c9, 780px 474px #fafafa, 1294px -462px #c2c2c2, 1234px -426px #f2f2f2, -415px 381px #c2c2c2, 29px -121px #c2c2c2, -1143px 306px white, 247px 73px #dbdbdb, 35px -428px #d6d6d6, 628px 405px #e0e0e0, -1115px -290px #e3e3e3, 1370px 328px #e0e0e0, 453px 12px white, 303px 370px whitesmoke, 132px 322px #d1d1d1, 588px 193px #d4d4d4, 778px 422px #d6d6d6, 998px -317px #ededed, 765px 234px #cccccc, -1142px -214px #c9c9c9, 919px -400px #fafafa, 457px 12px #f2f2f2, 731px -117px #d9d9d9, -781px -163px #f0f0f0, 1232px 44px #ebebeb, -193px -49px #f7f7f7, -998px -306px #c2c2c2, 33px -221px #c2c2c2, -546px 19px #d9d9d9, 608px 273px #c2c2c2, -499px -227px #cfcfcf, 386px 220px whitesmoke, -618px 190px #e6e6e6, -1127px -435px #d4d4d4, 1257px -259px #e0e0e0, -425px 207px #fcfcfc, 1344px -183px #dedede, -1459px 124px #f2f2f2, -414px -88px #e6e6e6, 1215px 281px #c2c2c2, -729px -210px #f2f2f2, 1269px 75px #f7f7f7, 694px 322px #ebebeb, -892px 291px whitesmoke, 367px -99px #fafafa, 619px -348px #dedede, -571px 389px #fafafa, 727px 391px #dedede, -1454px -206px #fafafa, -810px -24px white, 716px -436px #d4d4d4, 1034px -53px #f0f0f0, 381px -305px #e0e0e0, 529px -100px #d9d9d9, -1436px 41px #dbdbdb, 456px -405px #d4d4d4, 714px 147px #d6d6d6, 217px -145px #c7c7c7, -267px -418px #e3e3e3, 137px -340px whitesmoke, 373px 390px #d6d6d6, 1380px 265px #c7c7c7, -230px 328px #e6e6e6, -168px 424px #e3e3e3, 825px -253px #f0f0f0, -392px -322px #dedede, 834px -136px #c2c2c2, -794px -278px #c2c2c2, 100px 319px #e3e3e3, 29px 61px #e0e0e0, 1242px -343px #d4d4d4, -1223px -274px #fcfcfc, -1433px 420px #c9c9c9, -1242px 109px #f2f2f2, -1038px 477px #f0f0f0, -261px -290px #fafafa, -1311px 172px #c4c4c4, 652px -376px #d1d1d1, -1348px 445px #cccccc, 584px -462px #d9d9d9, 528px 124px #dedede, -620px -138px #e0e0e0, 146px 143px #f0f0f0, 847px -222px #cfcfcf, 790px 147px #ededed, -245px 106px #c2c2c2, -955px -196px #ebebeb, 443px 139px #ebebeb, 1183px -81px #c2c2c2, 1248px -293px #d6d6d6, 58px -389px #d1d1d1, 372px 215px whitesmoke, 623px 4px #fafafa, 277px -306px #c4c4c4, 39px 295px #f0f0f0, -418px 357px #f0f0f0, -177px 419px white, -455px 447px #dedede, 362px 200px #e6e6e6, -1365px -46px #d6d6d6, 620px -169px #dedede, -1143px 297px #e8e8e8, -700px -255px #fcfcfc, 142px 198px #f0f0f0, 703px -291px whitesmoke, -1366px -312px #dedede, 412px -319px #f7f7f7, -683px -141px white, -884px 102px #dbdbdb, 249px 267px #cccccc, 1071px -364px #f0f0f0, 1361px 478px #c9c9c9, -414px -41px #e8e8e8, -1296px 477px #e3e3e3, 967px 393px #e3e3e3, 219px 124px white, 1223px -392px #d9d9d9, -1250px 308px #c4c4c4, 55px 56px #cfcfcf, 434px -388px #f0f0f0, -763px -205px #d1d1d1, 1481px -424px #c4c4c4, -1344px -412px #fafafa, -688px 449px white, 1139px -70px #dedede, -1149px 316px white, 1173px -107px #d6d6d6, -870px -120px #e8e8e8, 477px -232px #c7c7c7, 1184px -129px #fcfcfc, -198px -363px #c4c4c4, 1497px 228px #e6e6e6, -129px -292px #cccccc, -1379px 242px #d1d1d1, 1489px -162px whitesmoke, -109px -20px #fcfcfc, 700px 233px #c2c2c2, -503px 474px #e6e6e6, 835px -163px #f2f2f2, -531px 25px #f2f2f2, 99px -10px #f0f0f0, -253px -269px #dedede, 57px -410px #c4c4c4, -399px -447px #d1d1d1, 1358px -384px #ebebeb, -662px -76px #d1d1d1, -116px -191px #ebebeb, -1423px -476px #d4d4d4, 1216px -97px #fafafa, 1497px -198px #e8e8e8, -1111px -474px #e3e3e3, -591px -417px #d6d6d6, -121px -423px #c7c7c7, -1455px 453px #d9d9d9, -24px 410px #d9d9d9, -1042px 447px #c2c2c2, 416px -425px #dedede, -9px 219px #e3e3e3, -424px -119px #e3e3e3, 60px 464px whitesmoke, 1105px 323px #dedede, -360px -289px #f0f0f0, 170px -51px #c7c7c7, -523px -259px #d6d6d6, -736px -72px #f2f2f2, 1056px -333px #f7f7f7, 736px 121px #c4c4c4, 516px -467px #d6d6d6, -548px 155px #fafafa;
  animation: fly 3s linear infinite;
  transform-style: preserve-3d;
}
.stars:before, .stars:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: inherit;
}
.stars:before {
  transform: translateZ(-300px);
  animation: fade1 3s linear infinite;
}
.stars:after {
  transform: translateZ(-600px);
  animation: fade2 3s linear infinite;
}

@keyframes fly {
  from {
    transform: translateZ(0px);
  }
  to {
    transform: translateZ(300px);
  }
}
@keyframes fade1 {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade2 {
  from {
    opacity: 0;
  }
  to {
    opacity: .5;
  }
}

需要进行哪些更改/添加才能使其在Edge中工作？在Chrome和Firefox中正常运行。

Answer 1

我尝试使用MS Edge和Chrome检查代码。

根据我的测试结果，我发现下面的CSS类中的 position：absolute; 引起了问题。

.stars:before, .stars:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: inherit;
   background: transparent
}

如果我们从CSS类中将其删除，则动画将开始为MS Edge工作。

修改后的代码：

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>
	<style>
	html, body {
  height: 100%;
  perspective: 350px;
  background: #000;
  color: #fff;
  overflow: hidden;
  font-family: 'Share Tech', sans-serif;
}

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  box-shadow: 693px -83px #f0f0f0, 684px -218px white, -1391px -478px #dedede, 745px 11px #c2c2c2, 756px 284px #c4c4c4, -599px -394px #c4c4c4, 329px 35px #d9d9d9, 1082px 337px #c4c4c4, 611px -282px #dbdbdb, -1429px -39px #d4d4d4, -1174px 319px #fafafa, 82px -53px #cfcfcf, -1248px 17px #f7f7f7, 819px -307px #c4c4c4, -373px -162px #c4c4c4, -367px -44px #cfcfcf, 48px 303px #d6d6d6, -560px -323px #f7f7f7, 1002px 194px #e3e3e3, -1040px 453px #d1d1d1, 1009px -238px #cfcfcf, -518px 169px whitesmoke, -893px 8px #c9c9c9, -1464px 129px #e6e6e6, -1322px -470px #c7c7c7, 961px -203px #c4c4c4, -1249px -396px #e6e6e6, -1166px 143px #f7f7f7, 260px 231px #ebebeb, -382px -54px #dbdbdb, 1320px 110px #cfcfcf, -76px 333px #d4d4d4, 1015px 186px #d6d6d6, -1192px -31px #d1d1d1, 675px 450px #e6e6e6, 242px 252px #c9c9c9, 157px 272px whitesmoke, 905px -191px #c4c4c4, -151px 446px #f7f7f7, -1159px 439px #fafafa, 972px 423px #e8e8e8, -1423px -466px #d4d4d4, 440px 191px #f0f0f0, -433px 87px #c7c7c7, 1273px 193px #c4c4c4, -1405px 205px #dbdbdb, -673px -349px #c2c2c2, -1106px 468px #c4c4c4, -1408px -32px #d6d6d6, -448px 109px white, 332px 190px #f0f0f0, -1255px -405px #f2f2f2, -1217px 213px #d6d6d6, 771px 129px #cfcfcf, -692px 94px #f2f2f2, -59px -45px #c2c2c2, 1345px -59px #e8e8e8, 1476px 119px #dbdbdb, -439px -304px #ededed, -166px 1px #d9d9d9, 836px 391px #c2c2c2, -766px -215px #c4c4c4, 1217px 195px #fcfcfc, 334px -92px #dedede, -829px 124px #e0e0e0, -1461px 337px #f2f2f2, -900px 42px #cccccc, -800px -168px #e8e8e8, -727px -129px #c7c7c7, -858px -105px #c7c7c7, 797px 170px #e3e3e3, 989px 398px #cfcfcf, 495px 95px #d6d6d6, 819px -299px #c2c2c2, 1401px -43px #f0f0f0, 1410px -389px #ebebeb, -624px 86px #e0e0e0, 1178px -333px #e3e3e3, -1424px -165px #e0e0e0, -178px 133px #e6e6e6, -75px 10px #e8e8e8, 1047px 458px #d4d4d4, -347px 228px #f7f7f7, 1096px 176px #f0f0f0, -751px -98px #cccccc, 1499px 248px #c7c7c7, -554px -84px #e3e3e3, -64px 178px #f0f0f0, -690px -249px #d4d4d4, -64px 232px whitesmoke, 1119px 296px #d1d1d1, 339px -325px #c7c7c7, 42px 241px #f0f0f0, 1408px 361px #ededed, 1235px -416px #f0f0f0, -732px 75px #e6e6e6, 318px -82px #cccccc, 919px 477px #cfcfcf, 76px 41px #f7f7f7, -50px -258px #d1d1d1, -1139px 93px #dedede, 1241px -454px #c2c2c2, 1264px 160px #c2c2c2, -597px 434px #d1d1d1, 1085px 473px #e3e3e3, -629px -457px #ebebeb, -381px -354px #f2f2f2, 905px 226px #c9c9c9, 1114px -11px #d6d6d6, -782px 269px #dedede, -541px 113px #ebebeb, -347px 318px #e0e0e0, 863px -51px #c2c2c2, 193px -8px #dbdbdb, -1429px -300px #c2c2c2, 1020px -105px #cfcfcf, -482px -122px #c4c4c4, 487px -479px #d6d6d6, -1408px -194px #f2f2f2, 1364px -141px #e3e3e3, 1486px 471px #e8e8e8, 418px -473px #d4d4d4, -806px 55px #d1d1d1, 244px 83px #d9d9d9, 272px -74px #c9c9c9, -62px -289px #c7c7c7, -106px 388px #f0f0f0, 628px 414px #f2f2f2, 1208px 388px white, -1048px -413px whitesmoke, 976px -304px #dbdbdb, -763px -313px #fcfcfc, 1323px 455px #c7c7c7, 37px 334px whitesmoke, 98px 242px #f2f2f2, -128px -75px whitesmoke, 1338px 182px #f2f2f2, 1348px 17px #e0e0e0, -500px 360px #dedede, -1283px 87px #cfcfcf, -588px -1px #e3e3e3, 823px 175px #c4c4c4, -540px 402px #e8e8e8, -476px -97px #ededed, -1484px 132px #e8e8e8, 383px -45px #d4d4d4, 692px 428px #e0e0e0, -558px 404px white, -252px -414px #d4d4d4, 1331px -247px #c9c9c9, 1032px 86px #c2c2c2, -1333px -58px #ededed, 1248px -161px #cccccc, -1195px 241px #e6e6e6, -897px 207px #f0f0f0, -813px -387px #f2f2f2, 765px -445px #e3e3e3, 1065px -394px #d1d1d1, -1257px -202px #f0f0f0, -1398px 9px #fcfcfc, 1345px 237px #d9d9d9, -1325px 325px #d4d4d4, -597px 31px #ebebeb, 114px 142px #d4d4d4, 678px -122px #d4d4d4, 596px -305px #e6e6e6, -205px 453px #ededed, -278px 90px whitesmoke, -715px -206px #dedede, 1251px -458px whitesmoke, 1199px -356px #c2c2c2, 263px 251px #d1d1d1, -180px -439px #e8e8e8, 279px 84px #e8e8e8, -1293px 112px #ebebeb, 162px -438px #e0e0e0, -1050px -438px #e6e6e6, 243px 382px white, -1230px -462px #dedede, 162px -298px #c4c4c4, 521px -195px #d1d1d1, 715px 268px #e0e0e0, 1096px -446px #c9c9c9, 780px 474px #fafafa, 1294px -462px #c2c2c2, 1234px -426px #f2f2f2, -415px 381px #c2c2c2, 29px -121px #c2c2c2, -1143px 306px white, 247px 73px #dbdbdb, 35px -428px #d6d6d6, 628px 405px #e0e0e0, -1115px -290px #e3e3e3, 1370px 328px #e0e0e0, 453px 12px white, 303px 370px whitesmoke, 132px 322px #d1d1d1, 588px 193px #d4d4d4, 778px 422px #d6d6d6, 998px -317px #ededed, 765px 234px #cccccc, -1142px -214px #c9c9c9, 919px -400px #fafafa, 457px 12px #f2f2f2, 731px -117px #d9d9d9, -781px -163px #f0f0f0, 1232px 44px #ebebeb, -193px -49px #f7f7f7, -998px -306px #c2c2c2, 33px -221px #c2c2c2, -546px 19px #d9d9d9, 608px 273px #c2c2c2, -499px -227px #cfcfcf, 386px 220px whitesmoke, -618px 190px #e6e6e6, -1127px -435px #d4d4d4, 1257px -259px #e0e0e0, -425px 207px #fcfcfc, 1344px -183px #dedede, -1459px 124px #f2f2f2, -414px -88px #e6e6e6, 1215px 281px #c2c2c2, -729px -210px #f2f2f2, 1269px 75px #f7f7f7, 694px 322px #ebebeb, -892px 291px whitesmoke, 367px -99px #fafafa, 619px -348px #dedede, -571px 389px #fafafa, 727px 391px #dedede, -1454px -206px #fafafa, -810px -24px white, 716px -436px #d4d4d4, 1034px -53px #f0f0f0, 381px -305px #e0e0e0, 529px -100px #d9d9d9, -1436px 41px #dbdbdb, 456px -405px #d4d4d4, 714px 147px #d6d6d6, 217px -145px #c7c7c7, -267px -418px #e3e3e3, 137px -340px whitesmoke, 373px 390px #d6d6d6, 1380px 265px #c7c7c7, -230px 328px #e6e6e6, -168px 424px #e3e3e3, 825px -253px #f0f0f0, -392px -322px #dedede, 834px -136px #c2c2c2, -794px -278px #c2c2c2, 100px 319px #e3e3e3, 29px 61px #e0e0e0, 1242px -343px #d4d4d4, -1223px -274px #fcfcfc, -1433px 420px #c9c9c9, -1242px 109px #f2f2f2, -1038px 477px #f0f0f0, -261px -290px #fafafa, -1311px 172px #c4c4c4, 652px -376px #d1d1d1, -1348px 445px #cccccc, 584px -462px #d9d9d9, 528px 124px #dedede, -620px -138px #e0e0e0, 146px 143px #f0f0f0, 847px -222px #cfcfcf, 790px 147px #ededed, -245px 106px #c2c2c2, -955px -196px #ebebeb, 443px 139px #ebebeb, 1183px -81px #c2c2c2, 1248px -293px #d6d6d6, 58px -389px #d1d1d1, 372px 215px whitesmoke, 623px 4px #fafafa, 277px -306px #c4c4c4, 39px 295px #f0f0f0, -418px 357px #f0f0f0, -177px 419px white, -455px 447px #dedede, 362px 200px #e6e6e6, -1365px -46px #d6d6d6, 620px -169px #dedede, -1143px 297px #e8e8e8, -700px -255px #fcfcfc, 142px 198px #f0f0f0, 703px -291px whitesmoke, -1366px -312px #dedede, 412px -319px #f7f7f7, -683px -141px white, -884px 102px #dbdbdb, 249px 267px #cccccc, 1071px -364px #f0f0f0, 1361px 478px #c9c9c9, -414px -41px #e8e8e8, -1296px 477px #e3e3e3, 967px 393px #e3e3e3, 219px 124px white, 1223px -392px #d9d9d9, -1250px 308px #c4c4c4, 55px 56px #cfcfcf, 434px -388px #f0f0f0, -763px -205px #d1d1d1, 1481px -424px #c4c4c4, -1344px -412px #fafafa, -688px 449px white, 1139px -70px #dedede, -1149px 316px white, 1173px -107px #d6d6d6, -870px -120px #e8e8e8, 477px -232px #c7c7c7, 1184px -129px #fcfcfc, -198px -363px #c4c4c4, 1497px 228px #e6e6e6, -129px -292px #cccccc, -1379px 242px #d1d1d1, 1489px -162px whitesmoke, -109px -20px #fcfcfc, 700px 233px #c2c2c2, -503px 474px #e6e6e6, 835px -163px #f2f2f2, -531px 25px #f2f2f2, 99px -10px #f0f0f0, -253px -269px #dedede, 57px -410px #c4c4c4, -399px -447px #d1d1d1, 1358px -384px #ebebeb, -662px -76px #d1d1d1, -116px -191px #ebebeb, -1423px -476px #d4d4d4, 1216px -97px #fafafa, 1497px -198px #e8e8e8, -1111px -474px #e3e3e3, -591px -417px #d6d6d6, -121px -423px #c7c7c7, -1455px 453px #d9d9d9, -24px 410px #d9d9d9, -1042px 447px #c2c2c2, 416px -425px #dedede, -9px 219px #e3e3e3, -424px -119px #e3e3e3, 60px 464px whitesmoke, 1105px 323px #dedede, -360px -289px #f0f0f0, 170px -51px #c7c7c7, -523px -259px #d6d6d6, -736px -72px #f2f2f2, 1056px -333px #f7f7f7, 736px 121px #c4c4c4, 516px -467px #d6d6d6, -548px 155px #fafafa;
  animation: fly 3s linear infinite;
  transform-style: preserve-3d;
   background: transparent
}

.stars:before {
  transform: translateZ(-300px);
  animation: fade1 3s linear infinite;
}
.stars:after {
  transform: translateZ(-600px);
  animation: fade2 3s linear infinite;
}
.stars:before, .stars:after {
  content: "";
 
  width: inherit;
  height: inherit;
  box-shadow: inherit;
   background: transparent
}
@keyframes fly {
  from {
    transform: translateZ(0px);
  }
  to {
    transform: translateZ(300px);
  }
}
@keyframes fade1 {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade2 {
  from {
    opacity: 0;
  }
  to {
    opacity: .5;
  }
}
	</style>
	
</head>
<body>
<div class="stars">
</div>


</body>
</html>

MS Edge中的输出：

此外，您可以尝试根据需要修改代码。