纯JS+CSS3制作星星海背景特效

最新推荐文章于 2024-05-07 19:57:33 发布

Web-once

最新推荐文章于 2024-05-07 19:57:33 发布

阅读量2.9k

点赞数 3

文章标签： JavaScript CSS3 js特效前端星星海背景特效

本文链接：https://blog.csdn.net/qq_42381297/article/details/82561790

版权

今天刚学的用JS和CSS3制作星星海特效

图片自己用PS简单做的一个星星，png格式

js代码中有必要的步骤注释

主要用到了随机函数，这个很重要，它让界面变得很炫，不是单调的闪烁，星星的变化主要是透明度和大小，动画展开时间不一样，设置了推迟时间，鼠标放到上面还会旋转放大。

另外我在学习的基础上更加完善了代码，在浏览器窗口缩放的同时，星星海特效会再次刷新，以便适应不同大小的屏幕，用户体验更加友好（试了很多次，还遇到bug，还好测试成功，还有是在火狐浏览器测试的）

直接复制可以运行，首先准备一张png格式的星星图片，建立一个名为img的文件夹，不要修改、写错路径或者建错文件夹哦~

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>星星海特效</title>
	<style>
		body{
			background: #000;
			overflow: hidden;
		}
		span{
			display: block;
			width: 20px;
			height: 20px;
			position: absolute;
			background: url(img/1.png) center center / 20px 20px;
			animation: flash 1s alternate infinite;
		}
		@keyframes flash{
			0%{ opacity: 0; }

最低0.47元/天解锁文章

Web-once

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
纯JS+CSS3制作星星海背景特效

今天刚学的用JS和CSS3制作星星海特效图片自己用PS简单做的一个星星，png格式js代码中有必要的步骤注释主要用到了随机函数，这个很重要，它让界面变得很炫，不是单调的闪烁，星星的变化主要是透明度和大小，动画展开时间不一样，设置了推迟时间，鼠标放到上面还会旋转放大。另外我在学习的基础上更加完善了代码，在浏览器窗口缩放的同时，星星海特效会再次刷新，以便适应不同大小的屏幕，用户体验更加...
复制链接

扫一扫