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 – 帮助你在网站中加入贴纸效果的更多相关文章

  1. Sticker.js生成图片或者页面元素“速干贴”效果

    ​在线演示 本地下载 真实的效果,真的非常好玩!

  2. RulersGuides.js – 网站中实现 Photoshop 标尺效果

    RulersGuides.js 是一个 JavaScript 库,在网页上添加类似 Photoshop 中的标尺和辅助网格线.要创建创建网格线线,请单击垂直或水平的标尺,然后推动就可以.还可以使用相应 ...

  3. [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  4. 通过a标签在页面上显示视频网站中的视频

    1.把视频传到优酷.腾讯等视频网站中 <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  5. 将w3cplus网站中的文章页面提取并导出为pdf文档

    最近在看一些关于CSS3方面的知识,主要是平时看到网页中有很多用CSS3实现的很炫的效果,所以就打算系统的学习一下.在网上找到很多的文章,但都没有一个好的整理性,比较凌乱.昨天看到w3cplus网站中 ...

  6. TogetherJS – 酷!在网站中添加在线实时协作功能

    TogetherJS是一个免费.开源的 JavaScript 库,来自 Mozilla 实验室,可以实现基于 Web 的在线协作功能.把 TogetherJS 添加到您的网站中,您的用户可以在实时的互 ...

  7. 通过JS语句判断WEB网站的访问端是电脑还是手机

    通过JS语句判断WEB网站的访问端是电脑还是手机,以显示不同的页面! 目录腾讯网的适配代码如何判断访问网站的机器类型-如何判断ipadJS 判断浏览器客户端类型(ipad,iphone,android ...

  8. 如何通过图片在 HTTPS 网站中获取 HTTP 接口数据

    <script> (function() { var Decode=function(b){var e;e=[];var a=b.width,c=b.height,d=document.c ...

  9. 【前端】向blog或网站中添加语法高亮显示代码方法总结

    向blog或网站中添加语法高亮显示的代码方法总结 文章目录 预备知识 目标 第一类方法:嵌入 第二类方法:外部引用 第三类方法:忽略HTML和PHP 最近在写代码时遇到一个问题,就是如何让代码像在ID ...

随机推荐

  1. Sql Server系列:索引维护

    1. DBCC SHOWCONTIG 显示指定表的数据和索引的碎片信息.当对表进行大量的修改或添加数据后,执行此语句可以查看有无碎片,显示指定的表或试图的数据和索引的碎片信息. 其语法格式: DBCC ...

  2. C# List.ForEach 方法

    C#中List.ForEach 方法是对 List 的每个元素执行指定操作. 示例: using System; using System.Collections.Generic; using Sys ...

  3. Oracle 11g系列:函数与存储过程

    1.函数 Oracle中的函数分为两类:系统函数和自定义行数.对于自定义函数,函数的传入参数可以没有,如果有,一定要明确其数据类型.函数传入参数不能在函数内部进行修改.函数必须有返回值,并且返回值必须 ...

  4. ASP.NET MVC 4使用PagedList.Mvc分页

    ASP.NET MVC中进行分页的方式有多种,在NuGet上有提供使用PagedList.PagedList.Mvc进行分页. 1. 通过NuGet引用PagedList.Mvc 在安装引用Paged ...

  5. JSP开发环境配置问题解答

    有过JSP开发经验的同学对于JSP开发环境的配置一定非常的很有感触,十分的繁琐,有时因为一个小的问题导致我们配置的配置前功尽弃,本篇我将重点带领大家一起探讨一下关于JSP环境配置的一些常见问题,及解决 ...

  6. nodejs字符与字节之间的转换

    new Buffer("Hello World").toString("base64"); /* yields SGVsbG8gV29ybGQNCg== */ ...

  7. 如何使用office2010插入屏幕截图

    当我们习惯了用QQ的屏幕截图之后,当某一天我们在一台没有装QQ的办公电脑上,它装着office2010,我们可以实现用office来截图吗?其实Office2010深藏着犀利的截图工具. 插入图片到文 ...

  8. Tomcat7.0启动报错:java.lang.illegalargumentexception:taglib definition not consisten with specification version

    Tomcat7.0启动报错:java.lang.illegalargumentexception:taglib definition not consisten with specification ...

  9. OkHttp,Retrofit 1.x - 2.x 基本使用

    Square 为广大开发者奉献了OkHttp,Retrofit1.x,Retrofit2.x,运用比较广泛,这三个工具有很多相似之处,初学者可能会有一些使用迷惑.这里来总结一下它们的一些基本使用和一些 ...

  10. Eclipse JAVA文件注释乱码

    将别人的项目或JAVA文件导入到自己的Eclipse中时,常常会出现JAVA文件的中文注释变成乱码的情况,主要原因就是别人的IDE编码格式和自己的Eclipse编码格式不同. 总结网上的建议和自己的体 ...