仪表板动效元素：旋转的3D星云
在仪表板设计时，经常需要添加一些动效来提升视觉冲击力，这个帖子主要介旋转的3D星云。实现步骤：
1、在仪表板中添加外部扩展
2、将以下代码粘贴到外部扩展的Html视图中，点击确定
<html>
<head>
<style>
body {
height: 100vh;
overflow: hidden;
}
.sky {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);
width: 200px;
height: 200px;
-webkit-clip-path: circle(200px at center);
clip-path: circle(200px at center);
}
.star {
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
background: #fff;
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-webkit-animation: bling 6000ms linear infinite;
animation: bling 6000ms linear infinite;
}
.star:nth-child(1) {
top: calc(50% - 99px);
left: calc(50% - -53px);
-webkit-animation-delay: -2771ms;
animation-delay: -2771ms;
}
.star:nth-child(2) {
top: calc(50% - 120px);
left: calc(50% - -58px);
-webkit-animation-delay: -4229ms;
animation-delay: -4229ms;
}
.star:nth-child(3) {
top: calc(50% - 13px);
left: calc(50% - 39px);
-webkit-animation-delay: -1152ms;
animation-delay: -1152ms;
}
.star:nth-child(4) {
top: calc(50% - 172px);
left: calc(50% - -126px);
-webkit-animation-delay: -2856ms;
animation-delay: -2856ms;
}
.star:nth-child(5) {
top: calc(50% - -167px);
left: calc(50% - 3px);
-webkit-animation-delay: -3949ms;
animation-delay: -3949ms;
}
.star:nth-child(6) {
top: calc(50% - -29px);
left: calc(50% - 143px);
-webkit-animation-delay: -758ms;
animation-delay: -758ms;
}
.star:nth-child(7) {
top: calc(50% - -171px);
left: calc(50% - -75px);
-webkit-animation-delay: -4609ms;
animation-delay: -4609ms;
}
.star:nth-child(8) {
top: calc(50% - 121px);
left: calc(50% - -88px);
-webkit-animation-delay: -4729ms;
animation-delay: -4729ms;
}
.star:nth-child(9) {
top: calc(50% - 60px);
left: calc(50% - -62px);
-webkit-animation-delay: -676ms;
animation-delay: -676ms;
}
.star:nth-child(10) {
top: calc(50% - 161px);
left: calc(50% - 51px);
-webkit-animation-delay: -4653ms;
animation-delay: -4653ms;
}
.star:nth-child(11) {
top: calc(50% - -60px);
left: calc(50% - 157px);
-webkit-animation-delay: -2966ms;
animation-delay: -2966ms;
}
.star:nth-child(12) {
top: calc(50% - -50px);
left: calc(50% - -35px);
-webkit-animation-delay: -1943ms;
animation-delay: -1943ms;
}
.star:nth-child(13) {
top: calc(50% - 172px);
left: calc(50% - -125px);
-webkit-animation-delay: -4366ms;
animation-delay: -4366ms;
}
.star:nth-child(14) {
top: calc(50% - 51px);
left: calc(50% - -118px);
-webkit-animation-delay: -5074ms;
animation-delay: -5074ms;
}
.star:nth-child(15) {
top: calc(50% - -43px);
left: calc(50% - 162px);
-webkit-animation-delay: -3419ms;
animation-delay: -3419ms;
}
.star:nth-child(16) {
top: calc(50% - 1px);
left: calc(50% - -87px);
-webkit-animation-delay: -4117ms;
animation-delay: -4117ms;
}
.star:nth-child(17) {
top: calc(50% - 2px);
left: calc(50% - -20px);
-webkit-animation-delay: -5950ms;
animation-delay: -5950ms;
}
.star:nth-child(18) {
top: calc(50% - 60px);
left: calc(50% - 101px);
-webkit-animation-delay: -3771ms;
animation-delay: -3771ms;
}
.star:nth-child(19) {
top: calc(50% - 192px);
left: calc(50% - -187px);
-webkit-animation-delay: -1507ms;
animation-delay: -1507ms;
}
.star:nth-child(20) {
top: calc(50% - -21px);
left: calc(50% - -190px);
-webkit-animation-delay: -5776ms;
animation-delay: -5776ms;
}
.star:nth-child(21) {
top: calc(50% - -113px);
left: calc(50% - -141px);
-webkit-animation-delay: -3670ms;
animation-delay: -3670ms;
}
.star:nth-child(22) {
top: calc(50% - -49px);
left: calc(50% - 189px);
-webkit-animation-delay: -5732ms;
animation-delay: -5732ms;
}
.star:nth-child(23) {
top: calc(50% - 127px);
left: calc(50% - -75px);
-webkit-animation-delay: -1006ms;
animation-delay: -1006ms;
}
.star:nth-child(24) {
top: calc(50% - 102px);
left: calc(50% - -21px);
-webkit-animation-delay: -5114ms;
animation-delay: -5114ms;
}
.star:nth-child(25) {
top: calc(50% - 83px);
left: calc(50% - -196px);
-webkit-animation-delay: -1280ms;
animation-delay: -1280ms;
}
.star:nth-child(26) {
top: calc(50% - 142px);
left: calc(50% - -96px);
-webkit-animation-delay: -4913ms;
animation-delay: -4913ms;
}
.star:nth-child(27) {
top: calc(50% - 22px);
left: calc(50% - -135px);
-webkit-animation-delay: -4659ms;
animation-delay: -4659ms;
}
.star:nth-child(28) {
top: calc(50% - -63px);
left: calc(50% - -88px);
-webkit-animation-delay: -3597ms;
animation-delay: -3597ms;
}
.star:nth-child(29) {
top: calc(50% - 15px);
left: calc(50% - -48px);
-webkit-animation-delay: -3570ms;
animation-delay: -3570ms;
}
.star:nth-child(30) {
top: calc(50% - 16px);
left: calc(50% - -173px);
-webkit-animation-delay: -5241ms;
animation-delay: -5241ms;
}
.star:nth-child(31) {
top: calc(50% - 114px);
left: calc(50% - -168px);
-webkit-animation-delay: -4384ms;
animation-delay: -4384ms;
}
.star:nth-child(32) {
top: calc(50% - 198px);
left: calc(50% - 72px);
-webkit-animation-delay: -5621ms;
animation-delay: -5621ms;
}
.star:nth-child(33) {
top: calc(50% - 151px);
left: calc(50% - -96px);
-webkit-animation-delay: -935ms;
animation-delay: -935ms;
}
.star:nth-child(34) {
top: calc(50% - 119px);
left: calc(50% - 129px);
-webkit-animation-delay: -2048ms;
animation-delay: -2048ms;
}
.star:nth-child(35) {
top: calc(50% - -130px);
left: calc(50% - 58px);
-webkit-animation-delay: -1109ms;
animation-delay: -1109ms;
}
.star:nth-child(36) {
top: calc(50% - 140px);
left: calc(50% - -89px);
-webkit-animation-delay: -4495ms;
animation-delay: -4495ms;
}
.star:nth-child(37) {
top: calc(50% - -11px);
left: calc(50% - 146px);
-webkit-animation-delay: -5122ms;
animation-delay: -5122ms;
}
.star:nth-child(38) {
top: calc(50% - -69px);
left: calc(50% - 22px);
-webkit-animation-delay: -49ms;
animation-delay: -49ms;
}
.star:nth-child(39) {
top: calc(50% - 186px);
left: calc(50% - -95px);
-webkit-animation-delay: -2373ms;
animation-delay: -2373ms;
}
.star:nth-child(40) {
top: calc(50% - -170px);
left: calc(50% - -108px);
-webkit-animation-delay: -160ms;
animation-delay: -160ms;
}
.star:nth-child(41) {
top: calc(50% - -94px);
left: calc(50% - -43px);
-webkit-animation-delay: -1957ms;
animation-delay: -1957ms;
}
.star:nth-child(42) {
top: calc(50% - 196px);
left: calc(50% - 88px);
-webkit-animation-delay: -2218ms;
animation-delay: -2218ms;
}
.star:nth-child(43) {
top: calc(50% - -72px);
left: calc(50% - 111px);
-webkit-animation-delay: -3060ms;
animation-delay: -3060ms;
}
.star:nth-child(44) {
top: calc(50% - -35px);
left: calc(50% - -166px);
-webkit-animation-delay: -3912ms;
animation-delay: -3912ms;
}
.star:nth-child(45) {
top: calc(50% - 115px);
left: calc(50% - 102px);
-webkit-animation-delay: -3187ms;
animation-delay: -3187ms;
}
.star:nth-child(46) {
top: calc(50% - 100px);
left: calc(50% - -103px);
-webkit-animation-delay: -3735ms;
animation-delay: -3735ms;
}
.star:nth-child(47) {
top: calc(50% - -73px);
left: calc(50% - 59px);
-webkit-animation-delay: -5804ms;
animation-delay: -5804ms;
}
.star:nth-child(48) {
top: calc(50% - 170px);
left: calc(50% - -165px);
-webkit-animation-delay: -4943ms;
animation-delay: -4943ms;
}
.star:nth-child(49) {
top: calc(50% - 26px);
left: calc(50% - -157px);
-webkit-animation-delay: -2369ms;
animation-delay: -2369ms;
}
.star:nth-child(50) {
top: calc(50% - 109px);
left: calc(50% - 80px);
-webkit-animation-delay: -3713ms;
animation-delay: -3713ms;
}
.star:nth-child(51) {
top: calc(50% - 59px);
left: calc(50% - 73px);
-webkit-animation-delay: -3776ms;
animation-delay: -3776ms;
}
.star:nth-child(52) {
top: calc(50% - 49px);
left: calc(50% - 90px);
-webkit-animation-delay: -5013ms;
animation-delay: -5013ms;
}
.star:nth-child(53) {
top: calc(50% - -42px);
left: calc(50% - -170px);
-webkit-animation-delay: -1640ms;
animation-delay: -1640ms;
}
.star:nth-child(54) {
top: calc(50% - -163px);
left: calc(50% - -124px);
-webkit-animation-delay: -1954ms;
animation-delay: -1954ms;
}
.star:nth-child(55) {
top: calc(50% - 144px);
left: calc(50% - 139px);
-webkit-animation-delay: -3679ms;
animation-delay: -3679ms;
}
.star:nth-child(56) {
top: calc(50% - 1px);
left: calc(50% - 58px);
-webkit-animation-delay: -4701ms;
animation-delay: -4701ms;
}
.star:nth-child(57) {
top: calc(50% - 12px);
left: calc(50% - 45px);
-webkit-animation-delay: -841ms;
animation-delay: -841ms;
}
.star:nth-child(58) {
top: calc(50% - -17px);
left: calc(50% - 151px);
-webkit-animation-delay: -5436ms;
animation-delay: -5436ms;
}
.star:nth-child(59) {
top: calc(50% - 155px);
left: calc(50% - 50px);
-webkit-animation-delay: -3018ms;
animation-delay: -3018ms;
}
.star:nth-child(60) {
top: calc(50% - 82px);
left: calc(50% - -19px);
-webkit-animation-delay: -1827ms;
animation-delay: -1827ms;
}
.star:nth-child(61) {
top: calc(50% - 133px);
left: calc(50% - -186px);
-webkit-animation-delay: -2440ms;
animation-delay: -2440ms;
}
.star:nth-child(62) {
top: calc(50% - 161px);
left: calc(50% - -91px);
-webkit-animation-delay: -2115ms;
animation-delay: -2115ms;
}
.star:nth-child(63) {
top: calc(50% - 115px);
left: calc(50% - -25px);
-webkit-animation-delay: -3084ms;
animation-delay: -3084ms;
}
.star:nth-child(64) {
top: calc(50% - 69px);
left: calc(50% - 116px);
-webkit-animation-delay: -4145ms;
animation-delay: -4145ms;
}
.star:nth-child(65) {
top: calc(50% - -162px);
left: calc(50% - 16px);
-webkit-animation-delay: -5416ms;
animation-delay: -5416ms;
}
.star:nth-child(66) {
top: calc(50% - 63px);
left: calc(50% - 30px);
-webkit-animation-delay: -2346ms;
animation-delay: -2346ms;
}
.star:nth-child(67) {
top: calc(50% - 130px);
left: calc(50% - 41px);
-webkit-animation-delay: -4615ms;
animation-delay: -4615ms;
}
.star:nth-child(68) {
top: calc(50% - -163px);
left: calc(50% - 154px);
-webkit-animation-delay: -4353ms;
animation-delay: -4353ms;
}
.star:nth-child(69) {
top: calc(50% - 127px);
left: calc(50% - -102px);
-webkit-animation-delay: -5512ms;
animation-delay: -5512ms;
}
.star:nth-child(70) {
top: calc(50% - 157px);
left: calc(50% - -56px);
-webkit-animation-delay: -147ms;
animation-delay: -147ms;
}
.star:nth-child(71) {
top: calc(50% - 176px);
left: calc(50% - 66px);
-webkit-animation-delay: -2736ms;
animation-delay: -2736ms;
}
.star:nth-child(72) {
top: calc(50% - -24px);
left: calc(50% - -13px);
-webkit-animation-delay: -5008ms;
animation-delay: -5008ms;
}
.star:nth-child(73) {
top: calc(50% - -176px);
left: calc(50% - -113px);
-webkit-animation-delay: -5318ms;
animation-delay: -5318ms;
}
.star:nth-child(74) {
top: calc(50% - -185px);
left: calc(50% - -15px);
-webkit-animation-delay: -5188ms;
animation-delay: -5188ms;
}
.star:nth-child(75) {
top: calc(50% - -33px);
left: calc(50% - 3px);
-webkit-animation-delay: -4741ms;
animation-delay: -4741ms;
}
.star:nth-child(76) {
top: calc(50% - -128px);
left: calc(50% - -16px);
-webkit-animation-delay: -2686ms;
animation-delay: -2686ms;
}
.star:nth-child(77) {
top: calc(50% - -49px);
left: calc(50% - -155px);
-webkit-animation-delay: -5235ms;
animation-delay: -5235ms;
}
.star:nth-child(78) {
top: calc(50% - 142px);
left: calc(50% - 168px);
-webkit-animation-delay: -3718ms;
animation-delay: -3718ms;
}
.star:nth-child(79) {
top: calc(50% - 10px);
left: calc(50% - -177px);
-webkit-animation-delay: -2866ms;
animation-delay: -2866ms;
}
.star:nth-child(80) {
top: calc(50% - -169px);
left: calc(50% - 28px);
-webkit-animation-delay: -3983ms;
animation-delay: -3983ms;
}
.star:nth-child(81) {
top: calc(50% - -118px);
left: calc(50% - 166px);
-webkit-animation-delay: -678ms;
animation-delay: -678ms;
}
.star:nth-child(82) {
top: calc(50% - 74px);
left: calc(50% - -25px);
-webkit-animation-delay: -5979ms;
animation-delay: -5979ms;
}
.star:nth-child(83) {
top: calc(50% - -64px);
left: calc(50% - 108px);
-webkit-animation-delay: -3358ms;
animation-delay: -3358ms;
}
.star:nth-child(84) {
top: calc(50% - -192px);
left: calc(50% - -90px);
-webkit-animation-delay: -498ms;
animation-delay: -498ms;
}
.star:nth-child(85) {
top: calc(50% - -121px);
left: calc(50% - -142px);
-webkit-animation-delay: -4997ms;
animation-delay: -4997ms;
}
.star:nth-child(86) {
top: calc(50% - 117px);
left: calc(50% - -89px);
-webkit-animation-delay: -1728ms;
animation-delay: -1728ms;
}
.star:nth-child(87) {
top: calc(50% - -33px);
left: calc(50% - 42px);
-webkit-animation-delay: -1166ms;
animation-delay: -1166ms;
}
.star:nth-child(88) {
top: calc(50% - -55px);
left: calc(50% - -95px);
-webkit-animation-delay: -4960ms;
animation-delay: -4960ms;
}
.star:nth-child(89) {
top: calc(50% - -59px);
left: calc(50% - 101px);
-webkit-animation-delay: -3747ms;
animation-delay: -3747ms;
}
.star:nth-child(90) {
top: calc(50% - -58px);
left: calc(50% - -16px);
-webkit-animation-delay: -1762ms;
animation-delay: -1762ms;
}
.star:nth-child(91) {
top: calc(50% - -36px);
left: calc(50% - -18px);
-webkit-animation-delay: -1721ms;
animation-delay: -1721ms;
}
.star:nth-child(92) {
top: calc(50% - -28px);
left: calc(50% - 56px);
-webkit-animation-delay: -4876ms;
animation-delay: -4876ms;
}
.star:nth-child(93) {
top: calc(50% - -55px);
left: calc(50% - 149px);
-webkit-animation-delay: -3748ms;
animation-delay: -3748ms;
}
.star:nth-child(94) {
top: calc(50% - -48px);
left: calc(50% - 166px);
-webkit-animation-delay: -5198ms;
animation-delay: -5198ms;
}
.star:nth-child(95) {
top: calc(50% - -130px);
left: calc(50% - -177px);
-webkit-animation-delay: -1185ms;
animation-delay: -1185ms;
}
.star:nth-child(96) {
top: calc(50% - -1px);
left: calc(50% - 32px);
-webkit-animation-delay: -5094ms;
animation-delay: -5094ms;
}
.star:nth-child(97) {
top: calc(50% - 14px);
left: calc(50% - 48px);
-webkit-animation-delay: -4713ms;
animation-delay: -4713ms;
}
.star:nth-child(98) {
top: calc(50% - -184px);
left: calc(50% - 83px);
-webkit-animation-delay: -619ms;
animation-delay: -619ms;
}
.star:nth-child(99) {
top: calc(50% - -51px);
left: calc(50% - 61px);
-webkit-animation-delay: -2759ms;
animation-delay: -2759ms;
}
.star:nth-child(100) {
top: calc(50% - -181px);
left: calc(50% - 189px);
-webkit-animation-delay: -3092ms;
animation-delay: -3092ms;
}
.star:nth-child(101) {
top: calc(50% - -156px);
left: calc(50% - -35px);
-webkit-animation-delay: -4735ms;
animation-delay: -4735ms;
}
.star:nth-child(102) {
top: calc(50% - 184px);
left: calc(50% - -194px);
-webkit-animation-delay: -3321ms;
animation-delay: -3321ms;
}
.star:nth-child(103) {
top: calc(50% - 105px);
left: calc(50% - -33px);
-webkit-animation-delay: -3004ms;
animation-delay: -3004ms;
}
.star:nth-child(104) {
top: calc(50% - 36px);
left: calc(50% - -97px);
-webkit-animation-delay: -2204ms;
animation-delay: -2204ms;
}
.star:nth-child(105) {
top: calc(50% - 53px);
left: calc(50% - -135px);
-webkit-animation-delay: -4867ms;
animation-delay: -4867ms;
}
.star:nth-child(106) {
top: calc(50% - 134px);
left: calc(50% - -181px);
-webkit-animation-delay: -4307ms;
animation-delay: -4307ms;
}
.star:nth-child(107) {
top: calc(50% - 166px);
left: calc(50% - -135px);
-webkit-animation-delay: -3240ms;
animation-delay: -3240ms;
}
.star:nth-child(108) {
top: calc(50% - -36px);
left: calc(50% - -40px);
-webkit-animation-delay: -3979ms;
animation-delay: -3979ms;
}
.star:nth-child(109) {
top: calc(50% - -108px);
left: calc(50% - 159px);
-webkit-animation-delay: -1313ms;
animation-delay: -1313ms;
}
.star:nth-child(110) {
top: calc(50% - 48px);
left: calc(50% - 173px);
-webkit-animation-delay: -3816ms;
animation-delay: -3816ms;
}
.star:nth-child(111) {
top: calc(50% - -102px);
left: calc(50% - -155px);
-webkit-animation-delay: -4500ms;
animation-delay: -4500ms;
}
.star:nth-child(112) {
top: calc(50% - 136px);
left: calc(50% - 94px);
-webkit-animation-delay: -462ms;
animation-delay: -462ms;
}
.star:nth-child(113) {
top: calc(50% - -52px);
left: calc(50% - 165px);
-webkit-animation-delay: -3162ms;
animation-delay: -3162ms;
}
.star:nth-child(114) {
top: calc(50% - -27px);
left: calc(50% - 107px);
-webkit-animation-delay: -1344ms;
animation-delay: -1344ms;
}
.star:nth-child(115) {
top: calc(50% - 92px);
left: calc(50% - -130px);
-webkit-animation-delay: -3345ms;
animation-delay: -3345ms;
}
.star:nth-child(116) {
top: calc(50% - -48px);
left: calc(50% - 154px);
-webkit-animation-delay: -5391ms;
animation-delay: -5391ms;
}
.star:nth-child(117) {
top: calc(50% - 16px);
left: calc(50% - -8px);
-webkit-animation-delay: -4458ms;
animation-delay: -4458ms;
}
.star:nth-child(118) {
top: calc(50% - 2px);
left: calc(50% - 179px);
-webkit-animation-delay: -2461ms;
animation-delay: -2461ms;
}
.star:nth-child(119) {
top: calc(50% - -95px);
left: calc(50% - -102px);
-webkit-animation-delay: -5796ms;
animation-delay: -5796ms;
}
.star:nth-child(120) {
top: calc(50% - 160px);
left: calc(50% - 183px);
-webkit-animation-delay: -1757ms;
animation-delay: -1757ms;
}
.star:nth-child(121) {
top: calc(50% - -150px);
left: calc(50% - 12px);
-webkit-animation-delay: -493ms;
animation-delay: -493ms;
}
.star:nth-child(122) {
top: calc(50% - 89px);
left: calc(50% - 123px);
-webkit-animation-delay: -4061ms;
animation-delay: -4061ms;
}
.star:nth-child(123) {
top: calc(50% - -88px);
left: calc(50% - 18px);
-webkit-animation-delay: -2759ms;
animation-delay: -2759ms;
}
.star:nth-child(124) {
top: calc(50% - 149px);
left: calc(50% - -109px);
-webkit-animation-delay: -2210ms;
animation-delay: -2210ms;
}
.star:nth-child(125) {
top: calc(50% - -36px);
left: calc(50% - 52px);
-webkit-animation-delay: -2353ms;
animation-delay: -2353ms;
}
.star:nth-child(126) {
top: calc(50% - 180px);
left: calc(50% - -160px);
-webkit-animation-delay: -529ms;
animation-delay: -529ms;
}
.star:nth-child(127) {
top: calc(50% - -127px);
left: calc(50% - 160px);
-webkit-animation-delay: -4044ms;
animation-delay: -4044ms;
}
.star:nth-child(128) {
top: calc(50% - 106px);
left: calc(50% - 137px);
-webkit-animation-delay: -473ms;
animation-delay: -473ms;
}
.star:nth-child(129) {
top: calc(50% - 16px);
left: calc(50% - -9px);
-webkit-animation-delay: -3304ms;
animation-delay: -3304ms;
}
.star:nth-child(130) {
top: calc(50% - -94px);
left: calc(50% - -189px);
-webkit-animation-delay: -1870ms;
animation-delay: -1870ms;
}
.star:nth-child(131) {
top: calc(50% - -7px);
left: calc(50% - -171px);
-webkit-animation-delay: -5530ms;
animation-delay: -5530ms;
}
.star:nth-child(132) {
top: calc(50% - 88px);
left: calc(50% - -59px);
-webkit-animation-delay: -4484ms;
animation-delay: -4484ms;
}
.star:nth-child(133) {
top: calc(50% - -184px);
left: calc(50% - 176px);
-webkit-animation-delay: -4893ms;
animation-delay: -4893ms;
}
.star:nth-child(134) {
top: calc(50% - -98px);
left: calc(50% - 114px);
-webkit-animation-delay: -4524ms;
animation-delay: -4524ms;
}
.star:nth-child(135) {
top: calc(50% - -30px);
left: calc(50% - 160px);
-webkit-animation-delay: -2754ms;
animation-delay: -2754ms;
}
.star:nth-child(136) {
top: calc(50% - -77px);
left: calc(50% - 140px);
-webkit-animation-delay: -3401ms;
animation-delay: -3401ms;
}
.star:nth-child(137) {
top: calc(50% - 94px);
left: calc(50% - -113px);
-webkit-animation-delay: -311ms;
animation-delay: -311ms;
}
.star:nth-child(138) {
top: calc(50% - -70px);
left: calc(50% - -92px);
-webkit-animation-delay: -1658ms;
animation-delay: -1658ms;
}
.star:nth-child(139) {
top: calc(50% - 116px);
left: calc(50% - 152px);
-webkit-animation-delay: -5335ms;
animation-delay: -5335ms;
}
.star:nth-child(140) {
top: calc(50% - 31px);
left: calc(50% - -174px);
-webkit-animation-delay: -3680ms;
animation-delay: -3680ms;
}
.star:nth-child(141) {
top: calc(50% - -190px);
left: calc(50% - -91px);
-webkit-animation-delay: -2825ms;
animation-delay: -2825ms;
}
.star:nth-child(142) {
top: calc(50% - 13px);
left: calc(50% - 185px);
-webkit-animation-delay: -3643ms;
animation-delay: -3643ms;
}
.star:nth-child(143) {
top: calc(50% - 170px);
left: calc(50% - 161px);
-webkit-animation-delay: -3576ms;
animation-delay: -3576ms;
}
.star:nth-child(144) {
top: calc(50% - -72px);
left: calc(50% - -166px);
-webkit-animation-delay: -4444ms;
animation-delay: -4444ms;
}
.star:nth-child(145) {
top: calc(50% - -188px);
left: calc(50% - 154px);
-webkit-animation-delay: -4074ms;
animation-delay: -4074ms;
}
.star:nth-child(146) {
top: calc(50% - 13px);
left: calc(50% - 119px);
-webkit-animation-delay: -3294ms;
animation-delay: -3294ms;
}
.star:nth-child(147) {
top: calc(50% - -123px);
left: calc(50% - 9px);
-webkit-animation-delay: -3911ms;
animation-delay: -3911ms;
}
.star:nth-child(148) {
top: calc(50% - 77px);
left: calc(50% - 34px);
-webkit-animation-delay: -1702ms;
animation-delay: -1702ms;
}
.star:nth-child(149) {
top: calc(50% - 165px);
left: calc(50% - -148px);
-webkit-animation-delay: -4414ms;
animation-delay: -4414ms;
}
.star:nth-child(150) {
top: calc(50% - -86px);
left: calc(50% - -59px);
-webkit-animation-delay: -4872ms;
animation-delay: -4872ms;
}
.star:nth-child(151) {
top: calc(50% - -188px);
left: calc(50% - -86px);
-webkit-animation-delay: -1782ms;
animation-delay: -1782ms;
}
.star:nth-child(152) {
top: calc(50% - 5px);
left: calc(50% - -90px);
-webkit-animation-delay: -2380ms;
animation-delay: -2380ms;
}
.star:nth-child(153) {
top: calc(50% - -35px);
left: calc(50% - -39px);
-webkit-animation-delay: -2536ms;
animation-delay: -2536ms;
}
.star:nth-child(154) {
top: calc(50% - -80px);
left: calc(50% - 6px);
-webkit-animation-delay: -1275ms;
animation-delay: -1275ms;
}
.star:nth-child(155) {
top: calc(50% - 116px);
left: calc(50% - 101px);
-webkit-animation-delay: -5108ms;
animation-delay: -5108ms;
}
.star:nth-child(156) {
top: calc(50% - -30px);
left: calc(50% - 164px);
-webkit-animation-delay: -3561ms;
animation-delay: -3561ms;
}
.star:nth-child(157) {
top: calc(50% - -31px);
left: calc(50% - -37px);
-webkit-animation-delay: -5772ms;
animation-delay: -5772ms;
}
.star:nth-child(158) {
top: calc(50% - -184px);
left: calc(50% - -59px);
-webkit-animation-delay: -4484ms;
animation-delay: -4484ms;
}
.star:nth-child(159) {
top: calc(50% - -196px);
left: calc(50% - 28px);
-webkit-animation-delay: -24ms;
animation-delay: -24ms;
}
.star:nth-child(160) {
top: calc(50% - -79px);
left: calc(50% - -100px);
-webkit-animation-delay: -5214ms;
animation-delay: -5214ms;
}
.star:nth-child(161) {
top: calc(50% - 19px);
left: calc(50% - 8px);
-webkit-animation-delay: -4214ms;
animation-delay: -4214ms;
}
.star:nth-child(162) {
top: calc(50% - 11px);
left: calc(50% - 20px);
-webkit-animation-delay: -2460ms;
animation-delay: -2460ms;
}
.star:nth-child(163) {
top: calc(50% - -135px);
left: calc(50% - 186px);
-webkit-animation-delay: -2490ms;
animation-delay: -2490ms;
}
.star:nth-child(164) {
top: calc(50% - -60px);
left: calc(50% - 166px);
-webkit-animation-delay: -3080ms;
animation-delay: -3080ms;
}
.star:nth-child(165) {
top: calc(50% - -86px);
left: calc(50% - -50px);
-webkit-animation-delay: -4898ms;
animation-delay: -4898ms;
}
.star:nth-child(166) {
top: calc(50% - -188px);
left: calc(50% - 110px);
-webkit-animation-delay: -5609ms;
animation-delay: -5609ms;
}
.star:nth-child(167) {
top: calc(50% - -167px);
left: calc(50% - 68px);
-webkit-animation-delay: -4779ms;
animation-delay: -4779ms;
}
.star:nth-child(168) {
top: calc(50% - 1px);
left: calc(50% - 187px);
-webkit-animation-delay: -4308ms;
animation-delay: -4308ms;
}
.star:nth-child(169) {
top: calc(50% - 20px);
left: calc(50% - -166px);
-webkit-animation-delay: -1424ms;
animation-delay: -1424ms;
}
.star:nth-child(170) {
top: calc(50% - 55px);
left: calc(50% - 32px);
-webkit-animation-delay: -2769ms;
animation-delay: -2769ms;
}
.star:nth-child(171) {
top: calc(50% - 101px);
left: calc(50% - 29px);
-webkit-animation-delay: -2082ms;
animation-delay: -2082ms;
}
.star:nth-child(172) {
top: calc(50% - 130px);
left: calc(50% - 142px);
-webkit-animation-delay: -5797ms;
animation-delay: -5797ms;
}
.star:nth-child(173) {
top: calc(50% - 64px);
left: calc(50% - -176px);
-webkit-animation-delay: -3848ms;
animation-delay: -3848ms;
}
.star:nth-child(174) {
top: calc(50% - 73px);
left: calc(50% - 109px);
-webkit-animation-delay: -4606ms;
animation-delay: -4606ms;
}
.star:nth-child(175) {
top: calc(50% - 159px);
left: calc(50% - 159px);
-webkit-animation-delay: -1846ms;
animation-delay: -1846ms;
}
.star:nth-child(176) {
top: calc(50% - 1px);
left: calc(50% - -178px);
-webkit-animation-delay: -3427ms;
animation-delay: -3427ms;
}
.star:nth-child(177) {
top: calc(50% - -70px);
left: calc(50% - 126px);
-webkit-animation-delay: -2120ms;
animation-delay: -2120ms;
}
.star:nth-child(178) {
top: calc(50% - 113px);
left: calc(50% - 111px);
-webkit-animation-delay: -4417ms;
animation-delay: -4417ms;
}
.star:nth-child(179) {
top: calc(50% - 179px);
left: calc(50% - -144px);
-webkit-animation-delay: -385ms;
animation-delay: -385ms;
}
.star:nth-child(180) {
top: calc(50% - 35px);
left: calc(50% - 17px);
-webkit-animation-delay: -3019ms;
animation-delay: -3019ms;
}
.star:nth-child(181) {
top: calc(50% - 119px);
left: calc(50% - 171px);
-webkit-animation-delay: -949ms;
animation-delay: -949ms;
}
.star:nth-child(182) {
top: calc(50% - 134px);
left: calc(50% - 31px);
-webkit-animation-delay: -1427ms;
animation-delay: -1427ms;
}
.star:nth-child(183) {
top: calc(50% - 66px);
left: calc(50% - -157px);
-webkit-animation-delay: -3356ms;
animation-delay: -3356ms;
}
.star:nth-child(184) {
top: calc(50% - -166px);
left: calc(50% - 116px);
-webkit-animation-delay: -4191ms;
animation-delay: -4191ms;
}
.star:nth-child(185) {
top: calc(50% - -154px);
left: calc(50% - 105px);
-webkit-animation-delay: -1139ms;
animation-delay: -1139ms;
}
.star:nth-child(186) {
top: calc(50% - -110px);
left: calc(50% - 28px);
-webkit-animation-delay: -638ms;
animation-delay: -638ms;
}
.star:nth-child(187) {
top: calc(50% - 148px);
left: calc(50% - 98px);
-webkit-animation-delay: -1928ms;
animation-delay: -1928ms;
}
.star:nth-child(188) {
top: calc(50% - 65px);
left: calc(50% - 174px);
-webkit-animation-delay: -3563ms;
animation-delay: -3563ms;
}
.star:nth-child(189) {
top: calc(50% - 115px);
left: calc(50% - 58px);
-webkit-animation-delay: -2610ms;
animation-delay: -2610ms;
}
.star:nth-child(190) {
top: calc(50% - -22px);
left: calc(50% - -183px);
-webkit-animation-delay: -2116ms;
animation-delay: -2116ms;
}
.star:nth-child(191) {
top: calc(50% - 30px);
left: calc(50% - 66px);
-webkit-animation-delay: -4013ms;
animation-delay: -4013ms;
}
.star:nth-child(192) {
top: calc(50% - -33px);
left: calc(50% - 146px);
-webkit-animation-delay: -1663ms;
animation-delay: -1663ms;
}
.star:nth-child(193) {
top: calc(50% - 56px);
left: calc(50% - 39px);
-webkit-animation-delay: -3459ms;
animation-delay: -3459ms;
}
.star:nth-child(194) {
top: calc(50% - -10px);
left: calc(50% - 41px);
-webkit-animation-delay: -4060ms;
animation-delay: -4060ms;
}
.star:nth-child(195) {
top: calc(50% - 7px);
left: calc(50% - -142px);
-webkit-animation-delay: -1774ms;
animation-delay: -1774ms;
}
.star:nth-child(196) {
top: calc(50% - 10px);
left: calc(50% - -24px);
-webkit-animation-delay: -2806ms;
animation-delay: -2806ms;
}
.star:nth-child(197) {
top: calc(50% - -129px);
left: calc(50% - -63px);
-webkit-animation-delay: -5355ms;
animation-delay: -5355ms;
}
.star:nth-child(198) {
top: calc(50% - 111px);
left: calc(50% - 85px);
-webkit-animation-delay: -5386ms;
animation-delay: -5386ms;
}
.star:nth-child(199) {
top: calc(50% - 195px);
left: calc(50% - 62px);
-webkit-animation-delay: -2838ms;
animation-delay: -2838ms;
}
.star:nth-child(200) {
top: calc(50% - 10px);
left: calc(50% - 101px);
-webkit-animation-delay: -5902ms;
animation-delay: -5902ms;
}
@-webkit-keyframes bling {
0% {
transform: scale(0) rotateZ(45deg) translate(-300px);
background: #ff00ff;
}
50% {
transform: scale(1) rotateZ(45deg) translate(0);
background: #ffffff;
}
100% {
transform: scale(0) rotateZ(45deg) translate(300px);
background: #0000ff;
}
}
@keyframes bling {
0% {
transform: scale(0) rotateZ(45deg) translate(-300px);
background: #ff00ff;
}
50% {
transform: scale(1) rotateZ(45deg) translate(0);
background: #ffffff;
}
100% {
transform: scale(0) rotateZ(45deg) translate(300px);
background: #0000ff;
}
}
</style>
</head>
<body>
<div class="sky">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
</div>
</body>
</html>
页:
[1]