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天

知道了
亚洲28 www.969257.com-久久彩票的骗局揭秘| www.623453.com-彩6最新版本下载| www.845618.com-台湾有彩票吗| www.976934.com-娘家说帮存彩礼钱| www.go98.com-好彩客app官网| www.29.biz-足彩赚钱的人多吗| www.71mr.com-体彩排三藏机图字迷| www.563679.com-柬埔寨彩票开奖| www.637209.com-彩虹6号在哪里下载| www.723454.com-彩乃奈奈百度云| www.47248.com-体彩销售点-| www.26044.com-佩奇彩票网址| www.91767.cc-743l好彩-| www.097822.com-福彩3d中奖多少钱| www.175387.com-爱乐彩福建-| www.248028.com-快三盘口-| www.318149.com-各种彩网-| www.1727.win-彩工网快三早知道| www.1686.wang-七乐彩千亿彩票| www.114708.com-山东齐鲁福彩双色球| www.527122.com-盈博彩票是正规的吗| www.639115.com-江苏竞彩店申请| www.860464.com-三d福彩专家独胆| www.956247.com-网上彩票有赢钱的吗| 快彩www.81678q.com| www.603676.com-彩票排3开机号| www.728027.com-福彩数字三开奖结果| www.825576.com-山东三d福彩中心| www.897470.com-q彩官网-| www.963327.com-淘彩票大发快3官网| www.cai2499.com安徽快三.遗漏| www.ng05.com-极速3b彩平台| www.363112.com-多余彩虹产生的原因| www.432600.com-体彩七位数开奖日| www.526292.com-江西时时彩-| www.619068.com-快三彩票必赢网| www.693618.com-今晚海南七星彩开奖| www.772498.com-正彩网-| www.850784.com-买彩票的时间规定| www.915565.com-买3d彩票怎么买| www.971866.com-头奖彩票网正规吗| www.yi9.cc-快三开奖今天| www.rl27.com-快三广西开奖| www.435517.com-分分彩漏洞计算方法| www.526336.com-宝乐彩票登录| www.618151.com-外围彩-| www.693139.com-竞彩篮球比分直播网| www.769059.com-玩好彩有赚到钱的吗| www.847440.com-竞彩足球停售| www.911527.com-福彩快三冷号| www.968624.com-有没有微信时时彩群| 汇彩网www.hcw266.com| www.850368.com-缅甸三分彩开奖| www.dq42.com-小鹿彩票工具| www.65zb.com-198彩总代理| www.5006.org-大有彩票注册网址| www.9134.top-保定朝阳南大街福彩| www.005004.com-3d彩票中奖结果| www.132612.com-彩票截止时间| www.456136.com-球彩台妹头| www.244861.com-万博竞彩app| www.771859.com-福利彩票开奖期查询| www.872054.com-遵义福彩千万双色球| www.886373.com-好运来软件时时彩| www.020154.com-四川体彩中心地址| www.278957.com-财神彩票网-| www.84mu.com-网络上的快三可信吗| www.91fw.com-家彩开奖千禧开机号| www.082758.com-福彩双色球机选号码| www.336332.com-新浪彩票数据提醒| www.504598.com-彩绘近义词-| www.153608.com-时时彩胆位投注技巧| www.288427.com-彩票高手求职视频| www.qp95.com-彩票有什么-| www.43ri.com-竞彩胜平负入门| www.73520.cc-高频彩套利陷阱| www.663821.com-分分彩哪种打法稳赚| www.759311.com-彩票根号-| www.870754.com-下载彩票投注| www.952997.com-九州彩票快三| www.997767.com-c58彩票安卓版| www.qk17.com-快三看和值有啥规律| www.10kk.com-256c彩票-| www.79pl.com-500彩票网500| www.bf21.com-辉煌彩交易安全吗| www.ug57.com-彩乐乐幸运选号| www.32zn.com-哪个平台的彩票正规| www.0593.bid-彩吧图谜第三版| www.7511.xyz-中国禁止网络彩票| www.273561.com-彩票案于海最终结果| www.358794.com-体彩6十1中奖概率| www.521901.com-贵州十一选5爱彩乐| www.66sz.com-买彩票能戒吗| www.5894.cc-彩票网站都黄了吗| www.63ti.com-重生之彩票大王| www.0632.top-武汉彩票转让信息| www.7366.net-我附近的彩票| www.3014.cm-彩的谜面-| www.02085.com-内蒙古时时彩网站| www.506519.com-彩天地app下载| www.813107.com-中国福彩天罡八卦图| www.0686.top-赛马及派彩-| www.8280.biz-体育彩票电话| www.40725.com-彩90彩票注册| www.377094.com-腾讯时时彩策划| www.653635.com-莱利彩票是什么| www.057631.com-预测彩票-| www.180588.com-玩快三输的倾家荡产| www.300031.com-福彩快三是怎么回事| www.337427.com-火星彩票好坑啊| www.793779.com-ak彩票馆诈骗案例| www.006028.com-湖北快三追号计划| www.120803.com-重庆时彩胆拖玩法| www.019866.com-七彩网江苏快3| www.56872.cc-唐龙说彩今日点评| www.014749.com-快彩乐手机-| www.076778.com-体彩排列三预测号码| www.26bx.com-彩票线上-| www.379664.com-彩票中奖原理| www.360885.com-国家高频彩票害人| www.445231.com-1彩票开奖-| www.841631.com-七乐彩选号定胆公式| www.932660.com-2118彩票-| www.980012.com-2018彩票app| www.fo30.com-中国体彩-| www.947930.com-官方网上购彩平台| 网易彩票www.076wy.com| www.pn23.com-中国快三中奖助手| www.279326.com-怎样玩大发快三| www.ye48.com-安徽快三电视走势图| 大富豪www.297277.com| www.lk09.com-中彩啦安卓-| www.m07.com-乐彩网快3-| www.33lu.com-体彩购买时间到几点| www.89qi.com-竞彩老吴的微博| www.1200.com-全民汇彩app| www.5976.biz-体彩杀号和金码| www.202263.com-826购彩合法吗| www.22792.cc-九州体育博彩官网| www.231944.com-福彩字谜图迷总汇| www.298418.com-新彩吧网-| www.s65.club-湖北快三最牛网| www.55ii.cc-金利彩票手机版下载| www.078568.com-安徽各地市体彩中心| www.678895.com-欧冠足彩攻略| www.007538.com-彩客彩票app| www.21682.cc-玩彩票大咖-| www.39692.cc-七星彩今晚开奖结累| www.23492.com-彩票游戏能赚钱吗| www.67824.com-彩票站老板让人赌博| www.9632.cn-排列三预测彩宝贝| www.39vy.com-全国彩礼最高的省份| www.193191.com-贵州快三结果查询| www.689844.com-凤凰微彩官网| www.672510.com-足彩预测app| www.777644.com-河北福彩排7走势图| www.849311.com-上海快三跨度开奖控| www.907714.com-雷州七星彩梦册查码| www.987102.com-彩迷网怎么样| www.a36.cn-中华彩票网开机号| www.8254.cn-赢乐彩-| www.104480.com-竞彩足球兑奖规则| www.590574.com-启程就能到达足彩| www.655831.com-湖北彩钢围挡定做|