动画显示checkbox状态

一款动画显示checkbox状态的特效代码，每个复选框都类似以一个按钮，鼠标悬停的时候有悬停效果，鼠标点击的时候图标会有形变的动画和背景填充色彩，个人感觉时比较有个性的复选框（checkbox），喜欢的童鞋请收下吧。

分类：表单代码 > 复选框难易：初级

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

页面的head部分，需要远程调用一个图标字体库font-awesome，并引入一个本地CSS样式文件，代码如下：

<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了3个li作为checkbox的容器，代码如下：

<ul class="choice-list">
  <li class="checkbox check"></li>
  <li class="checkbox heart is-checked"></li>
  <li class="checkbox star"></li>
</ul>

页面的底部，需要远程调用jQuery库，并设置好checkbox的点击响应，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript">
$('.checkbox').click(function(){
  $(this).toggleClass('is-checked');
});
</script>