js实现星星海特效的示例

2024-10-03 12:30:41

首先需要获取屏幕大小：

 var screenWidth = document.documentElement.clientWidth;
 var screenHeight = document.documentElement.clientHeight;

接着可以定义动画（星星透明度）：

@keyframes flash {
   0%{opacity: 0}
   25%{opacity: 0.25}
   50%{opacity: 0.5}
   75%{opacity: 0.75}
   100%{opacity: 1}
  }

全部代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  div{
   width: 70px;
   height: 80px;
   background: url("./images/star.jpg") no-repeat;
   animation: flash 1s;
  }
  body{
   background-color: black
  }
  @keyframes flash {
   0%{opacity: 0}
   25%{opacity: 0.25}
   50%{opacity: 0.5}
   75%{opacity: 0.75}
   100%{opacity: 1}
  }
 </style>
</head>
<body>

<script>
 var screenWidth = document.documentElement.clientWidth;
 var screenHeight = document.documentElement.clientHeight;
 // 生产50个星星
 for (let i = 0; i <50 ; i++) {
  var box=document.createElement('div');
  document.body.appendChild(box);
  x=Math.random()*screenWidth;
  y=Math.random()*screenHeight;
  box.style.position='relative';
  box.style.left=x+'px';
  box.style.right=y+'px';
 }
 boxList=document.getElementsByTagName("div");
 for (let i = 0; i < boxList.length; i++) {
  boxList[i].onmouseover=function () {
   this.style.transform='scale(1.5,1.5)';
  };
  boxList[i].onmouseout=function () {
   this.style.transform='scale(1,1)';
  };
 }
</script>
</body>
</html>

效果如下：

以上就是js实现星星海特效的示例的详细内容，更多关于js 星星海特效的资料请关注我们其它相关文章！

原生js实现轮播图特效

轮播图也称为焦点图,是网页中比较常见的网页特效. 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理. 3.图片播放的同时,下面小圆圈模块跟随一起变化. 4.点击小圆圈,可以播放相应图片. 5.鼠标不经过轮播图,轮播图也会自动播放图片. 6.鼠标经过,轮播图模块, 自动播放停止. 此文章的代码为一个完整的轮播图的实现代码,复制即可运行实现效果由于大小问题无法上传,可自行观看淘宝或京东首页轮
js实现3D粒子酷炫动态旋转特效

js实现3D粒子酷炫动态旋转特效(效果比较酷炫,中途不仅有形态的变换,还有颜色的变化,希望大家能够喜欢) 代码实现过程中的静态截图 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTEN
js实现轮播图特效

本文实例为大家分享了js实现轮播图特效的具体代码,供大家参考,具体内容如下只需要修改图片的src即可 html: <body> <div id="rollImgBox"> <div class="photos clearfix">  <div class="move"><img src="img/ti
js实现无缝轮播图特效

用原生js实现无缝轮播图,供大家参考,具体内容如下 index.js: var config = { imgWidth:380,//图片尺寸 dotWidth:8,//小圆点尺寸 doms:{ divImgs:document.querySelector('.imgs'), divDots:document.querySelector('.circle'), divDirection:document.querySelector('.direction'), divContainer:docum
js+css3实现简单时钟特效

本文实例为大家分享了js+css3实现简单时钟的具体代码,供大家参考,具体内容如下 1.实现了时钟的特效,可以转动,时间准确,画面美观大气: 2.用到了css3的transform: rotate,transform-origin:,伪元素,border-radius,定位,z-index等等效果如图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl
JavaScript实现联动菜单特效

一篇关于JavaScript特效的文章,今天给大家带来联动菜单特效,这可能是一个系列哦! 效果图和以前一样,先发效果图,然后在进行讲解. 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>&l
JS实现页面鼠标点击出现图片特效

本文实例为大家分享了js实现页面鼠标点击出现图片,供大家参考,具体内容如下需求: 在页面可视区鼠标点击时,鼠标位置出现图片技术: 监听器,鼠标坐标获取效果图源码分享: 图片是动态添加进页面的,所以没有HTML部分. JS let div = document.createElement("div"); div.id = "mouseImg"; for (let i =0 ; i <3 ;i++){ let img = document.createEl
JS实现电商商品展示放大镜特效

本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下知识点 1.使用children获取字标签组 2.求当前鼠标坐标 3.碰撞检测 4.大小盒子通过比例同步运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>
JS实现商品橱窗特效

本文实例为大家分享了JS实现商品橱窗特效的具体代码,供大家参考,具体内容如下知识点换算公式 ① 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度滚动条长度/盒子的长度 = 盒子的长度/内容的长度 ② 内容走的距离 = (内容的长度 - 盒子的长度)/ (盒子的长度 - 滚动条的长度)* 滚动条走的距离运行效果代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset
JS实现吸顶特效

本文实例为大家分享了JS实现吸顶特效的具体代码,供大家参考,具体内容如下知识点 1.scroll家族和offset家族的结合运用 2.当nav的offsetTop大于屏幕卷去高度的时候,进行吸顶 3.添加一个固定类,如果满足条件,为nav加类名运行效果滚动页面时,保证导航栏吸顶代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
js实现烟花特效

本文实例为大家分享了js实现烟花特效的具体代码,供大家参考,具体内容如下 1.概述在网页背景中实现鼠标点击出现模拟烟花爆炸的特效 2.思路 1.获取鼠标点击位置,底端创建烟花节点. 2.为烟花添加css属性,烟花节点从下至上运动. 3.运动至鼠标位置时移除烟花节点,同时生成多个烟花碎片. 4.为不同的烟花碎片随机生成不同的颜色.运动速度.运动方向. 5.烟花碎片超出屏幕显示部分时移除. 3.代码部分 <!DOCTYPE html> <html lang="en"&g
js实现可爱的气泡特效

本文实例为大家分享了js实现可爱的气泡特效的具体代码,供大家参考,具体内容如下代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

js实现星星海特效的示例

相关推荐

随机推荐