js实现星空背景（附加 + 获取网页高宽兼容封装）

最新推荐文章于 2024-07-31 10:25:36 发布

努力中的小mi

最新推荐文章于 2024-07-31 10:25:36 发布

阅读量948

点赞数 2

文章标签： js javascript css html vscode

本文链接：https://blog.youkuaiyun.com/weixin_54345600/article/details/119873134

版权

这篇博客介绍了如何使用JavaScript和CSS实现一个动态星空背景，并确保在不同浏览器和设备上的兼容性。作者通过Math对象设置星星的随机位置，利用onresize事件提升用户体验，以及CSS hover选择器实现交互效果。内容包括搭建基本HTML结构，添加动画，编写JS代码以适应不同网页尺寸，并展示了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

星空背景:
Math 内置对象设置星星的随机位置，
onresize 事件来提高用户效果，
CSS hover 选择器来进行交互效果。

展示效果

在这里插入图片描述

搭建基本结构

CSS 样式

span {
   
	width: 30px;
	height: 30px;
	background: url("images/star.png") no-repeat;
	background-size: 100% 100%;
}
html,body {
   
	width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}

HTML 样式

<span></span>

添加动画

这里我们需要给星星添加 hover 选择器来控制他们的缩放旋转再给 span 添加一个过渡。

span:hover {
   
	transform: scale(3,3) rotate(180deg) !important;
	transition: all 2s;
}

然后再添加一个 动画效果 ，再添加一个 绝对定位 方便后面进行随机位置。

span {
   
	position:absolute;
	animation: flash 1s alternate infinite;
}
@keyframes flash {
   
	from {
   
		opacity: 0;
	}
	to {
   
		opacity: 1;
	}
}

编写 JS 代码实现网页兼容高宽封装

这里的 document.compatMode 是获取浏览器的渲染方式 BackCompat 为 混杂模式 也为 怪异模式，
一般浏览器都为标准模式，如何才是 混杂模式 呢？只需要把 HTML 中 <!DOCTYPE html> 去掉即可。

function getScreen() {
    
	let width,
	    height = null;
	if (window.innerWidth) {
   
		width = window.innerWidth;
		height = window.innerHeight;
	} else if (document.compatMode == "BackCompat"

最低0.47元/天解锁文章