jQuery创建动画Blob Blobinator

  • 源码大小:11.47KB
  • 所需积分:1积分
  • 源码编号:19JP-3752
  • 浏览次数:555次
  • 最后更新:2023年07月18日
  • 所属栏目:其他
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

Blobinator是一个jQuery插件,用于使用SVG生成动画Blob,可以用作网页的现代醒目背景。

如何使用它:

1.在jQuery之后加载Blobinator插件的缩小版本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/blobinator.min.js"></script>

2.创建一个CSS类为“blobinator”的容器元素。

<div class="blobinator">
  
</div>

3.指定要生成的Blob的数量。

<div class="blobinator"
     data-total="10">
</div>

4.设置斑点的颜色。可以是单个值,也可以是用空格分隔的值列表。

<div class="blobinator"
     data-total="10"
     data-color="#27ae60">
</div>

<!-- OR -->
<div class="blobinator"
     data-total="10"
     data-color="#27ae60 #c0392b #8e44ad #2980b9 #138d75 #d4ac0d #d35400 #273746">
</div>

5.配置动画的持续时间。默认值:15。

<div class="blobinator"
     data-total="10"
     data-color="#27ae60"
     data-animation-duration="5">
</div>

预览截图