做一个小特效，让星星亮起来，非常简单！

最新推荐文章于 2023-06-16 11:04:18 发布
最新推荐文章于 2023-06-16 11:04:18 发布
阅读量257 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Li13610030857/article/details/118303321
版权
这篇博客介绍如何使用HTML、CSS和JavaScript创建一个点击按钮后星星闪烁的特效。通过在HTML中设置input按钮和div容器，CSS定义样式，JavaScript处理点击事件并动态插入星星元素，实现了星星在页面上随机闪烁的效果。
摘要由CSDN通过智能技术生成

 HTML部分：

第一步我们需要写一个input标签，我给这个input标签命名为“点击亮起来”，再将input标签的类型改为button，我命名id为“btn”。然后第二步就是写一个div标签，id为“dvn”，这个div标签的作用是用来装从JavaScript传过来的星星的。代码如下图所示：

   CSS部分：

代码如图所示：

最低0.47元/天 解锁文章
金色天极限
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【动态星空(1)----html，css】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
12-08 3453
效果 代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>旋转的星空</title> <style type="text/css"> body{background: black;padding: 0;margin: 0; overflow:hidden} .header{margin: 0 auto;width: 100%;height: 100%
HTML5夜空中星星光晕动画特效.zip
最新发布
11-02
"HTML5夜空中星星光晕动画特效"是一个利用HTML5、CSS3以及可能结合jQuery实现的网页特效，旨在为用户创造出一种置身于璀璨星空的视觉体验。这个特效不仅能够增加网站的美观度，还能提升用户体验，让用户在浏览网页时...
投票点亮星星html,透过点亮星星实现评分效果，可自定义星星数
weixin_30310149的博客
06-25 277
当前位置:我的异常网» Web前端»透过点亮星星实现评分效果，可自定义星星数透过点亮星星实现评分效果，可自定义星星数www.myexceptions.net网友分享于：2013-11-01浏览：14次通过点亮星星实现评分效果，可自定义星星数网页特效 星星评分效果 站长特效网欢迎您#zzjs_net{position:relative;width:150px;height:30px;ba...
小按钮大宇宙，分享几个宇宙风格的按钮动效，让你爱上CSS
前端达人
03-09 1345
俗话说得好，兴趣是最好的老师。本篇文章搜集了几个漂亮的宇宙风格按钮动画效果的代码，希望它们能够激发你对 CSS 的热爱。作为前端开发者，我们不仅仅是制作写页面和与后端 API 打交道，偶尔也需要调味剂。废话不多说，让我们一起来解读这些 CSS 代码吧。1、灿烂星空HTML部分<button class="btn" type="button"> <strong>SPACE...
纯Javascript星级评价反馈实现点亮星星页面，鼠标点击星星上，星星自动亮且有提交反馈按钮
feng89284800的博客
06-16 357
【代码】纯Javascript星级评价反馈实现点亮星星页面，鼠标点击星星上，星星自动亮且有提交反馈按钮。 因为就学了一年的网页前端，能力有限，如果出现bug，请谅解
只使用HTML和CSS实现点亮五角星效果
iTaylorfan的博客
07-07 1277
1.点击一个亮一个 思路：使用链接标签a包裹li，设置li的ID属性，让父级a标签的href属性值为l子级li的ID(锚点)，点击父级a标签触发子级li标签的锚点，再结合:target伪类进行背景图片替换即可实现效果。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点击亮星星</title> <style type="text/css"&
CSS3星星发光闪烁动画特效
07-31
以下是一个简单的例子： ```css @keyframes twinkle { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } ``` 在这个关键帧动画中，我们设置了星星在0%和100%时完全可见（opacity: 1），在50%时...
Unity星空特效
12-24
接着，**星星特效**相对简单，可以使用大量小的白色或彩色粒子表示。Unity粒子系统可以轻松设置这些粒子的大小、亮度和随机移动，以模拟星空的繁星点点。另外，通过添加深度和模糊效果，可以增加星空的立体感和深度...
简单的星级评价css3特效
06-01
本教程将探讨如何使用CSS3来实现一个简单的星级评价系统，包括绘制星星形状以及实现鼠标悬停时的评级打分效果。 首先，我们需要理解CSS3中的关键形状属性，如`border-radius`和`transform`，它们可以帮助我们创建出...
夜晚星空发光月亮css3特效.zip
10-10
例如，可能有一个动画效果让月亮在不同的时间点改变其亮度，模拟月相的变化，或者让星星闪烁，增加动态感。 此外，考虑到标签中提到了"jQuery特效"，这可能意味着该特效还结合了jQuery库来辅助实现某些复杂交互或...
实现评价页面添加星星数量
weixin_30315905的博客
09-21 315
var num = finalnum = tempnum = 0; var lis = $(".star-box span"); //num:传入点亮星星的个数 //finalnum:最终点亮星星的个数 //tempnum:一个中间值 function fnShow(num) { ...
梦幻星空html,如何使用HTML5的canvas来画一个梦幻星空，快来学习一下吧 | 龙奔网...
weixin_39710966的博客
06-15 245
前言随着HTML5的火热，越来越多的人投入到HTML5开发中了，canvas作为HTML5中比较重要的一个元素，在很多官网的主页面中被使用到。今天我们一起来看看如何使用canvas画出一个梦幻的星空背景，还会有流星运动。本文的代码已经放到Github上了，感兴趣的可以自取，Github地址如下。https://github.com/zhouxiongking/article-pages/blob/...
html5制作星星闪烁和制作时钟
yang_tang的博客
06-03 2226
这次在w3和慕课网上学习html5制作了星星闪烁和时钟，期间也遇到了一些问题，比如getContext（）读不到数据，canvas不显示，好在通过百度还是查出来了，以下就是图片展示和代码： 1、星星闪烁图片展示 js代码： var can; var ctx; var w; var h; var padLeft = 360; var padTop = 100; var g
html闪星星特效,jquery和canvas炫酷星星闪烁特效插件
weixin_32248781的博客
06-04 707
jQuery-canvas-sparkles是一款jquery和canvas炫酷星星闪烁特效插件。该插件可以在DOM元素上制作出漂亮的星星闪烁效果。你可以指定星星的数量、颜色、尺寸和运动方向等。使用方法在页面中引入jquery和jquery-canvas-sparkles.js文件。HTML结构例如你需要为一张图片制作星星闪耀效果，它的HTML结构如下： 初始化插件在页面DOM元素加载完毕之...
html5闪光效果,HTML5 canvas元素背景梦幻小星星闪烁特效
weixin_42299150的博客
06-03 1290
这是一款使用HTML5 canvas制作的DOM元素背景梦幻小星星闪烁动画特效。该特效可以在任何HTML DOM元素上通过canvas来在鼠标滑过时制作星星闪烁的效果，可以为元素添加一些梦幻色彩。制作方法HTML结构可以是然后HTML DOM元素，但是如果是元素，必须使用一个对其进行包裹，否则没有效果。 CSS样式该DOM元素背景特效对CSS样式没有要求，你可以任意添加需要的CSS样式。如DEM...
用html=css绘制一颗星星,2.HTML+CSS制作一闪一闪亮晶晶的星星（stars）
weixin_32035057的博客
06-14 819
HTML code：CSS code：html,body{margin: 0;padding: 0;}body{height: 100vh;background-color: black;}.stars{position: relative;width: 100%;height: 100%;}.stars span{display: inline-block;position: absolute;...
如何用 HTML 和 CSS 实现跳动红心
m0_74211126的博客
04-09 1262
将上面的 HTML 和 CSS 代码组合在一起，即可得到一个跳动的红心。最后，我们通过将动画名称、持续时间、缓动函数和迭代次数设置为相应的值，将动画应用到了。伪元素来创建两个半圆，然后通过旋转和定位将它们组合成一个心形。的类，将其定位为相对位置，并为其设置了一个宽度和高度。函数来将红心上下移动，其中负数表示向上移动，正数表示向下移动。伪元素创建了两个半圆，并通过旋转和定位将其组合成了一个心形。首先，我们需要创建一个空的 HTML 文件，并在。在上面的代码中，我们定义了一个名为。的动画，并将其应用到了。
案例 ---点亮星星
lxhby520的博客
05-20 1616
步骤一：实现鼠标移入 左边的星星点亮 右边的星星熄灭 文字发生改变步骤二：实现鼠标移出 星星熄灭 文字发生改变步骤三：实现点击后 左边星星点亮 右边星星熄灭 文字发生改变移出鼠标 还是左边星星点亮 右边星星熄灭 分析步骤可知 点击效果和移入效果一样，这样点击效果不用写，只写移入效果 只是点击鼠标后移出鼠标后保存了状态即移出事件和移入事件一样只是取的值不同 分为点...
jQuery实现好评点亮星星
滴滴滴的博客
08-14 2836
说明：灰色星星和黄色星星分别为两个图片。运行截图如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt;
用html js做一个鼠标粒子星星特效
06-08
好的，下面是一个简单的示例代码，可以实现鼠标移动时，产生星星特效的效果： HTML代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标粒子星星特效</title> <style> canvas { position: absolute; top: 0; left: 0; z-index: -1; } </style> </head> <body> <h1>鼠标粒子星星特效</h1> <canvas id="canvas"></canvas> <script src="stars.js"></script> </body> </html> ``` JS代码（保存为stars.js文件）： ```javascript var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'), stars = [], maxStars = 100; canvas.width = window.innerWidth; canvas.height = window.innerHeight; function Star() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.radius = Math.random() * 2; this.vx = Math.random() * 0.5 - 0.25; this.vy = Math.random() * 0.5 - 0.25; } Star.prototype.move = function() { this.x += this.vx; this.y += this.vy; if (this.x < -this.radius || this.x > canvas.width + this.radius) { this.vx = -this.vx; } if (this.y < -this.radius || this.y > canvas.height + this.radius) { this.vy = -this.vy; } } Star.prototype.draw = function() { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = '#fff'; ctx.fill(); } function drawStar() { for (var i = 0; i < maxStars; i++) { stars[i].move(); stars[i].draw(); } } function init() { for (var i = 0; i < maxStars; i++) { stars[i] = new Star(); } setInterval(function() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawStar(); }, 30); } init(); canvas.addEventListener('mousemove', function(e) { for (var i = 0; i < maxStars; i++) { var dx = e.clientX - stars[i].x, dy = e.clientY - stars[i].y, distance = Math.sqrt(dx * dx + dy * dy), force = -distance / 1000; if (distance < 100) { stars[i].vx += dx * force; stars[i].vy += dy * force; } } }); ``` 这段代码实现了鼠标移动时，产生星星特效的效果。具体实现方式是：首先定义一个Star对象，包含星星的位置、大小、速度等属性，并定义move和draw方法分别用于更新星星的位置和绘制星星。然后在init函数中，初始化100个星星，并使用setInterval定时更新画面。最后，使用canvas的mousemove事件，来控制星星的运动方向和速度。 这只是一个简单的示例代码，如果需要更加复杂的效果，可以根据实际需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值