开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js实现星星闪烁效果

要实现星星闪烁效果，我们可以使用JavaScript结合CSS动画来完成。以下是实现这一效果的基础概念、优势、类型、应用场景以及具体的代码示例。

基础概念

CSS动画：通过CSS的@keyframes规则定义动画序列，然后应用到HTML元素上。
JavaScript：用于动态创建和控制HTML元素，以及启动和管理CSS动画。

优势

视觉吸引力：闪烁效果能吸引用户的注意力。
交互性：可以通过JavaScript控制闪烁的频率和模式，增加用户互动体验。

类型

单一闪烁：单个星星随机闪烁。
群体闪烁：多个星星以不同频率和亮度闪烁。

应用场景

网站背景装饰：为网页添加动态背景。
游戏界面：在游戏界面中模拟星空效果。
节日装饰：如圣诞节星星闪烁特效。

实现步骤与代码示例

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Starfield Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="starfield"></div>
<script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: black;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: blink 1s infinite;
}

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

JavaScript脚本

// script.js
document.addEventListener('DOMContentLoaded', function() {
  const starfield = document.getElementById('starfield');
  const numStars = 100;

  for (let i = 0; i < numStars; i++) {
    const star = document.createElement('div');
    star.className = 'star';
    star.style.left = `${Math.random() * 100}vw`;
    star.style.top = `${Math.random() * 100}vh`;
    star.style.animationDuration = `${Math.random() * 2 + 1}s`; // Random duration between 1 and 3 seconds
    starfield.appendChild(star);
  }
});

解释

HTML：创建一个容器div用于放置星星。
CSS：定义星星的基本样式和闪烁动画。
JavaScript：在页面加载完成后，动态生成指定数量的星星，并随机设置它们的位置和动画持续时间。

可能遇到的问题及解决方法

性能问题：如果星星数量过多，可能会导致页面卡顿。
- 解决方法：减少星星数量或使用requestAnimationFrame优化动画性能。

动画不同步：所有星星的动画可能看起来不够自然。
- 解决方法：为每个星星设置随机的动画延迟和持续时间，使其看起来更自然。

通过以上步骤和代码示例，你可以实现一个简单的星星闪烁效果，并根据需要进行调整和优化。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js网页离开时标签栏闪烁效果

之前有朋友问我博客里浏览器标签栏闪烁效果怎么做的今天把代码贴出来吧 // 使用message对象封装消息 var message = { time: 0,...var title = message.title.replace("【　　　】", "").replace("【新消息】", ""); // 定时器，设置消息切换频率闪烁效果就此产生

2.3K1 0

文字闪烁效果 CSS + HTML

文字闪烁效果 CSS 写在前面好好学习，天天向上！...效果图绝美的效果实现过程先给没字体添加一些普通的样式，颜色设置为透明给文字设置一个动画效果，通过text-shadow属性来实现变亮的效果，同时通过透明色和白色的切换实现文字闪烁的效果给每个字设置一定的动画延时...，从而实现流水的效果代码部分 HTML b l a...="IE=edge"> 字体闪烁效果

9K2 0

css - 评分效果的星星✨外衣

这种效果，如果遇到一分一个星，没有半星（或者有也可以，直接加一个半星的类名）的情况，还可以通过添加多个结构实现。...但是再加上这星星都要渐变效果，我当时差点找设计谈谈去（当然是求人家改成不渐变啊）。不过真的去的话，显得咱们太不专业了不是，好看的效果都实现不了，还叫什么前端。乖乖坐下来看设计稿。...这么直接看的话，可能没有思路，不过可以换一种方式来思考：先想想下边这种效果怎实现的？ ? 怎么样，是不是看了这个，对于星星效果的实现也有了思路了已经？！好，解散。...彩色星星的实现：利用这个思路，其实彩色进度条和彩色星星进度条就是差星星（这也是一句废话）但关键思路点在于，不要把星星看做是进度条。也就是说星星评分和一般的进度条效果实现起来一样。...然后当有数据值得时候，改变彩色条span.progress的宽度为百分比即可实现视觉上星星个数的变化 ? ? ?

1.7K2 1

JS 实现全屏效果

事件 document.addEventListener('fullscreenchange', () => { console.log('fullscreenchange') }) Vue项目实现地址

17K2 0

Js 实现 marquee 效果

使用RequestAnimationFrame，核心部分就是利用transformX实现位移 Js 逻辑写的比较挫，还要想想怎么改进，或者有更好的思路。...然后就是如何计算第一个p标签和第二个p标签移出了可视区域，可视区域不一定是屏幕宽度，可能是一个div设置了width和overflow实现的。另外就是从左往右以及从右往左的区别。...之类的一个倍数，用这个倍数和目前正在变化时拿到的translateX的值 / 可视区域的宽度假设是3倍，那么第二步计算出的值如果正好是3，说明文字的末尾已经出现在‘可视区域’，此时➕一个系数x，就可以实现两段文字的间隔

