Html
    Css
    Js

    
                        
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);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

超简单CSS宇宙星空背景

更新时间:2022-08-03 01:28:27

超简单css宇宙星空背景,适用于大屏背景。

0