如何使用CSS动画创建闪烁的星空背景？

在本教程中，我们将使用CSS动画来创建一个闪烁的星空背景。通过学习这个案例，你将了解到CSS动画的基本用法和参数，帮助你更好地掌握CSS动画的编写。

步骤一：HTML结构

首先，我们需要创建一个包含所有星星的容器。在HTML文件中添加以下代码：

<div class="stars-container"></div>

然后，我们需要在CSS文件中为容器添加样式：

.stars-container {
     width: 100%;
     height: 100vh;
     background-color: #000;
     position: fixed;
     top: 0;
     left: 0;
     z-index: -1;
}

步骤二：CSS动画

接下来，我们将使用CSS动画来创建星星的闪烁效果。在CSS文件中添加以下代码：

@keyframes twinkling {
     0% { opacity: 1; }
     50% { opacity: 0; }
     100% { opacity: 1; }
}

.star {
     width: 3px;
     height: 3px;
     background-color: #fff;
     border-radius: 50%;
     position: absolute;
     animation: twinkling 1s infinite;
}

.stars-container {
     display: flex;
     align-items: center;
     justify-content: center;
}

步骤三：JavaScript函数

最后，我们可以使用JavaScript函数来动态生成星星。在HTML文件的<script>标签中添加以下代码：

function createStars() {
     const starsContainer = document.querySelector('.stars-container');

     for (let i = 0; i < 100; i++) {
         const star = document.createElement('div');
         star.classList.add('star');
         star.style.top = Math.random() * 100 + '%';
         star.style.left = Math.random() * 100 + '%';
         starsContainer.appendChild(star);
     }
}

createStars();

在这个函数中，我们使用了一个for循环来创建100个星星，并将它们添加到星星容器中。

现在，你可以在浏览器中查看你的闪烁星空背景了！希望这个教程对你有所帮助。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用CSS动画实现元素的震动效果？
• 下一篇： 如何使用CSS动画实现元素的摇摆效果？