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');

}

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

html5幻灯片自动滑动,纯js和CSS3炫酷自动幻灯片特效
Karrot Slider是一款纯Javascript和CSS3制作的自动播放的幻灯片插件.该幻灯片没有任何外部依赖,内置有8种不同的动画过渡效果.该幻灯片支持响应式图片设计模式,也可以制作为全屏幻灯 ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
html5图片自动翻转,纯js实现360度旋转预览图片特效
这是一款纯js实现360度旋转预览图片特效.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. 使用方法 HTML结构 import Roll ...
火箭月亮html5游戏,HTML5 svg和CSS3炫酷火箭升空动画特效
这是一款HTML5 svg和CSS3炫酷火箭升空动画特效.该特效的火箭使用SVG来实现,并通过CSS3动画来实现火箭的动画特效. 使用方法 HTML结构 CSS样式 body { background ...
动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效
Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件.您通过简单的配置,既可以生成非常炫酷的半透明模糊的毛玻璃效果. 使用方法在HTML文件中引入. HTML结构创建HTML结构并使 ...
php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构该3D星空特效只使用一个元素 ...
html圆形图片切换,jQuery和CSS3炫酷圆形图片切换特效
这是一款效果非常酷的jQuery和CSS3圆形图片切换特效.该圆形图片特效可以使用animate.css来制作图片的进入动画和离开动画.可以任意设置多张图片进行来回翻转.旋转切换,效果堪称一流. 使用 ...
html5手机手风琴相册,纯js带弹性动画的手风琴图片相册特效
这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效.该手风琴图片相册在鼠标滑过时,相应的图片会水平展开,而图片的说明文字则会垂直滑动上来,形成一些视觉差的感觉. 使用方法在页面 ...
php 3d animation,基于three.js的酷炫Canvas 3D线条动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: html5-canvas-animation是一款基于three.js的HTML5 canvas 3D线条动画特效 ...

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

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

最新文章

热门文章