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. (4) PIVOT 和 UPIVOT 的使用

    最近项目中用到了行转列,使用SQL SERVER 提供的PIVOT实现起来非常容易. 官方解释:详见这里 可以使用 PIVOT 和 UNPIVOT 关系运算符将表值表达式更改为另一个表. PIVOT ...

  2. GIF录制神器GifCam

    前几天偶然看到一款神器:GifCam! GifCam是什么? 一款录制gif动画图片的小软件,小到不足一兆. 使用方法(简单到不可思议) 百度 GifCam 下载: 不用安装,直接打开gifcam: ...

  3. Android学习笔记之短信验证码的获取和读取

    PS:最近很多事情都拖拖拉拉的..都什么办事效率啊!!! 还得吐槽一下移动运营商,验证码超过五次的时候,直接把我的手机号封闭.真是受够了. 学习笔记: 1.Android之如何获取短信验证码. 2.如 ...

  4. AppleScript的字典怎么看怎么用

    新迭代之前忙里偷闲摸鱼了几种脚本的写法:bash, alfred,automator,applescript 这篇就说说这个applescript 以iterm为例 初看它的字典大概长这样: 1.方法 ...

  5. 关于Html与css的一些解释

    一.简单介绍 1.html,是hyper text markup language的缩写,中文为“超文本标记语言”. 2.html不是编程语言而是一种标记语言. 二.标签与元素 1.html标签:如& ...

  6. 开始MS SQL Server 2016之旅

    下班前一刻,把MS SQL Server 2016安装好,国庆回来之后,就可以学习之旅......

  7. ASP.NET 的IP帮助类

    个人网站地址: https://www.lesg.cn/netdaima/net/2016-239.html ASP.NET 的IP帮助类 在Web开发中会出现需要调用客户IP的方法: 一般调用方法就 ...

  8. 割点和桥---Tarjan算法

    使用Tarjan算法求解图的割点和桥. 1.割点 主要的算法结构就是DFS,一个点是割点,当且仅当以下两种情况:         (1)该节点是根节点,且有两棵以上的子树;         (2)该节 ...

  9. DataTable 除去列中重复值

    DataTable dtPCI = dtblSourceData.DefaultView.ToTable(true, new string[] { "Server Cell PCI" ...

  10. spring笔记3 spring MVC的基础知识3

    4,spring MVC的视图 Controller得到模型数据之后,通过视图解析器生成视图,渲染发送给用户,用户就看到了结果. 视图:view接口,来个源码查看:它由视图解析器实例化,是无状态的,所 ...