首页 > 代码库 > 超越纯CSS3，超赞阴影效果推荐-shine.js

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

2024-07-15 10:03:12   225人阅读

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

1.简介

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


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

2.使用步骤

a. 引入插件

<script src=http://www.mamicode.com/"path/to/shine.min.js"></script>

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主页。

a.构造方法

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.

Enjoy it.

----------------------------------------------------------

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


联系
我们