body { margin:0; padding:0; } .bg-gray-dark-mktg { background-image:radial-gradient(#04255b,#020a1d ); } .d-flex { display:flex !important; } .overflow-hidden { overflow:hidden !important; } .position-relative { position:relative !important; } .flex-auto { flex:auto !important; } .flex-column { flex-direction:column !important; } .sky-space-bg { position:absolute; top:36vh; left:42vw; height:16vw; width:16vw; } .sky-bg-stars { position:absolute; top:0; right:0; bottom:0; left:0; overflow:hidden; background-image:radial-gradient( 1px 2px at 50px 50px,#eee,rgba(0,0,0,0) ),radial-gradient(2px 3px at 20px 35px,#fff,rgba(0,0,0,0)),radial-gradient(3px 3px at 60px 20px,#ddd,rgba(0,0,0,0)); background-repeat:repeat; background-size:200px 200px; opacity:0.2; animation:opacity 8s infinite; } .sky-bg-stars:nth-child(1) { background-position:0% 90%; animation-delay:0s; } .sky-bg-stars:nth-child(2) { background-position:50% 10%; animation-delay:0.6s; } .sky-bg-stars:nth-child(3) { background-position:40% -80%; background-size:120px 200px; animation-delay:1.8s; } .sky-bg-stars:nth-child(4) { background-position:150% -80%; background-size:220px 100px; animation-delay:3.2s; } .sky-space,.sky-stars { position:absolute; top:0; right:5vw; bottom:0; left:5vw; overflow:hidden; } .sky-stars { background-image:radial-gradient( 2px 2px at 50px 200px,#eee,rgba(0,0,0,0) ),radial-gradient(3px 3px at 40px 60px,#fff,rgba(0,0,0,0)),radial-gradient(4px 5px at 100px 30px,#ddd,rgba(0,0,0,0)); background-repeat:repeat; background-size:380px 380px; opacity:0; animation-name:zoom; animation-delay:0s; animation-duration:10s; animation-timing-function:ease-out; animation-iteration-count:infinite; } .sky-stars:nth-child(1) { /* background-image:radial-gradient( 2px 2px at 50px 200px,#fff ),radial-gradient(2px 3px at 40px 70px,#fff),radial-gradient(3px 4px at 120px 40px,#fff); */ top:20vh; bottom:20vh; left:10vw; right:10vw; background-size:120px 120px; background-position:10% 90%; } .sky-stars:nth-child(2) { background-position:20% 50%; animation-delay:0.3s; } .sky-stars:nth-child(3) { background-position:40% 20%; animation-delay:1.3s; } .sky-stars:nth-child(4) { background-position:50% 10%; background-size:200px 200px; transform:rotate(60deg); animation-delay:2.1s; } .sky-stars:nth-child(5) { background-position:30% 30%; background-size:120px 270px; animation-delay:3s; } .sky-stars:nth-child(6) { background-position:50% 20%; animation-delay:5.5s; } @keyframes opacity { 0% { opacity:0.2; transform:rotate(-5deg); animation-timing-function:ease-in; } 50% { opacity:0.8; transform:rotate(-13deg); animation-timing-function:ease-in; } 100% { opacity:0.1; transform:rotate(-20deg); animation-timing-function:ease-in; } }@keyframes zoom { 0% { opacity:0.02; transform:scale(0.1); transform:rotate(-20deg); animation-timing-function:ease-in; } 5% { opacity:0.05; /* transform:scale(0.3); */ } 50% { opacity:0.6; /* transform:scale(1.2); */ } 75% { opacity:0.3; transform:scale(1.8); /* transform:rotate(2deg); */ } 100% { opacity:0.1; transform:scale(2.2); } }
更新时间:2022-08-03 01:28:27
超简单css宇宙星空背景,适用于大屏背景。