HTML5 SVG动画效果_CSS如何实现点赞按钮点击效果

本Demo是使用HTML5 SVG实现的喜欢点赞的动画特效、Demo里面一共有17种效果、都是使用font-awesome作为图标、采用SVG技术实现的动画效果、在用户点击图标时产生各种炫酷的图标动画特效、现在是部分点击的动画效果

HTML代码

<section class="content">
    <ol class="grid">
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
        <li class="grid__item">
            <button class="icobutton icobutton--thumbs-up"><span class="fa fa-thumbs-up"></span></button>
        </li>
    </ol>
</section>

引入CSS文件

<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" type="text/css" href="css/icons.css" />

引入JS文件

<script src="js/mo.min.js"></script>
<script src="js/demo.js"></script>

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1c0LMnT2 密码: e5we