<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>stars</title>
<style>
@-webkit-keyframes star-opacity {
0% {
opacity: 0
}
40% {
opacity: 1
}
60% {
opacity: 1
}
100% {
opacity: 0
}
}
@keyframes star-opacity {
0% {
opacity: 0
}
40% {
opacity: 1
}
60% {
opacity: 1
}
100% {
opacity: 0
}
}
@-webkit-keyframes star-pos {
0% {
transform: scale(0) rotate(0) translate3d(0, 0, 0);
-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0)
}
100% {
transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
-webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
-moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)
}
}
@keyframes star-pos {
0% {
transform: scale(0) rotate(0) translate3d(0, 0, 0);
-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0)
}
100% {
transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
-webkit-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0);
-moz-transform: scale(1) rotate(0) translate3d(-450px, 450px, 0)
}
}
body {
padding: 0;
margin: 0;
}
.index-bg {
width: 100vw;
height: 100vh;
background: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);
}
.index-bg .stars {
height: 0
}
.index-bg .star {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
top: 100px;
left: 400px;
position: relative;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
animation: star-opacity 5s infinite ease-in, star-pos 5s infinite ease-in;
-webkit-box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
opacity: 0;
z-index: 2
}
.index-bg .star:after {
content: '';
display: block;
top: 0;
left: 4px;
border: 0 solid #fff;
border-width: 0 90px 2px;
border-color: transparent transparent transparent rgba(255, 255, 255, .3);
-webkit-transform: rotate(-45deg) translate3d(1px, 3px, 0);
transform: rotate(-45deg) translate3d(1px, 3px, 0);
-webkit-box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%
}
</style>
</head>
<body>
<div class="index-bg">
<div class="stars">
<div class="star"></div>
<div class="star" style="top: 80px; left: 800px; animation-delay: 3s;"></div>
<div class="star" style="top: 40px; left: 646px; animation-delay: 2s;"></div>
<div class="star" style="top: 120px; left: 395px; animation-delay: 4s;"></div>
<div class="star" style="top: 160px; left: 765px; animation-delay: 1s;"></div>
<div class="star" style="top: 170px; left: 1200px; animation-delay: 2s;"></div>
<div class="star" style="top: 200px; left: 1000px; animation-delay: 1s;"></div>
</div>
</div>
</body>
</html>
