如何利用JSCSS实现根据数值显示星星

JavaScript027

如何利用JSCSS实现根据数值显示星星,第1张

实现思路如下:

在页面初始化一个星星。

js中,根据数值去进行循环,clone()页面中的星星。

然后显示追加到页面中。

这样就完成了。

如图所示,当鼠标移上canvas区域的时候,显示星星闪烁的效果,星星本身还会有一个缓慢飘动的速度,当星星飘出canvas区域的时候,该星星消失,canvas区域的某个地方又会重生一个星星。

首先准备两张图片:

背景图:girl.jpg

星星的序列帧图片:star.png

js库:commonFunctions.js

项目主文件:index.html

文件目录如下:

星星闪烁有很多种方法,比如关键帧动画,补间动画以及使用代码实现。

最简单的就是关键帧动画,第一帧是原大小的星星,第二帧调整星星的大小,形状闪烁的效果,不过不够随机,所以还是用补间动画更好一些,使用图形元件,可以让起始帧随机一些,然后再调整大小和透明度旋转角度等,就可以制作很自然的星星效果了。