首页 > 代码库 > 超越纯CSS3,超赞阴影效果推荐-shine.js
超越纯CSS3,超赞阴影效果推荐-shine.js
前段时间一直在忙微课比赛的事情,博客更新比较少,抱歉,今天抽空一更。
1.简介
前面我们曾经用两篇文章《纯CSS3文字效果推荐》、《CSS3立体文字最佳实践》给大家介绍过利用CSS3 text-shaodwo实现阴影文字、立体文字效果,但是纯css3实现的方式也有局限性,比如大量应用时会延缓页面加载速度,效果的可控制性不强,今天给大家推荐一个js插件来弥补这些缺失,隆重推出shine.js。
大家可以看看这篇文章《Better than Pure CSS3》学学使用方法,也可以到官方网站具体学习。
2.使用步骤
a. 引入插件
[html] view plaincopy
- <script src=http://www.mamicode.com/"path/to/shine.min.js"></script>
b. 实例化shine.js
[javascript] view plaincopy
- //默认参数实例化,my-shine-object为需要添加阴影的元素
- var shine = new Shine(document.getElementById(‘my-shine-object‘));
[javascript] view plaincopy
- var shine_config = new shinejs.Config({
- numSteps: 10,
- offset = 0.25,
- blur: 100,
- opacity: 0.5,
- <span style="white-space:pre"> </span>shadowRGB: new shinejs.Color(255, 0, 0)
- });
- var shine = new Shine(document.getElementById("my-shine-object"), shine_config);
c. 阴影的相关操作
我们可以设置阴影的鼠标移动响应[javascript] view plaincopy
- 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.构造方法
[javascript] view plaincopy
- 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 eithertextShadow or boxShadow . The value will be applied aselement.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. |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。