使用Sticker.js实现贴纸效果
使用Sticker.js实现贴纸效果
发布时间:2016-12-30 来源:查字典编辑
摘要:Sticker.js是一个很小的JavaScript库,它允许您在网页中创建漂亮的贴纸效果。没有依赖关系(不需要jQuery),可以在大多数...

Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果。没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作。下面有简单的使用示例,更多功能等着你去发现。

使用Sticker.js实现贴纸效果1

使用示例:

HTML:

复制代码 代码如下:

<>

<div></div>

<div></div>

CSS:

复制代码 代码如下:

.sticker {

width: 180px;

height: 180px;

}

// add image

.example-1 .sticker-img {

background-image: url(heroes-2.png);

}

// add color

.example-2 .sticker-img {

background-color: #ff4a85;

}

// change shadow opacity

.example-2 .sticker-shadow {

opacity: 0.6;

}

JavaScript:

复制代码 代码如下:

<>

Sticker.init('.sticker');

立即下载 在线演示

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类