码迷,mamicode.com
首页 > Web开发 > 详细

Shine.js实现动态阴影效果

时间:2017-05-16 12:51:03      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:内容   osi   eve   path   listener   位置   不同的   shadow   投影   

Shine.js 是一个用于实现美丽阴影的 JS 库。

特性

  1、可动态旋转光的位置,投影出不同的阴影效果  

  2、可定制的阴影,  

  3、没有库依赖关系,AMD兼容使用基于内容的文本或框阴影  

  4、在浏览器支持textShadow或boxShadow 会自己主动加入前缀

效果图例如以下:

  技术分享

 

代码引用及编写:

嵌入js文件

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

实例化:

var shine = new Shine(document.getElementById(‘my-shine-object‘));

改变光的位置:

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

 

 

 

 

 

 

 

原文:shine

Shine.js实现动态阴影效果

标签:内容   osi   eve   path   listener   位置   不同的   shadow   投影   

原文地址:http://www.cnblogs.com/brucemengbm/p/6860341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!