纯css星空动画
warning:
这篇文章距离上次修改已过190天，其中的内容可能已经有所变动。
创建一个简单的星空动画可以使用CSS3动画和多个背景图像。以下是一个简单的例子：
HTML:
<div class="star-sky"></div>CSS:
.star-sky {
width: 100%;
height: 500px;
background: url('star-sky.jpg') no-repeat center center fixed;
background-size: cover;
position: relative;
animation: twinkling 10s infinite alternate;
}
@keyframes twinkling {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 200%;
}
}在这个例子中，.star-sky 元素的背景图像会不断地移动，创建出星空动画的效果。@keyframes twinkling 定义了背景图像移动的动画，使星星看起来在闪烁。
请注意，你需要有一个名为 star-sky.jpg 的星空背景图片放在你的服务器或者项目目录中，并根据实际情况调整图片路径。此外，动画的时长和效果可以根据需要进行调整。
评论已关闭