Sticker.js 在网页实现便签贴纸效果 - 文章教程

Sticker.js 在网页实现便签贴纸效果

发布于 2020-07-23 字数 1793 浏览 1665 评论 0

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

Sticker.js 在网页实现便签贴纸效果

在一个 .className 或 #ID 元素上调用 init() 方法,它在目标元素中创建必要的 HTML 元素,并使用 CSS3 添加贴纸效果

Sticker.js 在网页实现便签贴纸效果

HTML:

<!-- dom elements -->
<div class="sticker example-1"></div>
<div class="sticker example-2"></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:

<!-- call sticker js -->
Sticker.init('.sticker');

浏览器兼容,只要是支持 CSS 的浏览器,基本上都能运行 Sticker.js。

Sticker.js 在网页实现便签贴纸效果

官网:http://stickerjs.cmiscm.com/

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论