QQ客服
当前位置 : 首页 > 代码 > html5 css3 > css3实例 > js css3精美的时钟图标特效

js css3精美的时钟图标特效

js基于css3绘制灰色精美的圆形时钟图标动画。这是一款图标时钟特效。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

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

2、body引入HTML代码

<div id="clock">
  <div class="hour"> 
    <div class="min"></div>
    <div class="min"></div>
    <div class="min"></div>
    <div class="min"></div>
    <div class="min"></div>
  </div>
  <div class="hour">
    <div class="min"></div>
    <div class="min"></div>
    <div class="min"></div>
    <div class="min"></div>
    <div class="min"></div>
  </div>
  <div id="alarm"> </div>
  <div id="min"></div>
  <div id="hour"></div>
  <div id="sec"></div>
  <ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ol>
</div>

<script>
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
              window.setTimeout(callback, 1000 / 60);
          };
})();

//initialize the clock in a self-invoking function
(function clock(){ 
    var hour = document.getElementById("hour"),
        min = document.getElementById("min"),
        sec = document.getElementById("sec");
    //set up a loop
    (function loop(){
        requestAnimFrame(loop);
        draw();
    })();
    //position the hands
    function draw(){
        var now = new Date(),//now
            then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
            diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
            h = (diffInMil/(1000*60*60)),//hours
            m = (h*60),//minutes
            s = (m*60);//seconds
        //rotate the hands accordingly
        sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)";
        hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)";
        min.style.webkitTransform = "rotate(" + (m * 6) + "deg)";
    } 
})();</script>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
彩39彩票安卓 www.615767.com-亚博科技时时彩| www.wz08.com-休彩排烈三和值表| www.441.cm-赢彩彩票天天送钱| www.557774.com-重庆十字彩数字规则| www.pe48.com-河北省福彩开奖公告| www.59ro.com-体育彩票放开| www.61399.cc-罗马彩票-| www.5355.pw-网上禁止买彩票| www.415152.com-阿里旗下的彩票软件| www.144082.com-竞彩单关稳赚对冲| www.389073.com-手机c16彩票下载| www.517652.com-七乐彩开机号查询| 环球彩票www.hqcp7.com| www.ig31.com-国家认可彩票app| www.y36.hk-033彩票下载| www.916230.com-时时彩送15彩金| www.045686.com-彩6下载应用| www.126607.com-q彩票网是真的吗| www.234021.com-送彩金彩票平台| www.326860.com-浙江快乐彩app| www.395081.com-彩虹代刷社区官网| www.509232.com-7星彩机选中奖| www.582891.com-体彩屋有没有漏洞| www.655162.com-旺角彩皇丶资料大全| www.726633.com-鸿手机购彩-| www.796623.com-竞彩网14场胜平负| www.869156.com-彩票中奖牛人爆秘诀| www.931522.com-彩票计划导师| 金彩www.987jc.com| www.jx25.com-北京快三势图一定牛| www.120141.com-数字型彩票博弈论| www.165067.com-全民彩彩票官网| www.b66.org-火箭彩票下载| www.88kd.com-买彩票哪些会违法| www.520401.com-东莞彩之星印刷| www.29tx.com-3d彩票第三-| www.288410.com-北京快3开爱彩乐| www.65211.cc-彩娃彩票官网网址| www.661748.com-外围足彩代理怎么做| www.771593.com-澳洲时时彩5| www.887961.com-彩票推广员能不能干| www.971512.com-融彩网下载安装| www.dz2.com-河北快3爱彩乐| www.728549.com-足彩007-| www.196892.com-体彩开奖号直播现场| www.330333.com-256买彩票平台| www.398229.com-精准足彩比分推荐| www.59583.cc-下载分分中彩| www.65vh.com-运气太差买彩票| www.464318.com-风飞扬七星彩预测| www.583159.com-全彩色漫画-| www.669046.com-经典说彩专家专栏| www.47241.com-广东好彩1app| www.078064.com-云彩厅彩票骗局| www.144007.com-中国竟彩票网计算器| www.555471.com-三分时彩走势图| www.637332.com-下代彩虹五b无人机| www.709026.com-久久彩票官方| www.89qh.com-陕西彩-| www.4240.cc-七乐彩五等奖多少钱| www.ve28.com-江苏福彩‖体彩| www.086932.com-什么是彩福-| www.155731.com-正规网络彩票投注| www.026931.com-一分彩91234| www.121171.com-彩民微信交流群| www.591134.com-澳门十二福利彩| www.688192.com-广东电脑福利彩票| www.576534.com-幸运中彩票苹果系统| www.668895.com-粤彩宝典-| www.755753.com-中彩网选号助手| www.888327.com-梦书解梦七星彩梦册| www.963699.com-客彩网彩票官网| www.cp6888.cc-北京快三最大遗漏号| www.xj83.cc-甘肃体育彩票中心| www.92pw.com-八彩票-| www.6013.biz-119彩票app-| www.68uk.com-中华彩票3d开机| www.3812.in-七星彩加急七金码| www.708960.com-赢发彩票可信吗| www.786522.com-全民彩票停止销售| www.873827.com-上海福采快三开奖号| www.975892.com-彩礼起源-| www.cp5552.cc-五分快三开奖结果| www.ll88.com-在中彩买彩票被骗| www.02669.cc-彩票应用下载| www.80692.com-福彩三d詹天佑预测| www.078818.com-七星彩单式怎么兑奖| www.152578.com-七星彩玩儿法| www.087920.com-彩运8用户登录| www.567.in-成都福彩蓉彩网注册| www.308801.com-中福快三官网| www.400677.com-中国福彩几个球中奖| www.582995.com-竞彩分析预测大师| www.300093.cc-江苏快三号码图表| www.332715.com-体彩三字诀-| www.497991.com-伍佰万彩票网电脑版| www.682876.com-红彩会网-| www.775503.com-中彩网詹天佑3d| www.851511.com-淘宝上怎样买彩票| www.942076.com-陕西省福彩网| www.yb4.com-京彩快三-| www.uf08.com-乐彩网靠谱吗| www.173971.com-人人彩票-| www.260845.com-彩票选号的奇怪方法| www.346438.com-高频时时彩开奖| www.434777.com-乾坤彩票-| www.522250.com-上海体育彩票一定牛| www.588509.com-天一空彩票与你同行| www.656465.com-北京个人彩票店转让| www.722808.com-澳门正规博彩十网站| www.791274.com-梦见自己中彩票| www.857322.com-做私庄的彩票网站| www.914796.com-竞彩足彩预测推荐| www.969932.com-广西快乐双彩复式表| 中彩网www.91233r.com| www.855983.com-新加坡快三走势图| www.947824.com-竞猜彩票app| 天天彩票www.54968h.com| www.102699.com-博众取彩的意思| www.893711.com-博马彩票极速快三| www.962737.com-3d彩吧牛彩图库| www.cai001.com-内蒙古快三走势图| www.8911.online广东竞彩神单| www.79198.com-快三倍是几倍| www.050896.com-快三辅助器下载| www.481.mobi-弃奖彩票案-| www.3842.org-大地彩票平台| www.133631.com-福彩3d银海工作室| 大赢家彩票平台www.702152.com| www.99187.com-秒开时时彩破解版| www.785.cc-双色球牛彩-| www.i22.shop-七星彩走势图带联线| www.67ek.com-体育彩票害人输千万| www.293856.com-博众快三软件| www.428742.com-爱彩乐彩票选号器| www.557721.com-大赢家彩票提现失败| www.648522.com-彩宝类-| www.062620.com-黑彩可以报案吗| www.152227.com-众赢彩票登录| www.9234.online中体彩科技-| www.375177.com-福彩3d路数振幅| www.485007.com-银川仟彩-| www.560596.com-云彩网彩票正规吗| www.896668.com-彩票平台骗局| www.972280.com-体彩排列3开奖号码| 亿彩网www.910282.com| www.494458.com-重庆时时彩会下架吗| www.626946.com-大有彩票注册地址| www.cai0002.com快三玩法介绍| www.86651.cc-非凡彩票走势图大全| www.663453.com-私自发行彩票| www.762157.com-竞彩足球分析app| www.874294.com-帮彩票平台刷流水| www.730310.com-台北快三是官方的么| www.227711.com-手机上买彩票可靠吗| www.330765.com-彩票助手追号计划| www.872535.com-重庆体彩官网| www.744215.com-约彩彩票365| www.821515.com-福彩网投靠谱吗| www.893133.com-彩做号-| www.959085.com-江苏e球彩遗漏| www.993528.com-足彩保本玩法| www.lc9.cc-e球彩走势图| www.or46.com-快三手机单机版下载|