简约的签到进度动画特效

一款简约的签到进度动画特效，点击每一个圆点按钮即可显示对应的签到天数，同时圆点的样式也会有一个动画的变化效果，再次点击同一个圆点则取消签到。

分类：css3 > transform 难易：初级

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

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

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

页面的boby部分，用了多个div的嵌套结构来放置签到天数，代码如下：

<div class="credit">
  <h1>签到进度</h1>
  <p> <a href="http://www.sucaihuo.com" target="_blank">Richer</a></p>
</div>
<div class="container">
  <div class="day">
    <div class="day1">第 1 天</div>
    <div class="dash"></div>
  </div>
  <div class="day">
    <div class="day2">第 2 天</div>
    <div class="dash"></div>
  </div>
  <div class="day">
    <div class="day3">第 3 天</div>
  </div>
</div>

页面的底部，需引入jQuery库和必要的JS文件，代码如下：

<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

简约的签到进度动画特效【原创】

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

页面的boby部分，用了多个div的嵌套结构来放置签到天数，代码如下：

页面的底部，需引入jQuery库和必要的JS文件，代码如下：