话不多说，上代码。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">
document.addEventListener('plusready', function(){
//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
});
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
background: #000000;
width: 100vw;
height: 100vh;
position: relative;
}
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: linear-gradient(40deg, #f9fabe, #fffd3b);
position: absolute;
top: 10%;
right: 20%;
box-shadow: 0 0 30px 0px #fffd3b, 0 0 80px 0 #ffffff;
animation: moonflashing 3s linear infinite;
}
@keyframes moonflashing {
0% {
filter: brightness(1);
}
50% {
filter: brightness(2);
}
100% {
filter: brightness(1);
}
}
@keyframes starflashing {
0% {
filter: brightness(0.5);
}
50% {
filter: brightness(1);
}
100% {
filter: brightness(0.5);
}
}
.star1 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #55007f;
position: absolute;
animation: starflashing 2s infinite;
}
.star2 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #ff0000;
position: absolute;
animation: starflashing 2s infinite;
}
.star3 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #ffaa00;
position: absolute;
animation: starflashing 2s infinite;
}
.star4 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #ffff00;
position: absolute;
animation: starflashing 2s infinite;
}
.star5 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #00ff00;
position: absolute;
animation: starflashing 2s infinite;
}
.star6 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #0000ff;
position: absolute;
animation: starflashing 2s infinite;
}
.star7 {
width: 2px;
height: 2px;
border-radius: 50%;
background: #aaff00;
position: absolute;
animation: starflashing 2s infinite;
}
.star1 {
top: 50%;
right: 20%;
}
.star2 {
top: 70%;
right: 30%;
}
.star3 {
top: 40%;
left: 20%;
}
.star4 {
top: 60%;
right: 10%;
}
.star5 {
top: 55%;
right: 44%;
}
.star6 {
top: 10%;
left: 30%;
}
.star7 {
top: 15%;
left: 20%;
}
.meteor {
position: absolute;
width: 4px;
height: 4px;
opacity: 0;
background: #ffffff;
border-radius: 50%;
box-shadow: 0 0 5px 5px #636262;
}
.meteor:after {
content: "";
display: block;
border: 0px solid #fff;
border-width: 2px 100px;
border-color: transparent transparent transparent
rgba(255, 255, 255, 0.3);
transform: rotate(-45deg) translate3d(1px, 1px, 0);
transform-origin: 0% 0%;
}
.meteor1 {
top: 2vh;
left: 30vw;
background: rgb(255, 0, 0);
animation: meteorflashing 2s infinite linear 1s;
}
.meteor2 {
top: 22vh;
left: 80vw;
background: rgb(255, 237, 38);
animation: meteorflashing 2s infinite linear 1s;
}
.meteor3 {
top: 30vh;
left: 40vw;
background: rgb(255, 255, 0);
animation: meteorflashing 3s infinite linear 2s;
}
.meteor4 {
top: 10vh;
left: 50vw;
background: rgb(6, 255, 6);
animation: meteorflashing 3s infinite linear 1s;
}
.meteor5 {
top: 50vh;
right: 2vw;
background: rgb(3, 3, 255);
animation: meteorflashing 3s infinite linear 3s;
}
.meteor6 {
top: 60vh;
right: 2vw;
background: rgb(3, 209, 255);
animation: meteorflashing 3s infinite linear 3s;
}
.meteor7 {
top: 70vh;
right: 2vw;
background: rgb(234, 0, 255);
animation: meteorflashing 3s infinite linear 3s;
}
@keyframes meteorflashing {
0% {
opacity: 0;
transform: scale(0) translate3d(0, 0, 0);
}
50% {
opacity: 1;
transform: scale(1) translate3d(-200px, 200px, 0);
}
100% {
opacity: 0;
transform: scale(1) translate3d(-500px, 500px, 0);
}
}
</style>
</head>
<body>
<div class="wrap">
<div class="moon"></div>
<div class="star1 star1"></div>
<div class="star2 star2"></div>
<div class="star3 star3"></div>
<div class="star4 star4"></div>
<div class="star5 star5"></div>
<div class="star6 star6"></div>
<div class="star7 star7"></div>
<div class="meteor meteor1"></div>
<div class="meteor meteor2"></div>
<div class="meteor meteor3"></div>
<div class="meteor meteor4"></div>
<div class="meteor meteor5"></div>
<div class="meteor meteor6"></div>
<div class="meteor meteor7"></div>
</div>
</body>
</html>
网友评论