列表内容删除的碎玻璃动画特效

一款列表内容删除的碎玻璃动画特效，页面自动演示删除列表内中间一列内容时，中间一列变成碎玻璃逐渐消失的动画效果，整个删除的碎玻璃动画会一直循环演示下去。

分类：html5 > SVG 难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，设置好内容列表的容器和svg碎玻璃元素，代码如下：

<div id="list">
  <ul>
    <li>
      <div class="avatar"></div><div class="lines"></div>
    </li>
    <li>
    <svg id="destroy" viewBox="0 0 500 124" height="124px" preserveAspectRatio="none">
    <path
       style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m -1.0101525,-1.2589147 71.7208305,39.3959487 90.913732,-40.4061012 z"
       id="path4915"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cccc" />
    <path
       inkscape:connector-curvature="0"
       id="path4917"
       d="m 286.88332,-1.2589147 -240.416303,47.4771697 115.157393,-48.4873222 z"
       style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       sodipodi:nodetypes="cccc" />
<!-- 省略部分演示代码 -->
    <path
       sodipodi:nodetypes="cccc"
       style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 108.08632,82.583746 63.63961,42.426404 -13.13198,-96.974632 z"
       id="path5227"
       inkscape:connector-curvature="0" />
      </svg>
      <div class="avatar"></div><div class="lines"></div>
    </li>
    <li>
      <div class="avatar"></div><div class="lines"></div>
    </li>
  </ul>
</div>

页面的底部，需远程调用anime的JS文件，并引入本地JS文件，代码如下：

<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js'></script>
<script src="js/index.js"></script>