<!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>css3动画</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 100vw;
height: 100vh;
background-color: #000;
}
.moon {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #F5FFFA;
box-shadow: 0 0 60px #F5FFFA;
position: absolute;
left: 80%;
top: 150px;
animation: myMoon 20s linear;
}
@keyframes myMoon {
0% {
left: 60%;
top: 350px;
opacity: 0;
}
100% {
left: 80%;
top: 150px;
opacity: 1;
}
}
img {
width: 8px;
height: 8px;
opacity: 0;
position: absolute;
left: 0px;
top: 0px;
animation: myStar 2s ease-in-out infinite;
}
@keyframes myStar {
0% {
opacity: 0;
}
50% {
opacity: 0.4;
}
100% {
opacity: 0;
}
}
.star {
width: 1px;
display: block;
position: absolute;
background-color: transparent transparent transparent rgba(255, 255, 255, .5);
opacity: 0;
animation: star 4s linear infinite;
}
.star::after {
content: '';
display: block;
border: 1px solid #fff;
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, .5);
transform: rotate(-45deg);
}
@keyframes star {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-500px, 300px);
}
}
</style>
</head>
<body>
<div class="container">
<div class="moon"></div>
</div>
<script>
var width = document.body.clientWidth - 20
var height = document.body.clientHeight - 20
//随机生成星星
for (var i = 0; i < 70; i++) {
var img = document.createElement('img')
document.body.appendChild(img)
img.src = './imgs/star.png'
img.style.left = Math.random() * width + 'px'
img.style.top = Math.random() * height + 'px'
img.style.animationDelay = Math.random() * 3 + 's' //添加动画延迟时间
}
//随机生成流星
for (var i = 0; i < 10; i++) {
var lx = document.createElement('div')
lx.className = 'star'
lx.style.right = (Math.random() * 400 + 150) + 'px'
lx.style.top = (Math.random() * 200 + 100) + 'px'
lx.style.animationDelay = Math.random() * 3 * i + 's' //添加动画延迟时间
document.body.appendChild(lx)
}
</script>
</body>
</html>
css3夜晚星空
最新推荐文章于 2024-06-25 10:56:29 发布