超越纯CSS3，超赞阴影效果推荐-shine.js

浏览数：18 / 时间：2015年06月09日

前段时间一直在忙微课比赛的事情，博客更新比较少，抱歉，今天抽空一更。

1.简介

前面我们曾经用两篇文章《纯CSS3文字效果推荐》、《CSS3立体文字最佳实践》给大家介绍过利用CSS3 text-shaodwo实现阴影文字、立体文字效果，但是纯css3实现的方式也有局限性，比如大量应用时会延缓页面加载速度，效果的可控制性不强，今天给大家推荐一个js插件来弥补这些缺失，隆重推出shine.js。

大家可以看看这篇文章《Better than Pure CSS3》学学使用方法，也可以到官方网站具体学习。

2.使用步骤

a. 引入插件

<script src="path/to/shine.min.js"></script>

b. 实例化shine.js

//默认参数实例化，my-shine-object为需要添加阴影的元素
var shine = new Shine(document.getElementById(‘my-shine-object‘));

我们也可以先设置参数，然后实例化对象

var shine_config = new shinejs.Config({
	numSteps: 10,
	offset = 0.25,
	blur: 100,
	opacity: 0.5,
	shadowRGB: new shinejs.Color(255, 0, 0)
});
var shine = new Shine(document.getElementById("my-shine-object"), shine_config);

c. 阴影的相关操作

我们可以设置阴影的鼠标移动响应

window.addEventListener(‘mousemove‘, function(event) {
  shine.light.position.x = event.clientX;
  shine.light.position.y = event.clientY;
  shine.draw();
}, false);

3.API详解

API详解请大家参考官方github主页。

a.构造方法

Shine(domElement, optConfig, optClassPrefix, optShadowProperty)

Parameter	Type	Description
domElement	`!HTMLElement`	应用阴影的元素
optConfig	`?shinejs.Config=`	存储阴影参数的配置对象（Optional config instance），可省略，如果省略将传递默认参数。
optClassPrefix	`?string=`	给所有的阴影对象增加前缀，默认为shine-。
optShadowProperty	`?string=`	Optional property name that the shadow will be applied to. Overrides the automatic detection for use of either`textShadow` or `boxShadow`. The value will be applied as`element.style[shadowProperty] = ‘...‘` and automatically prefixed for legacy browsers (e.g. `MozBoxShadow`).

b.常用方法

Shine.prototype.draw()
Shine.prototype.destroy()
Shine.prototype.updateContent(optText)
Shine.prototype.enableAutoUpdates()
Shine.prototype.disableAutoUpdates()

c. 常用属性

Property	Type	Description
domElement	`HTMLElement`	The DOM element to apply the shine effect to.
config	`shinejs.Config`	Stores all config parameters.
light	`shinejs.Light`	Stores the light position and intensity.