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

古城微笑少年丶 2022-08-10 15:51 255阅读 0赞

前端开发whqet,csdn,王海庆,whqet,前端开发专家

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

## 1.简介 ##

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

![SouthEast][]

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

## 2.使用步骤 ##

### a. 引入插件 ###

### 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主页][SHINE.js]。

### a.构造方法 ###

Shine(domElement, optConfig, optClassPrefix, optShadowProperty)

<table style="box-sizing: border-box; border-collapse: collapse; border-spacing: 0px; margin: 15px 0px; width: 728px; overflow: auto; display: block; color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 25.5px;"> 
 <thead style="box-sizing: border-box;"> 
  <tr style="box-sizing: border-box; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);"> 
   <th style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">Parameter</th> 
   <th style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">Type</th> 
   <th style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">Description</th> 
  </tr> 
 </thead> 
 <tbody style="box-sizing: border-box;"> 
  <tr style="box-sizing: border-box; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);"> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><span style="box-sizing: border-box;">domElement</span></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px; background-color: rgb(248, 248, 248);">!HTMLElement</code></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">应用阴影的元素</td> 
  </tr> 
  <tr style="box-sizing: border-box; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: rgb(248, 248, 248);"> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><span style="box-sizing: border-box;">optConfig</span></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px;">?shinejs.Config=</code></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">存储阴影参数的配置对象（<span style="color: rgb(51, 51, 51); font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; font-size: 15px; line-height: 25.5px; background-color: rgb(248, 248, 248);">Optional config instance</span>），可省略，如果省略将传递默认参数。</td> 
  </tr> 
  <tr style="box-sizing: border-box; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204);"> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><span style="box-sizing: border-box;">optClassPrefix</span></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px; background-color: rgb(248, 248, 248);">?string=</code></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">给所有的阴影对象增加前缀，默认为shine-。</td> 
  </tr> 
  <tr style="box-sizing: border-box; border-top-width: 1px; border-top-style: solid; border-top-color: rgb(204, 204, 204); background-color: rgb(248, 248, 248);"> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><span style="box-sizing: border-box;">optShadowProperty</span></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);"><code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px;">?string=</code></td> 
   <td style="box-sizing: border-box; padding: 6px 13px; border: 1px solid rgb(221, 221, 221);">Optional property name that the shadow will be applied to. Overrides the automatic detection for use of either<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px;">textShadow</code>&nbsp;or&nbsp;<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px;">boxShadow</code>. The value will be applied as<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px;">element.style[shadowProperty] = '...'</code>&nbsp;and automatically prefixed for legacy browsers (e.g.&nbsp;<code style="box-sizing: border-box; font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace; margin: 0px; border: 1px solid rgb(221, 221, 221); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 0px;">MozBoxShadow</code>).</td> 
  </tr> 
 </tbody> 
</table>

### b.常用方法 ###

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

### c. 常用属性 ###

Enjoy it.

\----------------------------------------------------------

[前端开发whqet][whqet]，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。  
\---------------------------------------------------------------------------------------------------------

[CSS3]: http://blog.csdn.net/whqet/article/details/24793049
[CSS3 1]: http://blog.csdn.net/whqet/article/details/25051237
[SHINE.js]: https://github.com/bigspaceship/shine.js
[SouthEast]: /images/20220810/82ec9eb7d0934e0da93ce03629b0eea1.png
[Better than Pure CSS3]: http://www.noupe.com/javascript/better-than-pure-css3-realistic-and-complex-shadows-with-shine-js-83800.html
[whqet]: http://blog.csdn.net/whqet