Starlight.js是一款可以制作炫酷网页背景灯光闪烁特效的jQuery插件。你可以通过该插件定义任何比例的闪烁灯光效果，也可以在多个元素中应用灯光效果。在Banner中使用它可以得到非常炫酷的效果。

使用方法

使用该灯光闪烁特效需要引入jQuery和starlight.js，以及sample.css文件。

<link rel="stylesheet" href="css/sample.css">
<script src="js/jquery.min.js"></script>
<script src="js/starlight.js"></script>
HTML结构

在你需要制作灯光闪烁效果的元素上添加starlight class。

<div class="starlight"></div>

完成上面的步骤之后就可以使用该灯光闪烁效果了。

配置参数

如果你需要自定义该灯光闪烁特效的一些参数，可以直接在starlight.js文件中修改user_configuration配置。可用的参数如下：

  • shape：灯光的形状，可以是circle或square。
  • initial_size：灯光的初始尺寸，例如32px。
  • final_size：灯光扩展后的最终尺寸。
  • expand_speed：灯光扩展（闪烁）的速度，CSS时间，例如1s。
  • fade_delay：灯光开始闪烁前的延迟时间，CSS时间，例如1s。
  • fade_duration：灯光闪烁的持续时间，CSS时间，例如0.5s。
  • colors：一组可用的灯光颜色，灯光闪烁时会随机挑选一种颜色。可以使任何CSS可用的颜色，例如rgba(255,255,255,0.5)。
  • frequency：灯光产生时间的延迟，单位毫秒，例如250。
  • density：每一波有多少灯光产生，例如：5。
  • keep_lit：灯光是否淡出。可以设置true或false。
  • rotation：灯光是否旋转。可以设置true或false。
  • coverage：灯光会出现在元素区域的位置。可选范围0-1，例如0.75表示75%的元素区域。
  • target_class：灯光闪烁的元素的class，例如.starlight。
  • custom_svg：该属性目前还未被支持。是否使用自己的SVG图形来替代灯光图形。