昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~
首先创建一个 div 作为画布
#stars </span>{<span style="color: #ff0000;">
margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
max-width</span>:<span style="color: #0000ff;"> 1600px</span>;<span style="color: #ff0000;">
position</span>:<span style="color: #0000ff;"> fixed</span>;<span style="color: #ff0000;">
top</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
right</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
bottom</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;">
z-index</span>:<span style="color: #0000ff;"> 2</span>;
}</pre>
为了防止浏览器分辨率太大而影响视觉效果,给画布加了 max-width 和 margin:auto
然后画出流星的形状
.star:after </span>{<span style="color: #ff0000;">
content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
border</span>:<span style="color: #0000ff;"> 0px solid #fff</span>;<span style="color: #ff0000;">
border-width</span>:<span style="color: #0000ff;"> 0px 90px 2px 90px</span>;<span style="color: #ff0000;">
border-color</span>:<span style="color: #0000ff;"> transparent transparent transparent rgba(255,255,.5)</span>;<span style="color: #ff0000;">
box-shadow</span>:<span style="color: #0000ff;"> 0 0 1px 0 rgba(255,.1)</span>;
<span style="color: #008000;">/*</span><span style="color: #008000;">变形</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
transform</span>:<span style="color: #0000ff;"> rotate(-45deg) translate3d(1px,3px,0)</span>;<span style="color: #ff0000;">
-webkit-transform</span>:<span style="color: #0000ff;"> rotate(-45deg) translate3d(1px,0)</span>;<span style="color: #ff0000;">
-moz-transform</span>:<span style="color: #0000ff;"> rotate(-45deg) translate3d(1px,0)</span>;<span style="color: #ff0000;">
transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">
-webkit-transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;">
-moz-transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;
}</pre>
创建动画,实现流星划过、渐入渐隐的效果
在50%的节点上,我没有加上 scale(1)
<span style="color: #0000ff;">for (<span style="color: #0000ff;">var j=<span style="color: #800080;">0;j<<span style="color: #800080;">30;j++<span style="color: #000000;">) {
<span style="color: #0000ff;">var newStar = document.createElement(<span style="color: #800000;">"<span style="color: #800000;">div<span style="color: #800000;">"<span style="color: #000000;">)
newStar.className = <span style="color: #800000;">"<span style="color: #800000;">star<span style="color: #800000;">"<span style="color: #000000;">
newStar.style.top = randomDistance(<span style="color: #800080;">500,-<span style="color: #800080;">100) + <span style="color: #800000;">'<span style="color: #800000;">px<span style="color: #800000;">'<span style="color: #000000;">
newStar.style.left = randomDistance(<span style="color: #800080;">1300,<span style="color: #800080;">300) + <span style="color: #800000;">'<span style="color: #800000;">px<span style="color: #800000;">'<span style="color: #000000;">
stars.appendChild(newStar)
}
<span style="color: #008000;">//<span style="color: #008000;"> 封装随机数方法
<span style="color: #000000;"> function randomDistance (max,min) {
<span style="color: #0000ff;">var distance = Math.floor(Math.random() * (max - min + <span style="color: #800080;">1) +<span style="color: #000000;"> min)
<span style="color: #0000ff;">return<span style="color: #000000;"> distance
}
通过 js 动态生成流星,保证 left 和 top 的值在某一范围内随机,就能产生较好的效果
然后用 js 添加动画延时,让流星不会同时出现
<span style="color: #0000ff;">for (<span style="color: #0000ff;">var i = 0,len = star.length; i < len; i++<span style="color: #000000;">)
{ <span style="color: #000000;"> <span style="color: #000000;">star[i].style.animationDelay = i % 6 == 0 ?<span style="color: #000000;"> '0s' :<span style="color: #000000;"> i * 0.8 + 's'<span style="color: #000000;">
}
为了防止一开始只有一个流星的尴尬场面,我将 index 为 6 的倍数的流星设为一开始就出现
查看在线示例
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。