HTML5 SVG动画效果_CSS如何实现点赞按钮点击效果
2016-03-02 12:30:57  By: dwtedx

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

html5点赞效果


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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+