首页 > 代码库 > 超越纯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在CODE上查看代码片派生到我的代码片
  1. <script src=http://www.mamicode.com/"path/to/shine.min.js"></script>  

b. 实例化shine.js

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. //默认参数实例化,my-shine-object为需要添加阴影的元素  
  2. var shine = new Shine(document.getElementById(‘my-shine-object‘));  
我们也可以先设置参数,然后实例化对象
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. var shine_config = new shinejs.Config({  
  2.     numSteps: 10,  
  3.     offset = 0.25,  
  4.     blur: 100,  
  5.     opacity: 0.5,  
  6. <span style="white-space:pre">  </span>shadowRGB: new shinejs.Color(255, 0, 0)  
  7. });  
  8. var shine = new Shine(document.getElementById("my-shine-object"), shine_config);  

c. 阴影的相关操作

我们可以设置阴影的鼠标移动响应
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. window.addEventListener(‘mousemove‘, function(event) {  
  2.   shine.light.position.x = event.clientX;  
  3.   shine.light.position.y = event.clientY;  
  4.   shine.draw();  
  5. }, false);  

3.API详解

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

a.构造方法

[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
  1. Shine(domElement, optConfig, optClassPrefix, optShadowProperty)  
ParameterTypeDescription
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. 常用属性

PropertyTypeDescription
domElementHTMLElementThe DOM element to apply the shine effect to.
configshinejs.ConfigStores all config parameters.
lightshinejs.LightStores the light position and intensity.