html桌面插件,纯JS和CSS3炫酷桌面便签贴纸特效插件

Sticker.js是一款使用纯JavaScript和CSS3来制作炫酷桌面便签贴纸特效的插件。通过该插件可以将任何块级元素转换为桌面便签，并且在鼠标滑过便签时，便签会随着鼠标移动产生卷纸弯曲效果，非常的酷。

使用方法

使用该桌面便签插件需要在页面中引入sticker.js文件。

HTML结构

可以使用一个

或其它块级元素来作为桌面便签的容器。桌面便签可以是图片，也可以是其它HTML元素。

CSS样式

为.sticker元素设置一个高度和宽度。在插件初始化之后，便签容器中会动态生成一个.sticker-img元素，这个元素用于设置背景图片或背景颜色。

.sticker {

width: 180px;

height: 180px;

}

// 添加背景图片

.example-1 .sticker-img {

background-image: url(heroes-2.png);

}

// 添加背景颜色

.example-2 .sticker-img {

background-color: #ff4a85;

}

// 修改阴影的透明度

.example-2 .sticker-shadow {

opacity: 0.6;

}

初始化插件

在页面加载完毕之后可以通过下面的方法来初始化该便签插件。

window.onload = function() {

Sticker.init('.sticker');

}