css3星空效果程式碼例項

admin發表於2017-04-14
CSSS3

分享一段程式碼例項，它實現了星空效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body, html {
  font-size: 100%;
  padding: 0;
  margin: 0;
  color: white;
}
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  background: #000;
  perspective: 340px;
}
/*背景圖中的全部圓點*/
.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  box-shadow: -447px 387px red, 
    -401px 118px #fafafa, 
    -109px 217px #d9d9d9, 
    -680px -436px #e3e3e3, 
    514px 360px #cccccc, 
    -708px 298px #e8e8e8, 
    -696px -270px #ededed, 
    116px -128px #f7f7f7, 
    179px 35px white, 
    -404px -90px whitesmoke, 
    -331px -309px #c4c4c4, 
    -363px -24px #d1d1d1, 
    277px 416px #fafafa, 
    -145px -244px whitesmoke, 
    123px 62px #d4d4d4, 
    -407px 418px #d9d9d9, 
    535px 237px #d9d9d9, 
    -466px -78px #f7f7f7, 
    257px 287px #dedede, 
    327px -398px #e0e0e0, 
    -602px -38px #c2c2c2, 
    128px 398px #e6e6e6, 
    274px -446px #d1d1d1, 
    -602px -298px #c7c7c7, 
    526px -5px #c4c4c4, 
    -90px -158px #fcfcfc, 
    5px 294px whitesmoke, 
    -633px 229px #c4c4c4, 
    -475px 427px #dedede, 
    586px -453px #f2f2f2, 
    180px -432px #c7c7c7, 
    -637px -88px #cfcfcf, 
    -453px 308px #d6d6d6, 
    -111px 1px #d9d9d9, 
    573px -450px #ededed, 
    198px 300px #d6d6d6, 
    -355px 166px #dedede, 
    -715px 13px #e3e3e3, 
    262px -104px #d1d1d1, 
    147px 325px #dbdbdb, 
    1px 399px #dbdbdb, 
    286px -100px white, 
    43px -329px #e8e8e8, 
    617px 55px #d9d9d9, 
    -168px -392px #cccccc, 
    84px 219px #c9c9c9, 
    507px -226px #d9d9d9, 
    -327px -70px #e6e6e6, 
    386px -212px #c4c4c4, 
    -717px 4px #cfcfcf, 
    502px -231px #e3e3e3, 
    302px 56px #ededed, 
    649px 341px #c7c7c7, 
    569px 350px #c9c9c9, 
    516px -31px #e6e6e6, 
    689px 447px #c2c2c2, 
    591px -206px #fafafa, 
    422px -137px #e6e6e6, 
    -510px -324px #cccccc, 
    -649px 287px #c2c2c2, 
    -194px -48px #f7f7f7, 
    -279px -329px #d1d1d1, 
    -406px 478px #dbdbdb, 
    -735px -87px #c9c9c9, 
    30px -197px #dedede, 
    -564px 233px #e6e6e6, 
    -486px -324px #ededed, 
    -54px -7px #ededed, 
    -441px -194px #e3e3e3, 
    -133px -95px #e0e0e0, 
    -722px -73px #d6d6d6, 
    595px 423px #ededed, 
    568px -39px #ededed, 
    370px 377px #d1d1d1, 
    -419px -102px #fcfcfc, 
    -450px 109px #c4c4c4, 
    -57px -119px #d1d1d1, 
    -582px 150px #e6e6e6, 
    206px -263px #cfcfcf, 
    582px -461px #c9c9c9, 
    -268px -141px #d9d9d9, 
    -148px 291px #c7c7c7, 
    254px -179px #c9c9c9, 
    725px 424px #f0f0f0, 
    391px -150px #ebebeb, 
    89px -299px #d4d4d4, 
    170px 1px #c9c9c9, 
    243px 209px #c7c7c7, 
    27px 460px #c9c9c9, 
    -465px -380px #d4d4d4, 
    530px -360px whitesmoke, 
    -626px 53px #e0e0e0, 
    706px 218px #d9d9d9, 
    40px -82px #cccccc, 
    -5px -212px #e6e6e6, 
    -742px 33px #ebebeb, 
    -714px 478px #e0e0e0, 
    -585px -125px #cccccc, 
    -216px 348px #cfcfcf, 
    601px 332px #ededed, 
    344px -88px #c4c4c4, 
    659px -22px #d1d1d1, 
    -411px 188px #d6d6d6, 
    -423px -206px #fcfcfc, 
    -359px -136px #cfcfcf, 
    612px 406px whitesmoke, 
    725px 96px whitesmoke, 
    363px -446px white, 
    -204px 325px #c9c9c9, 
    740px 176px #fafafa, 
    -489px -352px white, 
    -638px 64px #dbdbdb, 
    537px -65px #dbdbdb, 
    151px -32px #ebebeb, 
    681px 212px #fcfcfc, 
    604px -149px #e6e6e6, 
    -542px -398px #c4c4c4, 
    -707px 66px whitesmoke, 
    -381px 258px #cfcfcf, 
    -30px 332px #d6d6d6, 
    512px -381px #c9c9c9, 
    195px 288px #cccccc, 
    -278px 479px #c7c7c7, 
    27px -208px #d6d6d6, 
    -288px 15px white, 
    -680px 248px #dedede, 
    433px 31px #c9c9c9, 
    150px -206px #d4d4d4, 
    -79px 247px white, 
    -594px 115px #e0e0e0, 
    99px 292px #e0e0e0, 
    673px -269px #dedede, 
    -257px -64px #d1d1d1, 
    449px 81px #f2f2f2, 
    18px -99px #d1d1d1, 
    -694px 415px #f7f7f7, 
    240px 264px #e0e0e0, 
    450px -172px white, 
    383px 7px #e8e8e8, 
    338px -73px #c9c9c9, 
    291px -19px #ebebeb, 
    659px 137px #d1d1d1, 
    602px -6px #fcfcfc, 
    554px 249px #ebebeb, 
    625px 356px #d9d9d9, 
    579px -183px #d6d6d6, 
    -20px 250px white, 
    -401px 431px #c4c4c4, 
    -645px -232px #cccccc, 
    -265px -148px white, 
    553px 258px #d1d1d1, 
    166px -360px #ebebeb, 
    719px 51px #ededed, 
    612px -129px #ebebeb, 
    -465px -104px #f2f2f2, 
    -154px -121px #d9d9d9, 
    -1px 330px #f2f2f2, 
    -666px 248px #f7f7f7, 
    -720px 264px #ededed, 
    148px -365px #e6e6e6, 
    -388px -349px #c4c4c4, 
    128px -88px #e3e3e3, 
    -683px -274px #fafafa, 
    -341px 41px #c9c9c9, 
    -59px -471px #f0f0f0, 
    -3px -427px #c2c2c2, 
    418px 167px #d6d6d6, 
    343px 247px #c7c7c7, 
    623px -347px #d1d1d1, 
    716px -217px white, 
    243px -409px whitesmoke, 
    -75px -126px #d6d6d6, 
    -730px -91px #c9c9c9, 
    -210px -397px #cfcfcf, 
    -349px 180px #c9c9c9, 
    -567px -281px #e0e0e0, 
    -460px 381px #fcfcfc, 
    -310px -22px #ededed, 
    450px -1px #dbdbdb, 
    -405px -328px #e3e3e3, 
    5px 332px #d6d6d6, 
    -294px 302px #fcfcfc, 
    -398px 97px whitesmoke, 
    -696px 325px #cfcfcf, 
    -589px 110px #d6d6d6, 
    353px -411px #dbdbdb, 
    -697px -318px #ebebeb, 
    -114px -72px #f0f0f0, 
    259px -193px #fcfcfc, 
    60px 26px #e6e6e6, 
    -63px -232px white, 
    205px -372px #f7f7f7, 
    -464px -333px #f2f2f2, 
    -374px 123px white, 
    -377px -386px #c7c7c7, 
    -80px 337px #cccccc, 
    478px -178px #dbdbdb, 
    222px 420px #ebebeb, 
    -707px 99px #c4c4c4, 
    716px -132px #fafafa, 
    -253px -286px #e3e3e3, 
    646px 178px #f0f0f0, 
    201px 24px #d1d1d1, 
    178px -58px #c7c7c7, 
    -557px 368px #ededed, 
    0px 219px #d9d9d9, 
    -266px -269px #cccccc, 
    242px -197px #c9c9c9, 
    -419px 193px #c2c2c2, 
    -47px 91px #c7c7c7, 
    -109px 75px #c2c2c2, 
    -146px -453px #d6d6d6, 
    671px -350px #f2f2f2, 
    421px -91px #d9d9d9, 
    738px 19px #ededed, 
    -316px -155px #dedede, 
    419px 244px #fcfcfc, 
    -278px -418px #d6d6d6, 
    -581px -181px #fcfcfc, 
    139px 264px #d9d9d9, 
    691px -11px #ebebeb, 
    -622px 402px #c2c2c2, 
    219px 396px #f0f0f0, 
    -149px -423px white, 
    -716px -78px #d9d9d9, 
    -590px 341px #e6e6e6, 
    -208px 79px #d6d6d6, 
    -227px -24px #f7f7f7, 
    239px 262px #d1d1d1, 
    740px 443px #f7f7f7, 
    509px 134px #d6d6d6, 
    -555px 232px #e8e8e8, 
    -67px -427px #cfcfcf, 
    -368px 250px #f7f7f7, 
    715px -415px #fafafa, 
    411px -301px #f0f0f0, 
    -322px 287px #d9d9d9, 
    -429px -90px #f2f2f2, 
    -327px -387px #f0f0f0, 
    -491px 183px #c2c2c2, 
    -133px 250px #d4d4d4, 
    538px 139px #e3e3e3, 
    -417px -125px #f0f0f0, 
    653px -351px #e6e6e6, 
    -549px 38px #d4d4d4, 
    602px 110px whitesmoke, 
    415px 105px #e0e0e0, 
    -733px -371px #cfcfcf, 
    286px 403px #d4d4d4, 
    11px 320px #c4c4c4, 
    -597px 158px whitesmoke, 
    716px -350px whitesmoke, 
    321px 67px #fafafa, 
    -237px -300px #cfcfcf, 
    74px 152px #c9c9c9, 
    587px -123px #fcfcfc, 
    699px -332px whitesmoke, 
    399px 355px #f7f7f7, 
    -323px 314px #dbdbdb, 
    89px 416px #c7c7c7, 
    445px 38px #e3e3e3, 
    572px 122px #c4c4c4, 
    -258px 372px white, 
    49px 306px #d9d9d9, 
    437px -35px #dedede, 
    566px 174px #f2f2f2, 
    732px -299px whitesmoke, 
    -410px 394px #ededed, 
    131px -415px white, 
    19px -326px #e8e8e8, 
    -700px -188px #d1d1d1, 
    96px -1px #e0e0e0, 
    -328px -396px #f0f0f0, 
    -117px -214px #fcfcfc, 
    -53px 261px #ebebeb, 
    80px 134px #d6d6d6, 
    -364px -216px white, 
    -636px -125px #dbdbdb, 
    -639px -265px #e3e3e3, 
    208px 98px #c7c7c7, 
    172px 467px #e0e0e0, 
    435px 309px #e3e3e3, 
    194px -259px #f0f0f0, 
    209px -186px #c9c9c9, 
    -312px 418px #fafafa, 
    229px 407px #c9c9c9, 
    -449px -357px #fafafa, 
    674px 121px #e8e8e8, 
    608px -429px #ebebeb, 
    -431px -428px #cfcfcf, 
    105px 462px #e3e3e3, 
    -179px -372px #e3e3e3, 
    143px -317px #d6d6d6, 
    -449px -149px #fafafa, 
    -544px 250px #dedede, 
    -220px -323px whitesmoke, 
    658px 8px whitesmoke, 
    -656px -244px #e8e8e8, 
    347px 11px whitesmoke, 
    694px -230px #f7f7f7, 
    -317px 1px #c4c4c4, 
    28px 23px #fcfcfc, 
    -382px 321px #dbdbdb, 
    632px -74px #c4c4c4, 
    154px -245px #c2c2c2, 
    -553px 337px #d6d6d6, 
    -48px -243px #d1d1d1, 
    92px -391px #cccccc, 
    -71px -256px #cfcfcf, 
    -372px 57px #d9d9d9, 
    369px -140px #fcfcfc, 
    675px 81px #c2c2c2, 
    -663px 254px #cccccc, 
    703px -203px #ededed, 
    74px -363px #c2c2c2;
  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);
  opacity: .6;
}
.stars:after {
  transform: translateZ(-600px);
  opacity: .4;
}
@keyframes fly {
  from {
    transform: translateZ(0px);
    opacity: .6;
  }
  to {
    transform: translateZ(300px);
    opacity: 1;
  }
}
</style>
</head>
<body>
  <div class="stars"></div>
</body>
</html>

相關文章