本篇文章为大家展示了使用javascript编写一个星星闪耀特效，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。JavaScript的特点1.JavaScript主要用来向html页面添加交互行为。2
本篇文章为大家展示了使用javascript编写一个星星闪耀特效，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
1.JavaScript主要用来向html页面添加交互行为。2.JavaScript可以直接嵌入到HTML页面，但写成单独的js文件有利于结构和行为的分离。3.JavaScript具有跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行。
思路：
准备一张星星的图片
2、创建多个星星（可以利用for循坏）
3、求出可视网页的宽高 clientWidth，clientHeight
4、设置星星的随机坐标 利用 Math.random()
5、设置星星的缩放可以用CSS中的scale
6、设置星星的缩放延迟频率 animationDelay
7、给星星加动画（鼠标移动时，星星方法旋转）
代码如下
<style> *{ margin: 0; padding: 0; list-style: none; } body{ background-color: #000; } span{ width: 30px; height: 30px; background: url("../images_js/star.png") no-repeat; position: absolute; background-size:100% 100%; animation: flash 1s alternate infinite; } @keyframes flash { 0%{opacity: 0;} 100%{opacity: 1;} } span:hover{ transfORM: scale(3, 3) rotate(180deg) !important; transition: all 1s; } </style></head><body><script> window.onload = function () { // 1. 求出屏幕的尺寸 var screenW = document.documentElement.clientWidth; var screenH = document.documentElement.clientHeight; // 2. 动态创建星星 for(var i=0; i<150; i++){ // 2.1 创建星星 var span = document.createElement('span'); document.body.appendChild(span); // 2.2 随机的坐标 var x = parseInt(Math.random() * screenW); var y = parseInt(Math.random() * screenH); span.style.left = x + 'px'; span.style.top = y + 'px'; // 2.3 随机缩放 var scale = Math.random() * 1.5; span.style.transform = 'scale('+ scale + ', ' + scale + ')'; // 2.4 频率 var rate = Math.random() * 1.5; span.style.animationDelay = rate + 's'; } }</script>上述内容就是使用JavaScript编写一个星星闪耀特效，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。
--结束END--
本文标题: 使用JavaScript编写一个星星闪耀特效
本文链接: https://lsjlt.com/news/248294.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0