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>