Pure CSS3 Cool 3D star animation effect

Brief tutorials

This is a cool 3D star animation effect made with pure CSS3. In this special effect, with the spacecraft moving forward quickly as the angle of view, all the stars are rapidly growing and moving backwards, the effect is very realistic.

How to use

HTML structure

The 3D star effect uses only one <div> element as a container.

<div class= "Stars" ></div>

CSS Styles

The stars in this 3D star effect are made using the Box-shadow of the Stars element. Stars elements: Before and: After pseudo elements are used to make a small star in the background.

Finally, a fly frame animation is performed through the stars element, which is the star's proximity to the screen, resulting in a magnified sensation.

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 #c4c4c4, -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 #d9 D9D9, 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 whitesmo  Ke, -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 #e6e6e 6, 386px-212px #c4c4c4, -717px 4px #cfcfcf, 502px-231px #e3e3e3, 302px 56px #ededed, 649px 341px #c7c7c7, 569px 350px #c 9C9C9, 516px-31px #e6e6e6, 689px 447px #c2c2c2, 591px-206px #fafafa, 422px-137px #e6e6e6, -510px-324px #cccccc,-649 PX 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,-7 22px-73px #d6d6d6, 595px 423px #ededed, 568px-39px #ededed, 370px 377px #d1d1d1, -419px-102px #fcfcfc, -450px 109px #c4 C4C4, -57px-119px #d1d1d1, -582px 150px #e6e6e6, 206px-263px #cfcfcf, 582px-461px #c9c9c9, -268px-141px #d9d9d9,-14 8px 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-8 2px #cccccc, -5px-212px #e6e6e6, -742px 33px #ebebeb, -714px 478px #e0e0e0, -585px-125px #cccccc, -216px 348px #cfcfc F, 601px 332px #ededed, 344px-88px #c4c4c4, 659px-22px #d1d1d1, -411px 188px #d6d6d6, -423px-206px #fcfcfc, -359px-136 PX #cfcfcf, 612px 406px whitesmoke, 725px 96px WhiteSmoke, 363px-446px White, -204px 325px #c9c9c9, 740px 176px #fafa FA, -489px-352px White, -638px 64px #dbdbdb, 537px-65px #dbdbdb, 151px-32px #ebebeb, 681px 212px #fcfcfc, 604px-1  49px #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 3 1px #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 #e8 E8e8, 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 W Hite, 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, -75p X-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, 259 px-193px #fcfcfc, 60px 26px #e6e6e6, -63px-232px White, 205px-372px #f7f7f7, -464px-333px #f2f2f2, -374px 123p x White, -377px-386px #c7c7c7, -80px 337px #cccccc, 478px-178px #dbdbdb, 222px 420px #ebebeb, -707px 99px #c4c4c          4, 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, -316p x-155px #dedede, 419px244px #fcfcfc, -278px-418px #d6d6d6, -581px-181px # FCFCFC, 139px 264px #d9d9d9, 691px-11px #ebebeb, -622px 402p X #c2c2c2, 219px 396px #f0f0f0, -149px-423px White, -716px-78px #d9d9d9, -590px 341px #e6e6e6, -208px 79px #d6d6 D6, -227px-24px #f7f7f7, 239px 262px #d1d1d1, 740px 443px #f7f7f7, 509px 134px #d6d6d6, -555px 232px #e8e8e8, -67px-427p X #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 #f 0F0F0, 653px-351px #e6e6e6, -549px 38px #d4d4d4, 602px 110px whitesmoke, 415px 105px #e0e0e0, -733px-371px #cf CFCF, 286px 403px #d4d4d4, 11px 320px #c4c4c4, -597px 158px WhiteSmoke, 716px-350px whitesmoke, 321px 67px #faf  AFA, -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, 1 79px-372px #e3e3e3, 143px-317px #d6d6d6, -449px-149px #fafafa, -544px 250px #dedede, -220px-323px Whitesmok E, 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 254 PX #cccccc, 703px-203px #ededed, 74px-363px #c2c2c2, 643px-458px #d1d1d1, 198px 359px #cccccc, 265px 309px # D4d4d4, -353px-368px #e8e8e8, -465px 439px whitesmoke, 693px 360px #c9c9c9, 634px-397px #d1d1d1, 467px 25px W Hitesmoke, -558px-272px #e6e6e6, 671px 69px #dbdbdb, 407px 357px #cfcfcf, 379px 80px White, 10px-203px #c9c9c 9, 104px-292px #f0f0f0, -667px-29px #d1d1d1, 557px-155px #e6e6e6, -505px 115px #cfcfcf, -605px 164px #f2f2f2 , -108px-223px #e0e0e0, 523px-156px #ebebeb, 691px 230px White, -507px-13px #d1d1d1, -349px 332px #dedede, 5            20px 266px WhiteSmoke, -66px-250px #e6e6e6, -496px-449px #ebebeb, 414px-170px #dedede, -649px 230px #ebebeb, 598px-92px #c7c7c7,-638px 113px #c2c2c2, 151px 363px #f7f7f7, -445px-241px #f0f0f0, 527px-14px #dedede, 203px-61px #cfcfcf, -716p  X-284px #ebebeb, -525px 134px #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; }}

The above is pure CSS3 cool 3D star animation effect content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

