Shine.js实现动态阴影效果

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实现动态阴影效果相关推荐

超越纯CSS3，超赞阴影效果推荐-shine.js
前端开发whqet,csdn,王海庆,whqet,前端开发专家前段时间一直在忙微课比赛的事情,博客更新比较少,抱歉,今天抽空一更. 1.简介前面我们曾经用两篇文章<纯CSS3文字效果推荐&g ...
如何使用Next.js创建动态的Rick and Morty Wiki Web App
Building web apps with dynamic APIs and server side rendering are a way to give people a great exper ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法
微信小程序首页index.js获取不到app.js中动态设置的globalData的原因以及解决方法参考文章: (1)微信小程序首页index.js获取不到app.js中动态设置的globalDat ...
html5图片自动翻转特效,CSS3带动态阴影效果的3D图片翻转特效
在前不久我们讲解了CSS3 3D卡片翻转技术,在这篇文章中,我们要跟进一步,在卡片3D翻转的基础上,制作卡片的动态阴影效果.最终效果是鼠标滑过图片时,卡片会3D翻转,图片的背面显示图片的标题,在图片的 ...
【ASP.NET Web API教程】2.3.5 用Knockout.js创建动态UI
[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 原文:[ASP.NET Web API教程]2.3.5 用Knockout.js创建动态UI 注:本文是[ASP ...
动态添加组件_使用vue.js的动态组件模板
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上. 先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案.这篇 ...
流程展示 php,js实现动态的流程进度展示条
这次给大家带来js实现动态的流程进度展示条,js实现动态流程进度展示条的注意事项有哪些,下面就是实战案例,一起来看一下. 一.设计思路分为以下几步(仅供参考) [竖线线] 这个采用ul的list标签 ...
使用Kakapo.js进行动态模拟
by zzarcon 由zzarcon 使用Kakapo.js进行动态模拟 (Dynamic mocking with Kakapo.js) 3 months after the first comm ...

Shine.js实现动态阴影效果

Shine.js实现动态阴影效果相关推荐

最新文章

热门文章