8.1K2 0

原生JS实现分页效果

做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生...JS如何实现一个分页效果呢？...接下来给大家分享一段分页代码实现下面的效果。 ? 原生JS...实现分页效果 a { margin: 5px; }

12.4K1 0

原生JS实现魔方效果

给大家分享一个用原生JS实现的魔方效果，效果如下：以下是代码实现：原生JS实现魔方效果 <style type=

7.3K1 0

JS实现图片弹窗效果

近期正在鼓捣个人网站，想实现进入网站自动弹出二维码的效果，类似下面这样： ?...中间磨磨唧唧从原生JS找到JS插件，浪费了不少精力和时间，但是也磕磕碰碰学到了些知识，建议读者：想学一下弹窗的JS实现代码的可以看看前两小节，只想实现效果的，直接复制源码就行！...一点击鼠标实现弹出/隐藏图片 ? 实现原理：一个div做容器，里面包含了二维码图片，把标题（鼠标点击的目标）做一个onclick监听，用div的display属性控制图片的显示和隐藏。...利用jquery.popup.js可以实现图中炫酷的动画效果, 支持animate.css。...">x js/jquery-1.11.0.min.js" type="text/javascript"> <script

23.8K3 0

原生js实现图片轮播效果

-- 图片部分,style部分设置便于js中改变偏移量，从而实现图片轮播--> 14 15...-- 箭头部分，实现下一张，上一张效果 --> 25 < 26...-- html body部分加载完成，最后调用js,进行操作；否则无法有效操作 --> 40 js"></script...{ 92 background-color: red; 93 } 94 .point span:active{ 95 background-color: gold; 96 } 1.js...(); 14 } 15 // 点击左箭头，上一张图片 16 arrow_left.onclick = function() { 17 prev_pic(); 18 } 19 20 // 函数实现下一张浏览效果

17.1K6 0

js实现跑马灯效果

2015-04-07 11:42:58 在我们浏览网页的时候，经常会看到照片循环播放的效果，这种效果有时候也会应用在商品的展示，通过图片的轮播可以有效的展示所有图片，并且节约网页空间，同时优化了网页的视觉效果...，下面看一下实现的代码： <DIV id=demo style="OVERFLOW: hidden...150px; height: 100px; display:block;} a:hover{ background: url(02.jpg) no-repeat;} 这段简单的代码就实现了这种图片轮播的效果...，其实这种效果还有一个别名，就是我这个标题所说的跑马灯。...有兴趣的朋友还可以拓展一下，把table改为div或者其他形式，在增加一下js特效也非常好。

6K2 0

小功能⭐️Unity中利用材质自发光实现物体闪烁效果

本文基于VDer的文章《Unity中利用材质自发光实现物体闪烁效果》延伸开发在实现了具有一个Material的物体闪烁发光之后，延伸开发了具有多个Material的自闪烁效果，感谢VDer的技术分享！...使用方法：直接将该脚本挂到物体上，AutoStart为自动闪烁。具体功能看脚本。...2019.12.21更新：若物体不闪烁，参照ViveFocus博客：链接 2019.05.21更新：该脚本所挂物体Start时现在可以处于关闭状态啦（原先初始化时必须激活，否则不闪烁）.../// [Tooltip("闪烁频率，取值范围[0.2,30.0]。")]...1; Debug.LogError("闪烁频率超出取值范围[0.2, 30.0]，已重置为1.0。")

1211 0

js实现拖动组件移动效果

2015-04-15 14:06:09 今天我来给大家介绍一种js特效，这种特效是当你用鼠标点击组件移动到其他地方后，这个组件就定在了那个地方，这种效果通常用来做视图化排版的。...p>column3 item4 这段代码是html代码，主要是大体的div布局，我们在这里的组件用的是div，通过下面的js...代码来实现组件的移动 js"> <script type="text/javascript...;border-bottom:solid 1px #CCCCCC;background:#CCCCCC;color:white;cursor:move;} 这样就可以实现组件的移动了...，在上面这段代码中需要引入Drag.js文件，本站提供下载链接，点击下面的下载即可。

10.1K2 0

JavaScript之JS实现动画效果

所以为了实现动画效果,我们必须创造出时间间隔来,而这正是实现动画效果的关键！所以我们来说下时间动画效果的第二个要素时间！ ...document.getElementsByName) return false; return true; } 上面这段代码完美的实现了我们想要实现的动画效果...,通过每次移动一点位置和setTimeout()函数配合,实现了这个效果，代码观察代码发现上面这段代码还可以优化,让它变得更加的通用!...上面这段代码实现的特效的是：当鼠标放到超链接上,就能以动画的效果显示对应的字母。...效果很酷,但是代码存在一点小瑕疵,这点我们经常容易忽视,问题就是,当我们把鼠标指针在链接之间快速的来回移动,动画效果将变得混乱起来。

11.2K8 1

JS实现焦点图轮播效果

