Single element pure CSS 3D starfield

Developer
Keith Clark
Size
7,338 Kb
Views
42,504
  1. Single element pure CSS 3D starfield Previews
  2. Single element pure CSS 3D starfield HTML Codes
  3. Single element pure CSS 3D starfield CSS Codes

How do I make an single element pure css 3d starfield?

What is a single element pure css 3d starfield? How do you make a single element pure css 3d starfield? This script and codes were developed by Keith Clark on 12 August 2022, Friday.

Single element pure CSS 3D starfield Previews
IQ Test

Single element pure CSS 3D starfield - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single element pure CSS 3D starfield</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { height: 100%; overflow: hidden;
}
body { background: #000; perspective: 340px;
}
.stars { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; box-shadow: -534px -278px #d9d9d9, -554px -385px #ededed, 400px 3px #c7c7c7, 552px 395px #c9c9c9, -224px 144px #d1d1d1, -189px 358px white, -82px -119px #fafafa, 3px 302px #f0f0f0, -71px -111px #dbdbdb, -292px 66px #ebebeb, -58px 399px #e8e8e8, -267px -436px #d9d9d9, -596px -399px #e6e6e6, -221px 89px #ededed, -529px -61px #cccccc, -399px 272px #d6d6d6, -185px 404px #ebebeb, -731px 280px #f7f7f7, -118px 114px #e3e3e3, -25px -161px #e8e8e8, -474px 22px #f7f7f7, -376px 193px #fafafa, -264px -440px #dbdbdb, 71px -334px #f7f7f7, 658px 373px whitesmoke, 348px 132px #d9d9d9, -378px 380px #c4c4c4, 155px 260px #dedede, -509px -161px #d6d6d6, 720px 313px #e3e3e3, 408px -258px #e8e8e8, 748px 422px #fafafa, 327px 230px #dbdbdb, 226px 404px #fcfcfc, 188px 344px #d6d6d6, 30px -461px #d4d4d4, -294px 297px #f2f2f2, -8px -401px white, 277px -49px #e3e3e3, 151px -477px #e3e3e3, -462px 376px #e8e8e8, -437px 475px #ededed, -48px 67px #f2f2f2, -453px -318px whitesmoke, 628px -297px #dedede, -655px -302px #f0f0f0, -741px 181px #e3e3e3, 26px 294px #c7c7c7, 148px -445px #d1d1d1, 340px 118px #ededed, -719px -342px whitesmoke, -596px 99px #e8e8e8, 345px 217px #dedede, 379px 436px #e8e8e8, -55px -318px #d4d4d4, -127px 299px #cccccc, -183px 318px #c2c2c2, -477px 459px #ebebeb, 301px -286px whitesmoke, -335px 409px #d9d9d9, -594px -161px #d1d1d1, -444px 83px #c2c2c2, 261px -204px #e0e0e0, 224px 349px #c2c2c2, 501px 100px #dedede, 189px -243px #c7c7c7, 219px -128px #c2c2c2, 156px 377px #ededed, 215px 247px #e8e8e8, -717px 58px white, -191px -359px #e8e8e8, 587px 199px #e6e6e6, 117px 37px #d1d1d1, -550px -148px #c2c2c2, 593px -417px #d9d9d9, 687px 132px #ebebeb, -138px -220px #d9d9d9, -136px 123px #f2f2f2, 536px 369px #d9d9d9, -654px -350px whitesmoke, -711px 459px #e0e0e0, -141px -80px #d9d9d9, 63px -376px #ededed, -661px 163px #c4c4c4, 302px 440px #fafafa, 186px 78px #c7c7c7, 612px 250px #d4d4d4, -716px -285px #c2c2c2, 272px -420px #c7c7c7, -453px -107px #ebebeb, 20px 369px #f0f0f0, 165px -279px #c2c2c2, -388px -380px white, -82px 77px #d4d4d4, -737px 308px #c7c7c7, 124px 364px #ebebeb, -686px -129px #e8e8e8, 372px 248px #c2c2c2, 591px -49px whitesmoke, -447px 387px #e0e0e0, -272px -418px #c2c2c2, 4px -381px #d9d9d9, 92px 192px #ededed, -135px 399px #e8e8e8, -620px 42px #f7f7f7, -453px 417px #c9c9c9, -146px 444px whitesmoke, 264px -110px #e0e0e0, 547px 110px #f2f2f2, 476px 181px #d9d9d9, -413px -78px #c4c4c4, 376px 330px #c9c9c9, -25px 355px #fcfcfc, -154px -374px #d6d6d6, 643px 201px #c2c2c2, -681px -291px #c4c4c4, -645px -376px #cfcfcf, 579px 192px #c7c7c7, 132px 242px #d4d4d4, -156px 20px #ededed, -416px -217px #e6e6e6, 484px 272px #f7f7f7, 694px 69px #d9d9d9, -168px -464px #dedede, -685px -323px white, 56px 37px #fafafa, 566px -51px #dbdbdb, 66px 350px #f0f0f0, -653px 228px #c7c7c7, -412px -376px #d9d9d9, -698px 121px #dedede, -64px -431px #ebebeb, 75px 272px #e6e6e6, -103px 400px #c9c9c9, -389px 90px #fafafa, 456px 134px #c4c4c4, 481px 433px #c4c4c4, -332px -458px #f0f0f0, 592px 66px whitesmoke, 668px 1px #f0f0f0, -60px -456px #f2f2f2, 268px -381px #d9d9d9, 473px 15px #fafafa, -51px 237px #f0f0f0, -217px -52px #cfcfcf, -435px 419px #fcfcfc, -287px -208px #ededed, -12px 22px #c7c7c7, -564px -477px #d6d6d6, -442px -96px #e3e3e3, 539px -477px #c9c9c9, 640px -209px #cfcfcf, 293px 14px #e6e6e6, -526px -83px #d1d1d1, 48px 278px #cfcfcf, -621px -390px #e3e3e3, 17px 403px #d6d6d6, 130px 221px #dbdbdb, 713px -200px #d9d9d9, 362px -418px #d1d1d1, -565px -13px #e0e0e0, 662px 77px #e6e6e6, 211px -17px #fafafa, -537px -359px #e0e0e0, 15px 312px #c2c2c2, 216px 340px #f2f2f2, -60px -110px #e0e0e0, 723px -270px #ebebeb, -693px 382px #d1d1d1, 407px 420px #d6d6d6, -358px 333px #fcfcfc, 664px -162px #e6e6e6, 169px -45px #f2f2f2, 98px -328px #f0f0f0, -42px -377px #fcfcfc, -364px 52px #e8e8e8, 450px -458px #dbdbdb, -74px -479px #c9c9c9, 521px 244px #f7f7f7, -647px 353px #d4d4d4, 46px -288px #fafafa, -560px -396px #d9d9d9, -333px 164px #f7f7f7, -105px -168px #dbdbdb, -359px 451px #dbdbdb, -227px 208px #f2f2f2, 313px 10px #dedede, -106px -112px #d6d6d6, 586px 311px #e6e6e6, 622px 86px #e0e0e0, -330px 459px #e8e8e8, -296px 217px #fafafa, -480px 355px #d1d1d1, 642px -215px #d4d4d4, -140px -302px #fafafa, 130px -131px #d4d4d4, -158px -189px #c4c4c4, 606px 440px #e6e6e6, 731px -251px #d6d6d6, -472px -164px #e0e0e0, 22px -44px whitesmoke, -204px 155px #c7c7c7, 602px -366px #cfcfcf, 551px 174px #e0e0e0, 103px -186px #d6d6d6, -505px 356px #c7c7c7, 354px -78px #e8e8e8, 69px -155px #d6d6d6, 108px -278px #c9c9c9, -127px 466px #c7c7c7, 57px -262px whitesmoke, -665px -191px #fcfcfc, -464px 129px #fcfcfc, -445px -396px #d9d9d9, 634px 206px #f7f7f7, 382px -108px #d6d6d6, 346px -192px #c2c2c2, 143px 0px #ebebeb, -182px 227px #d6d6d6, 25px -200px #fcfcfc, 677px 27px #cfcfcf, -252px -395px #d6d6d6, 169px -212px #f7f7f7, -330px -267px #e6e6e6, 462px 424px whitesmoke, -404px -187px #f7f7f7, 358px 124px #f0f0f0, -529px 271px #d9d9d9, 629px -174px #e3e3e3, -585px 174px #c9c9c9, -507px 398px #cccccc, -469px -246px #f7f7f7, 239px -142px #cccccc, 41px 124px #fcfcfc, -717px -412px #e0e0e0, -233px -43px #e3e3e3, -437px 105px #dedede, -611px 269px #dedede, -711px 218px #e8e8e8, -427px 431px #cccccc, -424px -303px #d9d9d9, -437px -152px #cfcfcf, -282px 129px #f0f0f0, 310px 470px #e0e0e0, -126px 209px #cfcfcf, -412px 161px whitesmoke, -451px -351px white, -580px -297px #d6d6d6, 669px 102px #d1d1d1, -182px 108px #cfcfcf, -709px 51px #cccccc, -91px -206px #d6d6d6, 697px 475px #d6d6d6, -178px -217px #ededed, 549px -344px #e6e6e6, -92px -68px #d6d6d6, -395px -391px #d6d6d6, -741px -79px #e8e8e8, 59px -442px #c2c2c2, 475px -409px #fafafa, 565px 430px #d1d1d1, 714px -439px #f0f0f0, -342px -323px #e6e6e6, -711px -301px #ebebeb, -183px -33px #d9d9d9, 645px 276px #fcfcfc, -506px -145px #dedede, 256px 227px #e3e3e3, -710px 135px #d9d9d9, -572px 100px #c9c9c9, 743px 24px #f2f2f2, -540px 404px #c2c2c2, -125px 47px #f2f2f2, -156px 412px #ededed, 645px 289px #dbdbdb, -245px -239px #f2f2f2, -248px 77px #d6d6d6, 311px -167px #e3e3e3, 310px 287px #ebebeb, -702px -396px #c2c2c2, 315px -126px #c9c9c9, -335px 17px #d6d6d6, 525px 399px #f2f2f2, -400px -384px #cfcfcf, 163px -438px #ededed, 700px -381px #d9d9d9, 61px -302px whitesmoke, 216px 81px #e8e8e8, 405px -395px #c7c7c7, -698px 219px #e8e8e8, -27px -263px #cfcfcf, -611px -451px #e6e6e6, -545px -174px #f2f2f2, 668px -111px whitesmoke, -746px -82px #cccccc, 658px 342px #dedede, 379px 177px #d4d4d4, 458px 412px #f7f7f7, 635px -14px #f7f7f7, -179px 159px #f7f7f7, 303px -130px #fcfcfc, 330px 267px #fafafa, 142px 365px #cccccc, 397px 464px #e8e8e8, -178px 467px #d6d6d6, -372px -288px #ededed, -723px -340px #cfcfcf, -46px -159px #ebebeb, 402px 407px #fafafa, 428px 395px #c7c7c7, 632px 68px #dbdbdb, -164px 279px #f7f7f7, 526px 332px #d9d9d9, 443px 282px #d4d4d4, 113px -394px whitesmoke, -546px -16px #e3e3e3, 353px 133px #f0f0f0, 626px 394px #cccccc, -193px -425px whitesmoke, 172px -350px #e0e0e0, -41px 407px whitesmoke, -600px 255px #cfcfcf, -29px -412px #e3e3e3, -97px 143px #ebebeb, 465px -461px #e3e3e3, -737px 336px #e3e3e3, -697px -440px #cccccc, -159px -242px #d4d4d4, 265px 255px #e0e0e0, -713px -212px #dbdbdb, 571px -169px white, 163px -102px #c2c2c2, -480px -477px #e6e6e6, 314px -19px #ebebeb, 175px 359px #ebebeb, 4px -76px #e3e3e3, -285px 320px #ededed, 121px 186px #ededed, -49px -167px #f0f0f0, 683px 182px #f2f2f2, 476px 400px #dedede, -634px 428px #f7f7f7, -200px 11px #c2c2c2, 18px 87px #ededed, -110px -443px #ededed, 511px -308px #d4d4d4, -148px -310px #e3e3e3, 208px -168px #cccccc, -606px 438px white, 175px 192px #c9c9c9, 662px 333px #c4c4c4; 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> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="stars"></div>
</body>
</html>

Single element pure CSS 3D starfield - Script Codes CSS Codes

html, body { height: 100%; overflow: hidden;
}
body { background: #000; perspective: 340px;
}
.stars { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; box-shadow: -534px -278px #d9d9d9, -554px -385px #ededed, 400px 3px #c7c7c7, 552px 395px #c9c9c9, -224px 144px #d1d1d1, -189px 358px white, -82px -119px #fafafa, 3px 302px #f0f0f0, -71px -111px #dbdbdb, -292px 66px #ebebeb, -58px 399px #e8e8e8, -267px -436px #d9d9d9, -596px -399px #e6e6e6, -221px 89px #ededed, -529px -61px #cccccc, -399px 272px #d6d6d6, -185px 404px #ebebeb, -731px 280px #f7f7f7, -118px 114px #e3e3e3, -25px -161px #e8e8e8, -474px 22px #f7f7f7, -376px 193px #fafafa, -264px -440px #dbdbdb, 71px -334px #f7f7f7, 658px 373px whitesmoke, 348px 132px #d9d9d9, -378px 380px #c4c4c4, 155px 260px #dedede, -509px -161px #d6d6d6, 720px 313px #e3e3e3, 408px -258px #e8e8e8, 748px 422px #fafafa, 327px 230px #dbdbdb, 226px 404px #fcfcfc, 188px 344px #d6d6d6, 30px -461px #d4d4d4, -294px 297px #f2f2f2, -8px -401px white, 277px -49px #e3e3e3, 151px -477px #e3e3e3, -462px 376px #e8e8e8, -437px 475px #ededed, -48px 67px #f2f2f2, -453px -318px whitesmoke, 628px -297px #dedede, -655px -302px #f0f0f0, -741px 181px #e3e3e3, 26px 294px #c7c7c7, 148px -445px #d1d1d1, 340px 118px #ededed, -719px -342px whitesmoke, -596px 99px #e8e8e8, 345px 217px #dedede, 379px 436px #e8e8e8, -55px -318px #d4d4d4, -127px 299px #cccccc, -183px 318px #c2c2c2, -477px 459px #ebebeb, 301px -286px whitesmoke, -335px 409px #d9d9d9, -594px -161px #d1d1d1, -444px 83px #c2c2c2, 261px -204px #e0e0e0, 224px 349px #c2c2c2, 501px 100px #dedede, 189px -243px #c7c7c7, 219px -128px #c2c2c2, 156px 377px #ededed, 215px 247px #e8e8e8, -717px 58px white, -191px -359px #e8e8e8, 587px 199px #e6e6e6, 117px 37px #d1d1d1, -550px -148px #c2c2c2, 593px -417px #d9d9d9, 687px 132px #ebebeb, -138px -220px #d9d9d9, -136px 123px #f2f2f2, 536px 369px #d9d9d9, -654px -350px whitesmoke, -711px 459px #e0e0e0, -141px -80px #d9d9d9, 63px -376px #ededed, -661px 163px #c4c4c4, 302px 440px #fafafa, 186px 78px #c7c7c7, 612px 250px #d4d4d4, -716px -285px #c2c2c2, 272px -420px #c7c7c7, -453px -107px #ebebeb, 20px 369px #f0f0f0, 165px -279px #c2c2c2, -388px -380px white, -82px 77px #d4d4d4, -737px 308px #c7c7c7, 124px 364px #ebebeb, -686px -129px #e8e8e8, 372px 248px #c2c2c2, 591px -49px whitesmoke, -447px 387px #e0e0e0, -272px -418px #c2c2c2, 4px -381px #d9d9d9, 92px 192px #ededed, -135px 399px #e8e8e8, -620px 42px #f7f7f7, -453px 417px #c9c9c9, -146px 444px whitesmoke, 264px -110px #e0e0e0, 547px 110px #f2f2f2, 476px 181px #d9d9d9, -413px -78px #c4c4c4, 376px 330px #c9c9c9, -25px 355px #fcfcfc, -154px -374px #d6d6d6, 643px 201px #c2c2c2, -681px -291px #c4c4c4, -645px -376px #cfcfcf, 579px 192px #c7c7c7, 132px 242px #d4d4d4, -156px 20px #ededed, -416px -217px #e6e6e6, 484px 272px #f7f7f7, 694px 69px #d9d9d9, -168px -464px #dedede, -685px -323px white, 56px 37px #fafafa, 566px -51px #dbdbdb, 66px 350px #f0f0f0, -653px 228px #c7c7c7, -412px -376px #d9d9d9, -698px 121px #dedede, -64px -431px #ebebeb, 75px 272px #e6e6e6, -103px 400px #c9c9c9, -389px 90px #fafafa, 456px 134px #c4c4c4, 481px 433px #c4c4c4, -332px -458px #f0f0f0, 592px 66px whitesmoke, 668px 1px #f0f0f0, -60px -456px #f2f2f2, 268px -381px #d9d9d9, 473px 15px #fafafa, -51px 237px #f0f0f0, -217px -52px #cfcfcf, -435px 419px #fcfcfc, -287px -208px #ededed, -12px 22px #c7c7c7, -564px -477px #d6d6d6, -442px -96px #e3e3e3, 539px -477px #c9c9c9, 640px -209px #cfcfcf, 293px 14px #e6e6e6, -526px -83px #d1d1d1, 48px 278px #cfcfcf, -621px -390px #e3e3e3, 17px 403px #d6d6d6, 130px 221px #dbdbdb, 713px -200px #d9d9d9, 362px -418px #d1d1d1, -565px -13px #e0e0e0, 662px 77px #e6e6e6, 211px -17px #fafafa, -537px -359px #e0e0e0, 15px 312px #c2c2c2, 216px 340px #f2f2f2, -60px -110px #e0e0e0, 723px -270px #ebebeb, -693px 382px #d1d1d1, 407px 420px #d6d6d6, -358px 333px #fcfcfc, 664px -162px #e6e6e6, 169px -45px #f2f2f2, 98px -328px #f0f0f0, -42px -377px #fcfcfc, -364px 52px #e8e8e8, 450px -458px #dbdbdb, -74px -479px #c9c9c9, 521px 244px #f7f7f7, -647px 353px #d4d4d4, 46px -288px #fafafa, -560px -396px #d9d9d9, -333px 164px #f7f7f7, -105px -168px #dbdbdb, -359px 451px #dbdbdb, -227px 208px #f2f2f2, 313px 10px #dedede, -106px -112px #d6d6d6, 586px 311px #e6e6e6, 622px 86px #e0e0e0, -330px 459px #e8e8e8, -296px 217px #fafafa, -480px 355px #d1d1d1, 642px -215px #d4d4d4, -140px -302px #fafafa, 130px -131px #d4d4d4, -158px -189px #c4c4c4, 606px 440px #e6e6e6, 731px -251px #d6d6d6, -472px -164px #e0e0e0, 22px -44px whitesmoke, -204px 155px #c7c7c7, 602px -366px #cfcfcf, 551px 174px #e0e0e0, 103px -186px #d6d6d6, -505px 356px #c7c7c7, 354px -78px #e8e8e8, 69px -155px #d6d6d6, 108px -278px #c9c9c9, -127px 466px #c7c7c7, 57px -262px whitesmoke, -665px -191px #fcfcfc, -464px 129px #fcfcfc, -445px -396px #d9d9d9, 634px 206px #f7f7f7, 382px -108px #d6d6d6, 346px -192px #c2c2c2, 143px 0px #ebebeb, -182px 227px #d6d6d6, 25px -200px #fcfcfc, 677px 27px #cfcfcf, -252px -395px #d6d6d6, 169px -212px #f7f7f7, -330px -267px #e6e6e6, 462px 424px whitesmoke, -404px -187px #f7f7f7, 358px 124px #f0f0f0, -529px 271px #d9d9d9, 629px -174px #e3e3e3, -585px 174px #c9c9c9, -507px 398px #cccccc, -469px -246px #f7f7f7, 239px -142px #cccccc, 41px 124px #fcfcfc, -717px -412px #e0e0e0, -233px -43px #e3e3e3, -437px 105px #dedede, -611px 269px #dedede, -711px 218px #e8e8e8, -427px 431px #cccccc, -424px -303px #d9d9d9, -437px -152px #cfcfcf, -282px 129px #f0f0f0, 310px 470px #e0e0e0, -126px 209px #cfcfcf, -412px 161px whitesmoke, -451px -351px white, -580px -297px #d6d6d6, 669px 102px #d1d1d1, -182px 108px #cfcfcf, -709px 51px #cccccc, -91px -206px #d6d6d6, 697px 475px #d6d6d6, -178px -217px #ededed, 549px -344px #e6e6e6, -92px -68px #d6d6d6, -395px -391px #d6d6d6, -741px -79px #e8e8e8, 59px -442px #c2c2c2, 475px -409px #fafafa, 565px 430px #d1d1d1, 714px -439px #f0f0f0, -342px -323px #e6e6e6, -711px -301px #ebebeb, -183px -33px #d9d9d9, 645px 276px #fcfcfc, -506px -145px #dedede, 256px 227px #e3e3e3, -710px 135px #d9d9d9, -572px 100px #c9c9c9, 743px 24px #f2f2f2, -540px 404px #c2c2c2, -125px 47px #f2f2f2, -156px 412px #ededed, 645px 289px #dbdbdb, -245px -239px #f2f2f2, -248px 77px #d6d6d6, 311px -167px #e3e3e3, 310px 287px #ebebeb, -702px -396px #c2c2c2, 315px -126px #c9c9c9, -335px 17px #d6d6d6, 525px 399px #f2f2f2, -400px -384px #cfcfcf, 163px -438px #ededed, 700px -381px #d9d9d9, 61px -302px whitesmoke, 216px 81px #e8e8e8, 405px -395px #c7c7c7, -698px 219px #e8e8e8, -27px -263px #cfcfcf, -611px -451px #e6e6e6, -545px -174px #f2f2f2, 668px -111px whitesmoke, -746px -82px #cccccc, 658px 342px #dedede, 379px 177px #d4d4d4, 458px 412px #f7f7f7, 635px -14px #f7f7f7, -179px 159px #f7f7f7, 303px -130px #fcfcfc, 330px 267px #fafafa, 142px 365px #cccccc, 397px 464px #e8e8e8, -178px 467px #d6d6d6, -372px -288px #ededed, -723px -340px #cfcfcf, -46px -159px #ebebeb, 402px 407px #fafafa, 428px 395px #c7c7c7, 632px 68px #dbdbdb, -164px 279px #f7f7f7, 526px 332px #d9d9d9, 443px 282px #d4d4d4, 113px -394px whitesmoke, -546px -16px #e3e3e3, 353px 133px #f0f0f0, 626px 394px #cccccc, -193px -425px whitesmoke, 172px -350px #e0e0e0, -41px 407px whitesmoke, -600px 255px #cfcfcf, -29px -412px #e3e3e3, -97px 143px #ebebeb, 465px -461px #e3e3e3, -737px 336px #e3e3e3, -697px -440px #cccccc, -159px -242px #d4d4d4, 265px 255px #e0e0e0, -713px -212px #dbdbdb, 571px -169px white, 163px -102px #c2c2c2, -480px -477px #e6e6e6, 314px -19px #ebebeb, 175px 359px #ebebeb, 4px -76px #e3e3e3, -285px 320px #ededed, 121px 186px #ededed, -49px -167px #f0f0f0, 683px 182px #f2f2f2, 476px 400px #dedede, -634px 428px #f7f7f7, -200px 11px #c2c2c2, 18px 87px #ededed, -110px -443px #ededed, 511px -308px #d4d4d4, -148px -310px #e3e3e3, 208px -168px #cccccc, -606px 438px white, 175px 192px #c9c9c9, 662px 333px #c4c4c4; 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; }
}
Single element pure CSS 3D starfield - Script Codes
Single element pure CSS 3D starfield - Script Codes
Home Page Home
Developer Keith Clark
Username keithclark
Uploaded August 12, 2022
Rating 4.5
Size 7,338 Kb
Views 42,504
Do you need developer help for Single element pure CSS 3D starfield?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keith Clark (keithclark) Script Codes
Name
A Pen by Keith Clark
Faking gradient transitions
One element CSS Snow
Single element Atari ST demo effect
Zero element CSS tunnel
Pure CSS z-axis scrolling
CSS shaded cubes
Pure CSS parallax demo
Styling the last row of a grid with CSS selectors
Pure CSS starfield
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!