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. MYSQL数据表建立外键

    MySQL创建关联表可以理解为是两个表之间有个外键关系,但这两个表必须满足三个条件1.两个表必须是InnoDB数据引擎2.使用在外键关系的域必须为索引型(Index)3.使用在外键关系的域必须与数据类 ...

  2. Android登录等待效果

    上一篇为大家分享了关于AsyncTask的使用,本篇结合AsyncTask为大家介绍一个我们经常看到的一个效果,就是当我们点击登录后,会弹出一个请等待的小窗体,这个效果是如何实现的呢?本篇我就带大家简 ...

  3. vs xamarin android SharedPreferences

    读 PreferenceManager.GetDefaultSharedPreferences(this).GetInt("uid", 0); 写 var editor = Pre ...

  4. Java多线程系列--“基础篇”03之 Thread中start()和run()的区别

    概要 Thread类包含start()和run()方法,它们的区别是什么?本章将对此作出解答.本章内容包括:start() 和 run()的区别说明start() 和 run()的区别示例start( ...

  5. 图像映射map

    <map>标签:带有可点击区域的图像映射 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. 效果图: 点击相应蓝色标签可进入详情页面浏览. 代码: < ...

  6. 老鸟谈谈JAVA EE的学习

    老鸟谈谈JAVA EE的学习 因为出差和项目的原因,有将近一个月的时间没有更新博客了,今天终于得闲,和兄弟们分享一下JAVA EE的学习心得.书中带过,直入主题,下面我们首先看看什么是JAVA EE. ...

  7. 25套用于 Web UI 设计的免费 PSD 网页元素模板

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  8. 基于HTML5技术的电力3D监控应用(二)

    上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气 ...

  9. 解析导航栏的url--selnium,beautifulsoup实战

    前段时间做ui自动化测试的时候,导航栏菜单始终有点问题,最后只好直接获取到url,然后直接使用driver.get(url)进入页面: 包括做压测的时候,比如我要找出所有报表菜单的url,这样不可能手 ...

  10. 使用ExpandoObject来实现多个Model传送至视图

    昨天Insus.NET有实现<使用ViewModel来实现多个Model传送至视图>http://www.cnblogs.com/insus/p/5594134.html 那今天Insus ...