其原理是：第一张图片(5.jpg)和最后一张图片(1.jpg)的作用是为了实现无限滚动的效果，因为此效果是通过设置id为list的div容器的left值来实现图片切换的，所以当轮播到第五张图片(5.jpg...由于最后一张图片就是第一张图片(1.jpg)，所以用户肉眼看上去没有什么变化，就这样实现了无限滚动的效果，其他同理！...好了，最重要的还是JS实现轮播效果：首先来实现最简单的通过左右按钮来实现切换： window.onload = function () { var container = document.getElementById...，之前已经实现的效果是直接切换，而我们想要的是能够平滑过渡，体验会好一些。...最后实现自动播放效果，当鼠标不点击时，它能自动播放，这里用到setInterval定时器，每次3秒执行一次点击事件，而当鼠标移上去的时候清除该事件，离开的时候又自动播放。

15.2K6 1

永夜星河主题特效2（星河背景 + 闪烁文字+点击星星 + 文字弹出特效）

图片展示星河背景 + 闪烁文字+点击星星 + 文字弹出特效 <!..., '星星为你闪烁！', '祝你每天开心！', '你的笑容点亮我的星空！'...：点击页面时，会在鼠标位置生成一颗星星，慢慢变大并消失，模拟星星散落的效果。...星星使用 div 和 CSS 动画实现，配合鼠标点击事件动态生成。动态文字彩蛋：点击后随机显示一句温暖的“彩蛋文字”，比如“你是我心中的星河女主角！”、“星星为你闪烁！”等。...视觉效果：页面背景使用渐变模拟夜空，标题文字带有“光晕”效果。特效简单又有趣，文字内容可以根据对方喜好自定义，增强专属感。

781 0

原生JS实现Tab切换效果和模态框效果

原生JS实现Tab切换效果效果展示 <!...tabPanels[index].classList.add('active'); } }) 原生JS...实现模态框效果效果展示 <!

9.8K5 0

星星穿梭动画简单实现

就是图中类似飞出来的一个个白点，看起来像是不断的有星星往外飞这样一个效果。动画效果比较简单，简单说下实现吧。首先，我们把动画简单化，实现一个星星往外飞的效果。...画好矩形之后，我们观察最后的动画效果。星星是从中间往外飞的，怎么实现一个往外飞的轨迹呢。毫无疑问，我们现在的重点就是找到一个数学公式，来表示随着时间x, y 两个值的变化。...根据这个公式，再使用我们再熟悉不过的requestAnimationFrame，我们就可以把一个矩形往外飞的动画画出来了，效果类似这样： ?...从一个星星到多个星星的实现很简单，一个循环 + 随机位置就搞定了。这里就不细说了，直接看代码吧。...pixelX, pixelY, pixelRadius, pixelRadius); c.fillStyle = `rgba(255, 255, 255, ${star.o})`; } 这样，就简单实现我们想要的星星穿梭效果啦

8912 0

js实现元素从远处飞入效果

2015-04-20 03:53:02 今天为大家介绍一个效果，效果是实现元素有从远处飞入的效果，例如说一个人伸着拳头飞出来这样，具体的例子可以查看下面的演示，在这里我实现的是文字的飞入效果，他还可以实现图片等其他元素的飞入效果...我先来贴一下代码吧落帆亭实现元素飞入效果 .center {position: absolute...;width: 100%;height: 100%;margin: 0;overflow: hidden;} js.../jquery-2.0.0.min.js"> js/TweenMax.min.js" type="text/javascript" charset="utf-...另外本站还提供上面需要的两个js文件，有需要的朋友可以下载。

2.4K2 0

js+css实现模态层效果

在做web前端的时候，有些时候会涉及到模态层，在此提供一种实现思路，希望对大家有用。先贴效果吧： ?...模态层效果下面说说在写模态层的时候的思路：通过可配置的参数width，height，title以及content用来设定弹出的信息框显示的内容，并通过可配置参数container用来设定模态层显示的区域...思路很简单，主要是一些css样式和js处理，详见源码： modal.css html,body{ font-size: 12px; font-family: "微软雅黑"; } .modal...hover{ cursor: pointer; } .content{ padding-left: 10px; padding-top: 10px; } jquery.modal.js..."> js"> <script type="text

3.3K4 0

JS+CSS 3实现图片滑块效果

原文地址：https://segmentfault.com/a/1190000023056917 原文作者：小豪效果 ?...分析该动画，可拆分成两个步骤：鼠标移入或者移出时，添加一个动画 class 实现该动画 class，实现移入移出动画图片瀑布流布局可参考 Vue 手写图片瀑布流组件(附源码) HTML 和 CSS...100% { transform: translate3d(0, 0, 0); } } 刚开始让 mask 置于父容器外，100%时刚好到达父容器右边界，同理很容易写出各个方向的 css 动画 JS...开始写 js 逻辑，绑定鼠标移入移出事件 imgEventHandle

5.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