用css动画实现星星闪耀效果的核心是使用@keyframes改变opacity和transform: scale，并为每个.star元素设置不同的animation-duration和animation-delay；2. 要让效果更自然需引入随机性，包括动画时长、延迟、尺寸、闪烁强度及微小位移；3. 兼容性方面应加浏览器前缀，性能上优先动画transform和opacity，合理使用will-change，控制动画数量并支持prefers-reduced-motion；4. 响应式设计中使用%、vw/vh等相对单位定位和缩放星星，结合媒体查询调整密度、速度与容器适配，确保不遮挡内容且各设备体验一致。
用CSS动画实现星星闪耀效果，其实核心思路并不复杂：我们利用CSS的@keyframes规则来改变元素的透明度（opacity）或大小（transform: scale），再结合多个独立的星星元素，错开它们的动画开始时间（animation-delay）和持续时间（animation-duration），就能营造出一种此起彼伏、自然灵动的闪烁感。这就像是在数字画布上撒了一把会呼吸的光点，让背景一下子活了起来。
要构建一个带有星星闪耀效果的背景动效，我们通常会用到一个父容器来包裹这些“星星”元素。星星本身可以是简单的div或span，通过CSS定位到背景区域的不同位置。
首先，我们需要定义一个关键帧动画，让星星从完全透明到可见，再到半透明，最后又消失，模拟闪烁过程。
立即学习“前端免费学习笔记（深入）”；
<div class="stars-background"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <!-- 可以添加更多星星元素，数量越多效果越密集 --> </div>
接着是CSS部分：
.stars-background {
position: relative; /* 确保星星可以相对于它定位 */
width: 100%;
height: 100vh; /* 或你想要的任何高度 */
background-color: #000; /* 星空背景色 */
overflow: hidden; /* 隐藏超出容器的星星 */
}
@keyframes twinkle {
0% { opacity: 0; transform: scale(0.5); } /* 初始不可见且小 */
25% { opacity: 1; transform: scale(1); } /* 达到最亮最大 */
50% { opacity: 0.5; transform: scale(0.8); } /* 稍微暗淡 */
75% { opacity: 1; transform: scale(1.2); } /* 再次闪亮，略大 */
100% { opacity: 0; transform: scale(0.5); } /* 最终消失 */
}
.star {
position: absolute;
background-color: #fff; /* 星星的颜色 */
border-radius: 50%; /* 圆形星星 */
animation: twinkle infinite; /* 应用闪烁动画，无限循环 */
/* 下面的属性通过JavaScript或手动设置，以实现随机性 */
/* width: 2px; height: 2px; */
/* top: 10%; left: 50%; */
/* animation-duration: 3s; */
/* animation-delay: 0s; */
}
/* 示例：手动设置几个星星的样式，实际中可以更多 */
.star:nth-child(1) {
width: 2px; height: 2px;
top: 10%; left: 50%;
animation-duration: 3s;
animation-delay: 0s;
}
.star:nth-child(2) {
width: 3px; height: 3px;
top: 25%; left: 70%;
animation-duration: 2.5s;
animation-delay: 1s;
}
.star:nth-child(3) {
width: 1.5px; height: 1.5px;
top: 40%; left: 30%;
animation-duration: 4s;
animation-delay: 0.5s;
}
/* 更多的 .star:nth-child(n) 规则，或用JS动态生成和设置属性 */这里，@keyframes twinkle 定义了星星的生命周期。从不可见的小点，到明亮的大点，再到渐渐消失。关键在于为每个.star元素设置不同的animation-duration（动画持续时间）和animation-delay（动画延迟时间），以及不同的top、left定位，这样它们就不会同步闪烁，看起来会自然很多。手动写这么多nth-child规则显然不现实，实际项目里，我们通常会用JavaScript来动态生成这些星星元素，并随机设置它们的尺寸、位置、动画时长和延迟。
要让星星的闪烁效果摆脱那种机械的重复感，变得更像真实的夜空，这确实需要一点“心机”。我觉得，最直接有效的方法就是引入更多的随机性和变化。
你可以尝试这样做：
animation-duration（比如从2秒到5秒之间）和animation-delay（从0秒到任意值，确保它们错开）。这能大大增加视觉上的随机性。@keyframes里，星星的opacity变化是固定的。但真实世界里，星星有亮有暗，有大有小。你可以定义几个不同的@keyframes，比如twinkle-strong、twinkle-weak，或者在twinkle动画中，让不同的星星应用不同的opacity范围。同时，星星的width和height也应该有所不同，大星和小星的闪烁感是不一样的。@keyframes中加入一点点transform: translateX()或translateY()的微小位移，甚至配合rotate()，让星星在闪烁的同时有轻微的“颤抖”，这种细节能极大提升真实感。z-index和不同的animation-delay、duration，营造出空间上的深度。border-radius: 50%做圆形，但如果你想追求更独特的效果，可以尝试用clip-path或者SVG来创建一些不规则的星形，再对其进行动画。不过，这会增加性能开销。在我看来，这种“不完美”和“随机性”正是CSS动画魅力所在，它允许我们用相对简单的规则，模拟出复杂而生动的自然现象。
CSS动画在现代浏览器中的兼容性已经非常好了，但考虑到历史遗留问题和移动设备的性能差异，我们确实需要一些策略来确保效果既能稳定呈现，又不会成为性能瓶颈。
@keyframes和animation属性，但为了兼容一些老旧版本或者特定内核的浏览器（比如某些安卓自带浏览器），加上-webkit-、-moz-、-o-等前缀仍然是一个稳妥的选择。通常我们会用PostCSS这样的工具自动添加这些前缀，避免手动编写的繁琐和遗漏。@keyframes中，尽量使用transform（包括scale、translateX/Y、rotate）和opacity进行动画。这些属性可以直接由GPU加速，性能表现远优于top、left、width、height或box-shadow等属性。当这些属性发生变化时，浏览器不需要重新计算布局或重绘，只需要进行复合层的操作，效率自然高。will-change属性： 这是一个性能优化的“提示”属性。如果你知道某个元素即将发生动画，可以提前给它加上will-change: opacity, transform;。这会告诉浏览器提前优化该元素的渲染，为动画做好准备。但要注意，不要滥用will-change，因为它也可能消耗更多内存，只应用于确实需要动画的元素。opacity、transform、filter等），那即使是GPU加速也可能吃不消。我个人经验是，对于背景动效，星星数量控制在几百个以内，动画属性尽量精简，只动画opacity和scale通常就足够了。prefers-reduced-motion媒体查询： 这是一个非常重要的无障碍性（Accessibility）考量。有些用户可能对动画敏感，或者因为设备性能限制，希望减少动画。通过@media (prefers-reduced-motion: reduce)，你可以为这些用户提供一个更静态、更简洁的背景，比如直接隐藏动画，或者将动画速度大幅降低。这既体现了对用户的尊重，也能避免不必要的性能消耗。总的来说，平衡好视觉效果和性能，是CSS动画背景动效设计中不可避免的挑战。
将CSS星星背景动画融入响应式设计，其实主要就是确保这些“星星”在不同屏幕尺寸下依然能保持其美观和比例，不至于在手机上挤成一团，或在超宽屏上显得稀疏。
top, left）和尺寸（width, height），我强烈建议使用相对单位，比如%、vw (viewport width) 或 vh (viewport height)。top: 10vw; left: 20vh; 这样星星的位置会随着视口大小而缩放。vw或vh，比如width: 0.2vw; height: 0.2vw;，这样它们的大小会根据屏幕宽度自适应。这比固定像素值要灵活得多。display: none;）。animation-duration，让动画在小屏幕上稍微慢一点，或者简化@keyframes。.stars-background容器本身是响应式的。比如，设置width: 100%; height: 100vh;，它就能很好地适应不同屏幕的尺寸。opacity，让它们更柔和。background-color或text-shadow来提高可读性。z-index，确保前景元素始终位于星星之上。object-fit的思考（虽然这里不直接用）： 如果你背景动画是基于视频或图片，object-fit: cover;或contain;能很好地处理响应式。对于纯CSS生成的星星，我们更多是依赖相对定位和尺寸。通过这些方法，你可以让你的CSS星星背景动画在各种设备和屏幕尺寸上都能保持其应有的视觉效果和用户体验，这才是真正的响应式设计精神。
以上就是如何用CSS动画实现星星闪耀效果 CSS动画构建背景动效点缀元素的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
336
收藏
