【css酷炫效果】纯CSS实现星空闪烁动画

已于 2025-03-17 15:42:09 修改
阅读量304 收藏 4
点赞数 9
文章标签： css 前端
于 2025-03-17 13:28:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011561335/article/details/146312652
版权

【css酷炫效果】纯CSS实现星空闪烁动画

这次的不纯，有几行js代码完成星空的随机分布。想直接拿走的老板，链接放在这里：https://download.csdn.net/download/u011561335/90490487

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS星空闪烁动画</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="starry-sky"></div>
</body>
</html>

css样式

	body, html {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url(b.gif) center / cover no-repeat;
		
	}
	 
	.starry-sky {
		position: relative;
		width: 100%;
		height: 100%;
	}
	 
	.star {
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.8); /* 星星的颜色和透明度 */
		box-shadow: 
			30vw 50vh #fff, 
			70vw 20vh #fff, 
			90vw 80vh #fff, 
			50vw 90vh #fff, 
			/* ... 可以继续添加更多box-shadow来生成更多星星 */
			;
		animation: twinkle 2s infinite, move 100s linear infinite;
	}
	 
	/* 星星闪烁动画 */
	@keyframes twinkle {
		0%, 100% {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
	}
	 
	/* 星星移动动画 */
	@keyframes move {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100vh); /* 向上移动一个视窗高度 */
		}
	}
	 
	/* 为了实现星星移动后无缝衔接，我们使用::after伪元素 */
	.star::after {
		content: "";
		position: absolute;
		top: 105vh; /* 初始位置在父元素下方 */
		left: 0;
		width: inherit;
		height: inherit;
		border-radius: inherit;
		background: inherit;
		box-shadow: inherit;
		animation: move 100s linear infinite;
	}

js代码

    document.addEventListener("DOMContentLoaded", function() {
        const starrySky = document.querySelector(".starry-sky");
        const starCount = 200; // 星星数量
        for (let i = 0; i < starCount; i++) {
            const star = document.createElement("div");
            star.classList.add("star");
            // 随机设置星星的位置
            star.style.left = `${Math.random() * 100}vw`;
            star.style.top = `${Math.random() * 100}vh`;
            star.style.animationDelay = `${Math.random() * 100}s`;
            starrySky.appendChild(star);
        }
    });

完整代码

基础版

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS星空闪烁动画</title>
    <style>
	body, html {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: black; /* 设置背景为黑色，模拟夜空 */ 
		
	}
	 
	.starry-sky {
		position: relative;
		width: 100%;
		height: 100%;
	}
	 
	.star {
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.8); /* 星星的颜色和透明度 */
		box-shadow: 
			30vw 50vh #fff, 
			70vw 20vh #fff, 
			90vw 80vh #fff, 
			50vw 90vh #fff, 
			/* ... 可以继续添加更多box-shadow来生成更多星星 */
			;
		animation: twinkle 2s infinite, move 100s linear infinite;
	}
	 
	/* 星星闪烁动画 */
	@keyframes twinkle {
		0%, 100% {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
	}
	 
	/* 星星移动动画 */
	@keyframes move {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100vh); /* 向上移动一个视窗高度 */
		}
	}
	 
	/* 为了实现星星移动后无缝衔接，我们使用::after伪元素 */
	.star::after {
		content: "";
		position: absolute;
		top: 105vh; /* 初始位置在父元素下方 */
		left: 0;
		width: inherit;
		height: inherit;
		border-radius: inherit;
		background: inherit;
		box-shadow: inherit;
		animation: move 100s linear infinite;
	}
	 
	</style>
	
</head>
<body>
    <div class="starry-sky"></div>
</body>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const starrySky = document.querySelector(".starry-sky");
        const starCount = 200; // 星星数量
        for (let i = 0; i < starCount; i++) {
            const star = document.createElement("div");
            star.classList.add("star");
            // 随机设置星星的位置
            star.style.left = `${Math.random() * 100}vw`;
            star.style.top = `${Math.random() * 100}vh`;
            star.style.animationDelay = `${Math.random() * 100}s`;
            starrySky.appendChild(star);
        }
    });
</script>

</html>

进阶版（女友星空版）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS星空闪烁动画</title>
    <style>
	body, html {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url(b.gif) center / cover no-repeat;
		
	}
	 
	.starry-sky {
		position: relative;
		width: 100%;
		height: 100%;
	}
	 
	.star {
		position: absolute;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.8); /* 星星的颜色和透明度 */
		box-shadow: 
			30vw 50vh #fff, 
			70vw 20vh #fff, 
			90vw 80vh #fff, 
			50vw 90vh #fff, 
			/* ... 可以继续添加更多box-shadow来生成更多星星 */
			;
		animation: twinkle 2s infinite, move 100s linear infinite;
	}
	 
	/* 星星闪烁动画 */
	@keyframes twinkle {
		0%, 100% {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
	}
	 
	/* 星星移动动画 */
	@keyframes move {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100vh); /* 向上移动一个视窗高度 */
		}
	}
	 
	/* 为了实现星星移动后无缝衔接，我们使用::after伪元素 */
	.star::after {
		content: "";
		position: absolute;
		top: 105vh; /* 初始位置在父元素下方 */
		left: 0;
		width: inherit;
		height: inherit;
		border-radius: inherit;
		background: inherit;
		box-shadow: inherit;
		animation: move 100s linear infinite;
	}
	 
	</style>
	
</head>
<body>
    <div class="starry-sky"></div>
