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

使用示例:
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');
本文链接:Sticker.js – 帮助你在网站中加入贴纸效果
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
Sticker.js – 帮助你在网站中加入贴纸效果的更多相关文章
- Sticker.js生成图片或者页面元素“速干贴”效果
在线演示 本地下载 真实的效果,真的非常好玩!
- RulersGuides.js – 网站中实现 Photoshop 标尺效果
RulersGuides.js 是一个 JavaScript 库,在网页上添加类似 Photoshop 中的标尺和辅助网格线.要创建创建网格线线,请单击垂直或水平的标尺,然后推动就可以.还可以使用相应 ...
- [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)
目录 1. 介绍 2. 软件环境 3. 在运行示例代码之前(源代码 + 示例登陆帐号) 4. jqGrid和AJAX 5. GridSettings 6. ...
- 通过a标签在页面上显示视频网站中的视频
1.把视频传到优酷.腾讯等视频网站中 <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- 将w3cplus网站中的文章页面提取并导出为pdf文档
最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...
- TogetherJS – 酷!在网站中添加在线实时协作功能
TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...
- 通过JS语句判断WEB网站的访问端是电脑还是手机
通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...
- 如何通过图片在 HTTPS 网站中获取 HTTP 接口数据
<script> (function() { var Decode=function(b){var e;e=[];var a=b.width,c=b.height,d=document.c ...
- 【前端】向blog或网站中添加语法高亮显示代码方法总结
向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在ID ...
随机推荐
- Spring(一)第一个示例
原文链接:http://www.orlion.ga/185/ 一.下载与安装Spring 1.访问https://repo.spring.io/webapp/#/artifacts/browse/tr ...
- 初始化的一些问题(Vector使用)
import java.util.Vector; import java.util.Iterator; import java.util.Arrays; import java.util.ArrayL ...
- Cocos2d-x 3.2 学习笔记(九)EventDispatcher事件分发机制
EventDispatcher事件分发机制先创建事件,注册到事件管理中心_eventDispatcher,通过发布事件得到响应进行回调,完成事件流. 有五种不同的事件机制:EventListenerT ...
- Spring应用教程-3 依赖关系配置
注:组件与组件之间的耦合,采用依赖注入管理,但普通的JavaBean属性值,应直接在代码中设置. 1. 注入其他Bean的属性值 我们分析一下,Bean_A的一个属性要依赖Bean_B的一个属性值.这 ...
- [C] C语言中的布尔值
C不具备显示的布尔类型,所以使用整数来代替,规则是:零是假,任何非零值皆为真. 反过来说,如果逻辑表达式为真其值一定为真,若逻辑表达式为假其值一定为零.
- Visual Studio 2013 和 ASP.NET 预览
VS 2013预览版在2013的TechEd大会由Brain Harry正式发布.这次发布包括了一系列的新特性:工程模板.Scaffolding 升级和Web工具.当你在VS 2013创建一个新工程的 ...
- Laravel4中的Validator
不管写接口还是写web页面,实质都是传入参数,然后进行业务逻辑,然后再输出具体内容.所以,对参数的验证是不可避免的一个环节,比如传过来的email是不是为空,是不是合法的email格式?laravel ...
- IOS高级编程之三:IOS 多线程编程
多线程的概念在各个操作系统上都会接触到,windows.Linux.mac os等等这些常用的操作系统,都支持多线程的概念. 当然ios中也不例外,但是线程的运行节点可能是我们平常不太注意的. 例如: ...
- 让sublime实现js控制台(前提是安装了nodejs)
步骤: 1.找到tools-->build system-->new build system 2.输入 { "cmd": ["D://nodejs/node ...
- Winform开发框架之存储过程的支持--存储过程的实现和演化提炼(2)
本篇继续上篇<Winform开发框架之存储过程的支持--存储过程的实现和演化提炼(1)>来对Winform开发框架之存储过程的支持进行介绍,上篇主要介绍了SQLServer和Oracle两 ...