当前位置:首页 > 网页特效 > jQuery特效 >

超酷jQuery+CSS3翻页时钟动画

时间:2014-05-17 16:47 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

超酷jQuery+CSS3翻页时钟动画超酷jQuery+CSS3翻页时钟动画是一款数字时钟,时间每过一秒,相应的位置就会像翻日历一样翻过去。另外,这款CSS3数字时钟有点立体的效果,非常漂亮。jquerycss3翻页时钟数字时钟

    <div class="time-container hours">
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="hour-tens-top">1</span>
        <span class="num bottom" id="hour-tens-bottom">
          <div class="bottom-container">1</div></span>
          <div class="swapper">
            <div id="top-hour-tens-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-hour-tens-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
      <div class="digit">
        <div class="fade">&nbsp;</div>
        <span class="num top" id="hour-ones-top">3</span>
        <span class="num bottom" id="hour-ones-bottom">
          <div class="bottom-container">3</div></span>
          <div class="swapper">
            <div id="top-hour-ones-anim" class="num-anim top-anim" style="display:none;">
              <div class="top-half-num">8</div>
            </div>
            <div id="bottom-hour-ones-anim" class="num-anim bottom-anim" style="display:none;">
              <div class="bottom-half-num">
                <div class="dropper">9</div></div>
            </div>
        </div>
        <div class="ring ring-left"></div>
        <div class="ring ring-right"></div>
      </div>
    </div>
本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

jQuery特效下载排行

最新文章