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

JavaScript014

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

实现思路如下：

在页面初始化一个星星。

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

然后显示追加到页面中。

这样就完成了。

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

首先准备两张图片：

背景图：girl.jpg

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

js库：commonFunctions.js

项目主文件：index.html

文件目录如下：

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

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