</body>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const starrySky = document.querySelector(".starry-sky");
        const starCount = 200; // 星星数量
        for (let i = 0; i < starCount; i++) {
            const star = document.createElement("div");
            star.classList.add("star");
            // 随机设置星星的位置
            star.style.left = `${Math.random() * 100}vw`;
            star.style.top = `${Math.random() * 100}vh`;
            star.style.animationDelay = `${Math.random() * 100}s`;
            starrySky.appendChild(star);
        }
    });
</script>

</html>

效果图

在这里插入图片描述
在这里插入图片描述

CSS+Canvas绘制最美星空(一闪一闪亮晶晶效果+流星划过)
misschengispink的博客
05-29 1210
创建一个.html文件，复制代码进去就可以看到效果啦~满屏星星很好看，有普通粒子星星，也有一闪一闪的十字星星，不定时会有流星划过，很好看的夜空，如果想要星星变大，可自行调整粒子大小。
分享一个CSS酷炫的卡片动画效果（一）
流绪@微梦
09-19 257
【代码】分享一个CSS酷炫的卡片动画效果（一）
大屏酷炫效果，用一个标签实现酷炫的css动画
Pinellia
04-15 902
css酷炫
小型星空代码（CSS+HTML+JS）
02-26
小型星空代码（CSS+HTML+JS）
css3实现星星闪烁效果
weixin_33933118的博客
05-21 3199
2019独角兽企业重金招聘Python工程师标准>>> ...
用户注册信息管理系统python开发文档_关于python开发CRM系统 项目登录注册
weixin_42581003的博客
02-05 246
/* -----------------------------------------------/* Author : Vincent Garreau -vincentgarreau.com/* MIT license: http://opensource.org/licenses/MIT/* Demo / Generator : vincentgarreau.com/particles.j...
CSS3全屏星空动态特效代码
weixin_69464118的博客
04-21 673
CSS3全屏星空动态特效代码，可用于简约的星空表白页面，大气的文字内容动态背景特效。
html5 canvas全屏酷炫星光闪烁3D视差背景动画特效
06-11
在本项目"html5 canvas全屏酷炫星光闪烁3D视差背景动画特效"中，我们将深入探讨Canvas如何实现这样一个酷炫的背景动画。 首先，Canvas是一个基于矢量图形的API，通过JavaScript来操作。在这个特效中，开发者可能...
星空主题登录页面设计：酷炫效果与前端技术实现
在星空登录界面设计中，CSS是用来实现星空背景效果、按钮样式、输入框美化、动画效果等关键元素的主要工具。 3. JavaScript交互逻辑：JavaScript是实现网页动态效果和用户交互的核心语言。在星空登录界面设计中，...
css3进阶之less实现星空动画的示例代码
12-14
本文介绍了css3进阶之less实现星空动画的示例代码，分享给大家，具体如下： 效果动图如下：   预览链接和代码在我的codepen： https://codepen.io/lio-mengxiang/pen/YzKrEde  知识点预览 这篇文章的 less技巧 + css技巧 知识点包括： less如何写循环 less里如何使用js表达式 css3属性: box-shadow如何生成成百上千的星星 css3属性: background: radial-gradient径向渐变，如何生成渐变的背景色 HTML文档结构 首先html文件结构很简单，如下： <
html5 星空
08-22
html5 星空 粒子急速运动 鼠标放到星空上，粒子会随着时间推移运动越来越快。改变鼠标方向，粒子运动方向随之改变
JS+HTML5酷炫星空背景动画特效.zip
11-24
在本项目中，CSS被用来设置星空背景的颜色、透明度、动画效果等，比如通过`keyframes`规则创建平滑的动画过渡，使星星闪烁或者移动。可能还使用了CSS3的新特性，如`transform`和`animation`属性，以实现更复杂的视觉...
星空粒子效果的HTML5/CSS3酷炫登录页面
通过Canvas，可以实现星空背景和粒子动画效果，给用户带来视觉上的震撼。 ### CSS3知识点 **1. 动画与过渡** CSS3的动画（`@keyframes`）和过渡（`transition`）特性能够为登录页面添加平滑的视觉效果。例如，当...
【今日文章】：如何用css 实现星空效果
Dormiveglia-flx的博客
11-08 1399
星星向上移动，且移动完成以后，没有“闪”一下的效果。这是常见的动画上面的需求，我们通常的做法就是。3. 写一个子元素，复制star， 当动画结束的时候，展示一模一样的子元素。1. 通过box-shadow中写多个偏移的阴影，就能形成星空效果。2. 星空是需要移动的，那怎样的动画效果才合理呢？不会出现动画“闪”一下的效果。最合理的解决方案是 "复制" 一份出来。如果是margin-left:auto，那是。这里我们需要知道，“星星”是怎么产生的。这个时候能上下左右居中的原理是，其次是星星的动画是怎么做的？
怎么实现类似星星闪烁的效果（box-shadow）
07-29 589
有时候设计希望我们能够在页面实现类似星星闪烁的效果，如图： 我的解决办法是用box-shadow： html <div class="star04 active-blink" id="star04" ></div> css 1 .star04{ 2 background-color: #FFFFFF; 3 bor...
HTML&CSS：动态星空按钮
最新发布
weixin_52814911的博客
12-19 1507
这段代码创建了一个具有动态背景和光晕效果的按钮，模拟了太空中星星闪烁的效果。按钮在鼠标悬停和按下时有不同的视觉效果，增加了页面的互动性。
css3星空视差动画网页代码
ICode联盟
10-16 167
css3星空视差动画网页代码，可以当做网页背景，比如的登录页面的背景，很酷。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

冰夏之夜影

赠人玫瑰，手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值