贴片效果插件Sticker.js

所属分类:其他-动画效果

 29588  302  查看评论 (3)
分享到微信朋友圈
X
贴片效果插件Sticker.js ie兼容9

一个JavaScript库,它帮助您创建一个贴片效果

没有依赖关系(不需要jQuery的)

用法

下载Sticker.js文件将其包含在你的HTML,并建立贴纸元素。

<!-- dom elements -->
<div class="sticker example-1"></div>
<div class="sticker example-2"></div>
<script type="text/javascript" src="sticker.min.js"></script>

添加背景图像或背景色。您还可以更改阴影的不透明度。

.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;
}

与目标元素(类名或ID#)调用init()方法。

Sticker.init('.sticker');
相关插件-动画效果

纯css仿qq浏览器官网的彗星

仿qq浏览器官网的彗星,纯css
  动画效果
 40216  496

可以在网页上拖动的水晶球特效

可以在网页上拖动的水晶球特效
  动画效果
 35896  369

基于three.js雪花效果

基于three.js开发的雪花飘落效果,跟随鼠标
  动画效果
 28356  271

可自定义形状文字的烟花(原创)

canvas仿烟花效果,代码注释全
  动画效果
 54069  444

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    S&P 0
    2018/2/25 9:16:06
    谷歌貌似不行?
    回复
    洁” 0
    2017/6/3 16:48:34

    谷歌浏览器没有效果啊,蓝色背景。

    回复
    汉斯 0
    2016/2/26 14:02:46
    演示里除了蓝色背景没东西啊?  是不是因为访问谷歌的原因? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复