分享更有价值
被信任是一种快乐

如何使用CSS 、JS实现浪漫流星雨动画

文章页正文上

小编给大家分享一下如何使用CSS 、JS实现浪漫流星雨动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
  HTML
  由于节点很多,并且我想尽量做得逼真有趣有点,还给节点加了随机位置。所以节点的输出都是用JS控制的,HTML这边只写了几个父元素盒子,加上相应的ID名和类类名,结构相对简单。
  CSS
  CSS部分的难点就是流星的样式和用圈圈画云层,然后将云层堆叠出立体效果。
  首先说一下流星的样式:
  #sky.star{position:absolute;
  不透明度:0;
  z-index:10000;
  }
  .star::after{content:“”;
  显示:块;
  边界:坚固;border-width:2px02px80px;
  /*流星随长度逐渐缩小*/
  border-color:透明透明透明rgba(255,255,255,1);border-radius:2px002px;transform:rotate(-45deg);transform-origin:000;
  盒子阴影:0020pxrgba(255,255,255,.3);
  }
  先提取了公共样式,添加定位属性;
  然后在星后通过后伪类添加流星,用边界特性画:
  1)模型绘制:border-width的顺序为四边top,right,bottom,left,同理border-color的顺序也为四边top,right,bottom,left。这样将border-width与border-color一一对应后,就能看出2px的是流星的宽度,80px是流星的长度,而0像素流星就是尾巴的这样就形成了一个。头部2px的宽,尾部0像素,长度80px的流星模型;
  2)稍微逼真:通过边界半径?给流星的头部增加个圆角,让它看起来更逼真最后通过roteta旋转一个角度,让它看起来像是往下掉;
  3)增加闪光:通过箱阴影给流星增加一点光晕,让它看起来有闪光的效果;
  通过以上3步,一个流星就画好了。
  然后是画云:
  因为云的代码比较长,这里就不贴出来了方法无非是通过一个一个的圆,相互叠加覆盖,完成一个云朵的形状。
  完成一个云层之后,copy一个,然后多个云层通过rotate,opacity,left定位等,做出一个渐隐叠加的立体效果;
  JS
  JS部分以流星举例说明:
  setInterval(function(){
  constobj=addChild(“#sky”,“div”,2,“star”);//插入流星
  for(leti=0;i

  consttop=-50+Math.random()*200+“px”,

  left=200+Math.random()*1200+“px”,

  scale=0.3+Math.random()*0.5;

  consttimer=1000+Math.random()*1000;

  obj.children[i].style.top=top;

  obj.children[i].style.left=left;

  obj.children[i免费云主机、域名].style.transform=`scale(${scale})`;

  //添加动画

  requestAnimation({

  ele:obj.children[i],

  attr:[“top”,“left”,“opacity”],

  值:[150,-150,.8],

  time:timer,

  flag:false,

  fn:function(){

  requestAnimation({

  ELE:obj.children[I],

  ATTR:“顶”,“左”,“不透明”],

  值:[150,-150,0],

  时间:定时器,

  标志:假,

  FN:()=>{

  obj.parent.removeChild(obj.children[I]);//动画结束删除节点

  }

  })

  }

  });

  }

  },1000);

  这里边用到了我自己封装的两个方法,一个是基于requestAnimationFrame的requestAnimation,以及基于appendChild的addChild。

  为了达成星星位置随机的效果,通过定时器的setInterval的不停插入与删除流星:

  首先,每次添加2个流星到页面,但是定时器的间隔时间小于流星的动画时间,这样就能保证页面中的流星的数量不是一个固定值,但肯定是大于2的。不然一次2个流星略显冷清;

  然后,通过对循环(也可以用为式,换的,都行。对于-的最简单)给每个新添加到页面中的流星一个随机的位置(顶部,左侧),随机的大小(规模),随机的动画执行时间(定时器);

  最后,在用于循环中,给每个新添加到页面中的流星加上动画,并通过回调函数在执行完动画后删除节点。这里要注意的是,要动画分成两个阶段(出现与消失,主要是opacity控制)。另外我这里的处理,每个流星都移动相同的距离300px,这个距离我觉得也可以通过随机数控制,但我犯了个懒,就没有做。

  附上代码:

  HTML:

  


  consttop=-50+Math.random()*200+“px”,
  left=200+Math.random()*1200+“px”,
  scale=0.3+Math.random()*0.5;
  consttimer=1000+Math.random()*1000;
  obj.children[i].style.top=top;
  obj.children[i].style.left=left;
  obj.children[i].style.transform=`scale(${scale})`;
  //添加动画
  requestAnimation({
  ele:obj.children[i],
  attr:[“top”,“left”,“opacity”],
  值:[150,-150,.8],
  time:timer,
  flag:false,
  fn:function(){
  requestAnimation({
  ELE:obj.children[I],
  ATTR:“顶”,“左”,“不透明”],
  值:[150,-150,0],
  时间:定时器,
  标志:假,
  FN:()=>{
  obj.parent.removeChild(obj.children[I]);//动画结束删除节点
  }
  })
  }
  });
  }
  },1000);
  这里边用到了我自己封装的两个方法,一个是基于requestAnimationFrame的requestAnimation,以及基于appendChild的addChild。
  为了达成星星位置随机的效果,通过定时器的setInterval的不停插入与删除流星:
  首先,每次添加2个流星到页面,但是定时器的间隔时间小于流星的动画时间,这样就能保证页面中的流星的数量不是一个固定值,但肯定是大于2的。不然一次2个流星略显冷清;
  然后,通过对循环(也可以用为式,换的,都行。对于-的最简单)给每个新添加到页面中的流星一个随机的位置(顶部,左侧),随机的大小(规模),随机的动画执行时间(定时器);
  最后,在用于循环中,给每个新添加到页面中的流星加上动画,并通过回调函数在执行完动画后删除节点。这里要注意的是,要动画分成两个阶段(出现与消失,主要是opacity控制)。另外我这里的处理,每个流星都移动相同的距离300px,这个距离我觉得也可以通过随机数控制,但我犯了个懒,就没有做。
  附上代码:
  HTML:
  
     

相关推荐: es6中的yield怎么用

这篇文章主要介绍“es6中的yield怎么用”的相关知识,小编通过免费云主机、域名实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“es6中的yield怎么用”文章能帮助大家解决问题。 在es6中,yield用于暂停和恢复一个遍历器函数的运行;…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册