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>