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

当前位置:主页 > CSS3库 > CSS3动画 > 纯JS和CSS3炫酷桌面便签贴纸特效插件
纯JS和CSS3炫酷桌面便签贴纸特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-08
    阅读:
麦子学院
简要教程

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

桌面便签效果

使用方法

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

       
<script type="text/javascript" src="js/sticker.js"></script>   
                
HTML结构

可以使用一个<div>或其它块级元素来作为桌面便签的容器。桌面便签可以是图片,也可以是其它HTML元素。

<!-- 第一个例子使用图片作为背景 -->
<div class="sticker example-1"></div>

<!-- 第二个例子使用背景颜色 -->
<div class="sticker example-2"></div>
                
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');
}                  
                

网友评论