div+css实现隧道星际穿越效果
代码语言:html
所属分类:粒子
代码描述:div+css实现隧道星际穿越效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { padding: 0px; margin: 0px; box-sizing: border-box; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; height: 100vh; width: 100vw; background: #390946; background: radial-gradient(circle, #390946 0%, #38125b 8%, #14001d 36%, black 100%); overflow: hidden; } .container { position: fixed; top: 50%; left: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); /* Can be added for additional effects: animation: rotation 15s linear infinite;*/ } .wrapper { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 500px; height: 500px; -webkit-perspective: 25px; perspective: 25px; } .hole { position: relative; width: 500px; height: 500px; border-radius: 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-150px); transform: translateZ(-150px); background: transparent; } .space-bottom { position: absolute; width: 500px; height: 500px; border-top-left-radius: 50%; border-top-right-radius: 50%; background: transparent; z-index: 2; -webkit-transform: rotateX(-80deg) translateZ(250px); transform: rotateX(-80deg) translateZ(250px); } .space-top { position: absolute; width: 500px; height: 500px; background: transparent; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; -webkit-transform: rotateX(80deg) translateZ(250px); transform: rotateX(80deg) translateZ(250px); } .space-left { position: absolute; width: 500px; height: 500px; border: solid 0px; border-radius: 50%; -webkit-transform: rotateY(-80deg) translateZ(250px); transform: rotateY(-80deg) translateZ(250px); } .space-right { position: absolute; width: 500px; height: 500px; border: solid 0px; border-radius: 50%; -webkit-transform: rotateY(80deg) translateZ(250px); transform: rotateY(80deg) translateZ(250px); } .star-top { position: absolute; left: 0px; width: 1px; height: 20px; opacity: 0; border-radius: 50%; background: #5729ff; box-shadow: 0 0 2px 1px purple; -webkit-animation: stars 1.25s linear infinite; animation: stars 1.25s linear infinite; } .star-top:nth-child(1) { top: calc(50% - -181px); left: calc(80% - 180px); -webkit-animation-delay: 4670ms; animation-delay: 4670ms; } .star-top:nth-child(2) { top: calc(50% - 36px); left: calc(80% - 57px); -webkit-animation-delay: 3615ms; animation-delay: 3615ms; } .star-top:nth-child(3) { top: calc(50% - 140px); left: calc(80% - 50px); -webkit-animation-delay: 844ms; animation-delay: 844ms; } .star-top:nth-child(4) { top: calc(50% - -190px); left: calc(80% - 180px); -webkit-animation-delay: 4079ms; animation-delay: 4079ms; } .star-top:nth-child(5) { top: calc(50% - 187px); left: calc(80% - 19px); -webkit-animation-delay: 698ms; animation-delay: 698ms; } .star-top:nth-child(6) { top: calc(50% - -148px); left: calc(80% - 7px); -webkit-animation-delay: 737ms; animation-delay: 737ms; } .star-top:nth-child(7) { top: calc(50% - -177px); left: calc(80% - 248px); -webkit-animation-delay: 3898ms; animation-delay: 3898ms; } .star-top:nth-child(8) { top: calc(50% - 84px); left: calc(80% - 89px); -webkit-animation-delay: 4665ms; animation-delay: 4665ms; } .star-top:nth-child(9) { top: calc(50% - 198px); left: calc(80% - 4px); -webkit-animation-delay: 2213ms; animation-delay: 2213ms; } .star-top:nth-child(10) { top: calc(50% - -42px); left: calc(80% - 124px); -webkit-animation-delay: 3357ms; animation-delay: 3357ms; } .star-top:nth-child(11) { top: calc(50% - 154px); left: calc(80% - 83px); -webkit-animation-delay: 374ms; animation-delay: 374ms; } .star-top:nth-child(12) { top: calc(50% - -114px); left: calc(80% - 6px); -webkit-animation-delay: 4033ms; animation-delay: 4033ms; } .star-top:nth-child(13) { top: calc(50% - 41px); left: calc(80% - 151px); -webkit-animation-delay: 2597ms; animation-delay: 2597ms; } .star-top:nth-child(14) { top: calc(50% - -11px); left: calc(80% - 192px); -webkit-animation-delay: 3807ms; animation-delay: 3807ms; } .star-top:nth-child(15) { top: calc(50% - -150px); left: calc(80% - 52px); -webkit-animation-delay: 635ms; animation-delay: 635ms; } .star-top:nth-child(16) { top: calc(50% - 78px); left: calc(80% - 188px); -webkit-animation-delay: 3207ms; animation-delay: 3207ms; } .star-top:nth-child(17) { top: calc(50% - 185px); left: calc(80% - 137px); -webkit-animation-delay: 2418ms; animation-delay: 2418ms; } .star-top:nth-child(18) { top: calc(50% - -199px); left: calc(80% - 165px); -webkit-animation-delay: 2875ms; animation-delay: 2875ms; } .star-top:nth-child(19) { top: calc(50% - -56px); left: calc(80% - 23px); -webkit-animation-delay: 3194ms; animation-delay: 3194ms; } .star-top:nth-child(20) { top: calc(50% - -170px); left: calc(80% - 134px); -webkit-animation-delay: 1279ms; animation-delay: 1279ms; } .star-top:nth-child(21) { top: calc(50% - 96px); left: calc(80% - 259px); -webkit-animation-delay: 2372ms; animation-delay: 2372ms; } .star-top:nth-child(22) { top: calc(50% - -118px); left: calc(80% - 86px); -webkit-animation-delay: 4242ms; animation-delay: 4242ms; } .star-top:nth-child(23) { top: calc(50% - 125px); left: calc(80% - 167px); -webkit-animation-delay: 1165ms; animation-delay: 1165ms; } .star-top:nth-child(24) { top: calc(50% - 68px); left: calc(80% - 294px); -webkit-animation-delay: 4352ms; animation-delay: 4352ms; } .star-top:nth-child(25) { top: calc(50% - 51px); left: calc(80% - 47px); -webkit-animation-delay: 4646ms; animation-delay: 4646ms; } .star-top:nth-child(26) { top: calc(50% - 166px); left: calc(80% - 5px); -webkit-animation-delay: 4165ms; animation-delay: 4165ms; } .star-top:nth-child(27) { top: calc(50% - -175px); left: calc(80% - 152px); -webkit-animation-delay: 1491ms; animation-delay: 1491ms; } .star-top:nth-child(28) { top: calc(50% - -147px); left: calc(80% - 97px); -webkit-animation-delay: 2743ms; animation-delay: 2743ms; } .star-top:nth-child(29) { top: calc(50% - 66px); left: calc(80% - 251px); -webkit-animation-delay: 4021ms; animation-delay: 4021ms; } .star-top:nth-child(30) { top: calc(50% - -15px); left: calc(80% - 27px); -webkit-animation-delay: 478ms; animation-delay: 478ms; } .star-bottom { position: absolute; left: 0px; width: 1px; height: 20px; opacity: 0; border-radius: 50%; background: #5729ff; box-shadow: 0 0 2px 1px purple; animation: stars 1.25s linear infinite reverse; } .star-bottom:nth-child(1) { top: calc(20% - 51px); left: calc(80% - 186px); -webkit-animation-delay: 489ms; animation-delay: 489ms; } .star-bottom:nth-child(2) { top: calc(20% - 174px); left: calc(80% - 35px); -webkit-animation-delay: 215ms; animation-delay: 215ms; } .star-bottom:nth-child(3) { top: calc(20% - 151px); left: calc(80% - 223px); -webkit-animation-delay: 1583ms; animation-delay: 1583ms; } .star-bottom:nth-child(4) { top: calc(20% - 175px); left: calc(80% - 122px); -webkit-animation-delay: 2745ms; animation-delay: 2745ms; } .star-bottom:nth-child(5) { top: calc(20% - 180px); left: calc(80% - 299px); -webkit-animation-delay: 2858ms; animation-delay: 2858ms; } .star-bottom:nth-child(6) { top: calc(20% - 126px); left: calc(80% - 280px); -webkit-animation-delay: 4766ms; animation-delay: 4766ms; } .star-bottom:nth-child(7) { top: calc(20% - 158px); left: calc(80% - 281px); -webkit-animation-delay: 3597ms; animation-delay: 3597ms; } .star-bottom:nth-child(8) { top: calc(20% - -95px); left: calc(80% - 54px); -webkit-animation-delay: 3617ms; animation-delay: 3617ms; } .star-bottom:nth-child(9) { top: calc(20% - 103px); left: calc(80% - 258px); -webkit-animation-delay: 2957ms; animation-delay: 2957ms; } .star-bottom:nth-child(10) { top: calc(20% - -15px); left: calc(80% - 282px); -webkit-animation-delay: 1722ms; animation-delay: 1722ms; } .star-bottom:nth-child(11) { top: calc(20% - -166px); left: calc(80% - 126px); -webkit-animation-delay: 2079ms; animation-delay: 2079ms; } .star-bottom:nth-child(12) { top: calc(20% - 126px); left: calc(80% - 14px); -webkit-animation-delay: 2083ms; animation-delay: 2083ms; } .star-bottom:nth-child(13) { top: calc(20% - -128px); left: calc(80% - 295px); -webkit-animation-delay: 4100ms; animation-delay: 4100ms; } .star-bottom:nth-child(14) { top: calc(20% - -38px); left: calc(80% - 54px); -webkit-animation-delay: 2948ms; animation-delay: 2948ms; } .star-bottom:nth-child(15) { top: calc(20% - 22px); left: calc(80% - 208px); -webkit-animation-delay: 212ms; animation-delay: 212ms; } .star-bottom:nth-child(16) { top: calc(20% - -6px); left: calc(80% - 290px); -webkit-animation-delay: 2261ms; animation-delay: 2261ms; } .star-bottom:nth-child(17) { top: calc(20% - 169px); left: calc(80% - 14px); -webkit-animation-delay: 1955ms; animation-delay: 1955ms; } .star-bottom:nth-child(18) { top: calc(20% - 41px); left: calc(80% - 37px); -webkit-animation-delay: 123ms; animation-delay: 123ms; } .star-bottom:nth-child(19) { top: calc(20% - 127px); left: calc(80% - 6px); -webkit-animation-delay: 673ms; animation-delay: 673ms; } .star-bottom:nth-child(20) { top: calc(20% - 165px); left: calc(80% - 296px); -webkit-animation-delay: 3225ms; animation-delay: 3225ms; } .star-bottom:nth-child(21) { top: calc(20% - -33px); left: calc(80% - 208px); -webkit-animation-delay: 844ms; animation-delay: 844ms; } .star-bottom:nth-child(22) { top: calc(20% - 108px); left: calc(80% - 291px); -webkit-animation-delay: 3250ms; animation-delay: 3250ms; } .star-bottom:nth-child(23) { top: calc(20% - 184px); left: calc(80% - 80px); -webkit-animation-delay: 3324ms; animation-delay: 3324ms; } .star-bottom:nth-child(24) { top: calc(20% - 124px); left: calc(80% - 294px); -webkit-animation-delay: 1041ms; animation-delay: 1041ms; } .star-bottom:nth-child(25) { top: calc(20% - -18px); left: calc(80% - 246px); -webkit-animation-delay: 312ms; animation-delay: 312ms; } .star-bottom:nth-child(26) { top: calc(20% - 47px); left: calc(80% - 55px); -webkit-animation-delay: 1685ms; animation-delay: 1685ms; } .star-bottom:nth-child(27) { top: calc(20% - 126px); left: calc(80% - 111px); -webkit-animation-delay: 1705ms; animation-delay: 1705ms; } .star-bottom:nth-child(28) { top: calc(20% - 68px); left: calc(80% - 281px); -webkit-animation-delay: 1712ms; animation-delay: 1712ms; } .star-bottom:nth-child(29) { top: calc(20% - 17px); left: calc(80% - 194px); -webkit-animation-delay: 4485ms; animation-delay: 4485ms; } .star-bottom:nth-child(30) { top: calc(20% - 85px); left: calc(80% - 20px); -webkit-animation-delay: 1584ms; animation-delay: 1584ms; } .star-left { position: absolute; width: 20px; height: 1px; opacity: 0; border-radius: 50%; background: #5729ff; box-shadow: 0 0 2px 1px purple; animation: stars2 1.25s linear infinite reverse; } .star-left:nth-child(1) { top: calc(50% - -176px); left: calc(100% - 158px); -webkit-animation-delay: 1627ms; animation-delay: 1627ms; } .star-left:nth-child(2) { top: calc(50% - -174px); left: calc(100% - 73px); -webkit-animation-delay: 3746ms; animation-delay: 3746ms; } .star-left:nth-child(3) { top: calc(50% - 174px); left: calc(100% - 89px); -webkit-animation-delay: 3316ms; animation-delay: 3316ms; } .star-left:nth-child(4) { top: calc(50% - -135px); left: calc(100% - 146px); -webkit-animation-delay: 3220ms; animation-delay: 3220ms; } .star-left:nth-child(5) { top: calc(50% - -85px); left: calc(100% - 93px); -webkit-animation-delay: 1922ms; animation-delay: 1922ms; } .star-left:nth-child(6) { top: calc(50% - 39px); left: calc(100% - 24px); -webkit-animation-delay: 1313ms; animation-delay: 1313ms; } .star-left:nth-child(7) { top: calc(50% - 110px); left: calc(100% - 11px); -webkit-animation-delay: 1556ms; animation-delay: 1556ms; } .star-left:nth-child(8) { top: calc(50% - -142px); left: calc(100% - 73px); -webkit-animation-delay: 4379ms; animation-delay: 4379ms; } .star-left:nth-child(9) { top: calc(50% - 2px); left: calc(100% - 122px); -webkit-animation-delay: 2206ms; animation-delay: 2206ms; } .star-left:nth-child(10) { top: calc(50% - -116px); left: calc(100% - 70px); -webkit-animation-delay: 2568ms; animation-delay: 2568ms; } .star-left:nth-child(11) { top: calc(50% - -51px); left: calc(100% - 48px); -webkit-animation-delay: 4639ms; animation-delay: 4639ms; } .star-left:nth-child(12) { top: calc(50% - -32px); left: calc(100% - 122px); -webkit-animation-delay: 442ms; animation-delay: 442ms; } .star-left:nth-child(13) { top: calc(50% - -91px); left: calc(100% - 156px); -webkit-animation-delay: 221ms; animation-delay: 221ms; } .star-left:nth-child(14) { top: calc(50% - 36px); left: calc(100% - 137px); -webkit-animation-delay: 3127ms; animation-delay: 3127ms; } .star-left:nth-child(15) { top: calc(50% - -93px); left: calc(100% - 148px); -webkit-animation-delay: 4858ms; animation-delay: 4858ms; } .star-left:nth-child(16) { top: calc(50% - 3px); left: calc(100% - 59px); -webkit-animation-delay: 110ms; animation-delay: 110ms; } .star-left:nth-child(17) { top: calc(50% - -190px); left: calc(100% - 106px); -webkit-animation-delay: 4622ms; animation-delay: 4622ms; } .star-left:nth-child(18) { top: calc(50% - -174px); left: calc(100% - 126px); -webkit-animation-delay: 1032ms; animation-delay: 1032ms; } .star-left:nth-child(19) { top: calc(50% - -2px); left: calc(100% - 60px); -webkit-animation-delay: 2386ms; animation-delay: 2386ms; } .star-left:nth-child(20) { top: calc(50% - 9px); left: calc(100% - 100px); -webkit-animation-delay: 3486ms; animation-delay: 3486ms; } .star-left:nth-child(21) { top: calc(50% - -51px); left: calc(100% - 65px); -webkit-animation-delay: 2989ms; animation-delay: 2989ms; } .star-left:nth-child(22) { top: calc(50% - 197px); left: calc(100% - 188px); -webkit-animation-delay: 1886ms; animation-delay: 1886ms; } .star-left:nth-child(23) { top: calc(50% - -198px); left: calc(100% - 47px); -webkit-animation-delay: 1954ms; animation-delay: 1954ms; } .star-left:nth-child(24) { top: calc(50% - -108px); left: calc(100% - 13px); -webkit-animation-delay: 565ms; animation-delay: 565ms; } .star-left:nth-child(25) { top: calc(50% - 164px); left: calc(100% - 52px); -webkit-animation-delay: 3295ms; animation-delay: 3295ms; } .star-left:nth-child(26) { top: calc(50% - 17px); left: calc(100% - 58px); -webkit-animation-delay: 4705ms; animation-delay: 4705ms; } .star-left:nth-child(27) { top: calc(50% - -137px); left: calc(100% - 109px); -webkit-animation-delay: 2839ms; animation-delay: 2839ms; } .star-left:nth-child(28) { top: calc(50% - 111px); left: calc(100% - 160px); -webkit-animation-delay: 730ms; animation-delay: 730ms; } .star-left:nth-child(29) { top: calc(50% - 175px); left: calc(100% - 9px); -webkit-animation-delay: 1351ms; animation-delay: 1351ms; } .star-left:nth-child(30) { top: calc(50% - -69px); left: calc(100% - 117px); -webkit-animation-delay: 1479ms; animation-delay: 1479ms; } .star-right { position: absolute; top: 0px; width: 20px; height: 1px; opacity: 0; border-radius: 50%; background: #5729ff; box-shadow: 0 0 2px 1px purple; -webkit-animation: stars2 1.25s linear infinite; animation: stars2 1.25s linear infinite; } .star-right:nth-child(1) { top: calc(50% - 124px); left: calc(90% - 152px); -webkit-animation-delay: 3381ms; animation-delay: 3381ms; } .star-right:nth-child(2) { top: calc(50% - 0px); left: calc(90% - 185px); -webkit-animation-delay: 2422ms; animation-delay: 2422ms; } .star-right:nth-child(3) { top: calc(50% - -26px); left: calc(90% - 251px); -webkit-animation-delay: 4739ms; animation-delay: 4739ms; } .star-right:nth-child(4) { top: calc(50% - 165px); left: calc(90% - 156px); -webkit-animation-delay: 2478ms; animation-delay: 2478ms; } .star-right:nth-child(5) { top: calc(50% - -157px); left: calc(90% - 107px); -webkit-animation-delay: 1662ms; animation-delay: 1662ms; } .star-right:nth-child(6) { top: calc(50% - 44px); left: calc(90% - 212px); -webkit-animation-delay: 4740ms; animation-delay: 4740ms; } .star-right:nth-child(7) { top: calc(50% - -66px); left: calc(90% - 228px); -webkit-animation-delay: 1521ms; animation-delay: 1521ms; } .star-right:nth-child(8) { top: calc(50% - -134px); left: calc(90% - 171px); -webkit-animation-delay: 4266ms; animation-delay: 4266ms; } .star-right:nth-child(9) { top: calc(50% - -176px); left: calc(90% - 267px); -webkit-animation-delay: 3028ms; animation-delay: 3028ms; } .star-right:nth-child(10) { top: calc(50% - 178px); left: calc(90% - 48px); -webkit-animation-delay: 3489ms; animation-delay: 3489ms; } .star-right:nth-child(11) { top: calc(50% - 69px); left: calc(90% - 58px); -webkit-animation-delay: 1935ms; animation-delay: 1935ms; } .star-right:nth-child(12) { top: calc(50% - 62px); left: calc(90% - 221px); -webkit-animation-delay: 2096ms; animation-delay: 2096ms; } .star-right:nth-child(13) { top: calc(50% - -86px); left: calc(90% - 245px); -webkit-animation-delay: 1418ms; animation-delay: 1418ms; } .star-right:nth-child(14) { top: calc(50% - -130px); left: calc(90% - 249px); -webkit-animation-delay: 3822ms; animation-delay: 3822ms; } .star-right:nth-child(15) { top: calc(50% - -169px); left: calc(90% - 261px); -webkit-animation-delay: 4355ms; animation-delay: 4355ms; } .star-right:nth-child(16) { top: calc(50% - -74px); left: calc(90% - 257px); -webkit-animation-delay: 197ms; animation-delay: 197ms; } .star-right:nth-child(17) { top: calc(50% - -131px); left: calc(90% - 80px); -webkit-animation-delay: 1029ms; animation-delay: 1029ms; } .star-right:nth-child(18) { top: calc(50% - -134px); left: calc(90% - 64px); -webkit-animation-delay: 2594ms; animation-delay: 2594ms; } .star-right:nth-child(19) { top: calc(50% - -114px); left: calc(90% - 158px); -webkit-animation-delay: 1539ms; animation-delay: 1539ms; } .star-right:nth-child(20) { top: calc(50% - 97px); left: calc(90% - 115px); -webkit-animation-delay: 1800ms; animation-delay: 1800ms; } .star-right:nth-child(21) { top: calc(50% - -97px); left: calc(90% - 211px); -webkit-animation-delay: 1413ms; animation-delay: 1413ms; } .star-right:nth-child(22) { top: calc(50% - 144px); left: calc(90% - 164px); -webkit-animation-delay: 3411ms; animation-delay: 3411ms; } .star-right:nth-child(23) { top: calc(50% - -16px); left: calc(90% - 21px); -webkit-animation-delay: 3069ms; animation-delay: 3069ms; } .star-right:nth-child(24) { top: calc(50% - -31px); left: calc(90% - 188px); -webkit-animation-delay: 2690ms; animation-delay: 2690ms; } .star-right:nth-child(25) { top: calc(50% - 123px); left: calc(90% - 126px); -webkit-animation-delay: 2202ms; animation-delay: 2202ms; } .star-right:nth-child(26) { top: calc(50% - -24px); left: calc(90% - 50px); -webkit-animation-delay: 2501ms; animation-delay: 2501ms; } .star-right:nth-child(27) { top: calc(50% - 160px); left: calc(90% - 284px); -webkit-animation-delay: 2568ms; animation-delay: 2568ms; } .star-right:nth-child(28) { top: calc(50% - -147px); left: calc(90% - 167px); -webkit-animation-delay: 585ms; animation-delay: 585ms; } .star-right:nth-child(29) { top: calc(50% - 162px); left: calc(90% - 12px); -webkit-animation-delay: 951ms; animation-delay: 951ms; } .star-right:nth-child(30) { top: calc(50% - 21px); left: calc(90% - 77px); -webkit-animation-delay: 1046ms; animation-delay: 1046ms; } /*second container for 50px perspective*/ .container2 { position: fixed; top: 50%; left: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .wrapper2 { position: fixed; top: 50%; left: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 500px; height: 500px; -webkit-perspective: 50px; perspective: 50px; } .hole2 { position: relative; width: 500px; height: 500px; border-radius: 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-150px); transform: translateZ(-150px); background: transparent; } /*third container for 100px perspective*/ .container3 { position: fixed; top: 50%; left: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); } .wrapper3 { position: fixed; top: 50%; left: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 500px; height: 500px; -webkit-perspective: 100px; perspective: 100px; } .hole3 { position: relative; width: 500px; height: 500px; border-radius: 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-150px); transform: translateZ(-150px); background: transparent; } /*fourth container for 125px perspective*/ .container4 { position: fixed; top: 50%; left: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%) rotate(225deg); transform: translate(-50%, -50%) rotate(225deg); } .wrapper4 { position: fixed; top: 50%; left: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 500px; height: 500px; -webkit-perspective: 125px; perspective: 125px; } .hole4 { position: relative; width: 500px; height: 500px; border-radius: 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-150px); transform: translateZ(-150px); background: transparent; } @-webkit-keyframes stars { 0% { opacity: 1; -webkit-transform: translatex(0px) translatey(0xp) translatez(0px); transform: translatex(0px) translatey(0xp) translatez(0px); } 100% { opacity: 1; -webkit-transform: translatex(25px) translatey(250px) translatez(-1000px); transform: translatex(25px) translatey(250px) translatez(-1000px); } } @keyframes stars { 0% { opacity: 1; -webkit-transform: translatex(0px) translatey(0xp) translatez(0px); transform: translatex(0px) translatey(0xp) translatez(0px); } 100% { opacity: 1; -webkit-transform: translatex(25px) translatey(250px) translatez(-1000px); transform: translatex(25px) translatey(250px) translatez(-1000px); } } @-webkit-keyframes stars2 { 0% { opacity: 1; -webkit-transform: translatex(0px) translatey(0xp) translatez(0px); transform: translatex(0px) translatey(0xp) translatez(0px); } 100% { opacity: 1; -webkit-transform: translatex(-250px) translatey(25px) translatez(-1000px); transform: translatex(-250px) translatey(25px) translatez(-1000px); } } @keyframes stars2 { 0% { opacity: 1; -webkit-transform: translatex(0px) translatey(0xp) translatez(0px); transform: translatex(0px) translatey(0xp) translatez(0px); } 100% { opacity: 1; -webkit-transform: translatex(-250px) translatey(25px) translatez(-1000px); transform: translatex(-250px) translatey(25px) translatez(-1000px); } } @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } </style> </head> <body translate="no"> <div class="container"> <div class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0