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天

知道了
彩票256平台 www.209229.com-内蒙古时时彩走势图| www.479365.com-青岛福彩-| www.85455.com-七星彩18143期| www.if2.cc-内蒙古快三跨度振幅| www.825001.com-福彩动物总动员玩法| www.934392.com-快彩电视-| www.999915.cc-趣9购彩票是真的吗| www.cz71.com-人人竞彩网-| www.85st.com-游戏彩票任务代打| www.4500.tv-足彩最快开奖| www.10222.com-竞彩足球魔方| www.66648.cc-万博博彩app下载| www.024528.com-体彩快3规则| www.123806.com-天天乐彩官网首页| www.563321.com-官方彩票漏洞赚钱| www.637018.com-满堂彩彩票下载| www.768855.com-天猫快彩听过吗| www.839684.com-彩色耐磨地坪漆| www.905553.com-为陌生人买彩票| www.970267.com-福彩排列三开奖规则| www.227.cm-8k彩票有几年了| www.hk94.com-新快三玩法几点结束| www.h88.net-香港49码彩票网| www.855024.com-中竟彩网首页| www.968774.com-e乐彩vip-| www.cp3589.com-福彩快三是什么彩票| www.550277.com-江苏体彩中心官网| www.685439.com-福彩蓝精灵21| www.873670.com-掌上彩票app下载| www.993366.com-足彩奖池滚存| www.op65.com-吉林快三中奖技巧| www.90ct.com-彩漂水成分-| www.6970.cn-时时彩四星杀号方法| www.60101.cc-福彩手机客户端| www.113909.com-福彩官方下载| www.229729.com-app彩票-| www.350956.com-南方购彩网-| www.506172.com-时时彩平台登录注册| www.802348.com-买体彩的中奖概率| www.904409.com-668彩票网靠谱吗| www.978061.com-彩钢瓦的钉子安装图| www.pj9.com-彩票app都停售了| www.tj20.com-香港快三官方网站| www.06ji.com-福彩3d33期-| www.76ey.com-名人彩票登陆| www.2535.xyz-福利彩票一月利润| www.8887.org-福彩十二生肖玩法| www.39142.com-最新购彩软件| www.86197.com-双色球体彩-| www.051070.com-166i彩票-| www.155153.com-希腊10分彩app| www.266809.com-彩票赌大小能玩吗| www.344514.com-彩票预测公司| www.417518.com-分分彩选号软件| www.513808.com-福彩双色球多久一期| www.580551.com-500彩票正规的吗| www.651245.com-彩百万娱乐下载| www.772155.com-时时彩倍投的规律| www.842228.com-福彩资金分配| www.905728.com-网彩一分快三网址| www.967215.com-彩票481软件| 大赢家彩票www.354611.com| www.pv50.com-彩票是真是假| www.10gu.com-酷彩假货怎么分辨| www.80nm.com-超极彩票-| www.2748.vip-中彩吧登陆-| www.19477.cc-新浪时时彩图感觉| www.93545.com-老虎彩票app下载| www.386380.com-四川省福利彩票组六| www.490811.com-支付宝能买彩票| www.558425.com-古风女子手绘彩铅| www.618530.com-山东体彩论坛170| www.681015.com-辽宁福利彩票中心| www.770867.com-一起博彩票-| www.839412.com-新浪爱彩网首页| www.898148.com-彩票总买一个好术语| www.974272.com-一分钟开奖彩票网址| www.cai7399.com湖北快三今天| www.337030.com-购买彩票软件| www.505210.com-中国福利彩中奖金额| www.626038.com-巴西3分彩开奖网址| www.774813.com-体彩777刮刮乐| www.926579.com-瑞彩网是正规平台吗| www.qj0.com-中信彩票平台| www.0ok.com-买彩无忧-| www.186922.com-快三屠龙是什么意思| www.323139.com-乐和彩网站-| www.486668.com-财神8五分彩| www.345049.com-忆彩票下载-| www.514985.com-十大彩妆加盟电话| www.616958.com-买彩票中奖概率最高| www.730945.com-中福彩票湖北| www.842048.com-杨震足彩任九| www.962392.com-大发彩票手机登录| www.bf77.cc-98vip彩票网| www.43jt.com-下载网易彩票软件| www.4706.top-彩票专套穷人钱| www.568175.com-环球彩票不给取钱| www.2046.vip-支付宝咋个买彩票| www.82895.cc-今晚体彩开奖直播了| www.226614.com-彩88app下载| www.942200.com-彩96app娱-| www.582712.com-买彩票欠的款合法吗| www.796681.com-博众彩之长-| www.993906.com-我想玩彩票-| www.626171.com-金祥龙版彩票| www.68732.cc-九鼎彩票平台地址| www.441400.cc-彩钢瓦机器价格| www.476902.com-福彩快乐十分新规则| www.630368.com-36期彩吧彩报| www.796324.com-盈彩吧邀请码| www.997468.com-彩99app安卓版| www.mj09.com-好彩投app苹果版| www.4573.cn-易彩乐下载官网| www.52555.cc-福彩内部人员微信群| www.79zz.com-福彩牛彩网官网| www.879316.com-快速开奖彩票| www.cs59.com-快三倍率是多少钱| www.71id.com-下重庆7时彩| www.9963.org-今天小小鱼彩吧图| www.jb65.com-辽宁体彩网官方网站| www.484694.com-晓风彩票系统| www.362225.com-形容彩虹的句子| www.530390.com-超极彩票助手| www.659303.com-有微信彩票合买群号| www.779171.com-重庆时时彩2018| www.826637.com-98彩是真的吗| www.845191.com-体育彩票的定义| www.42wl.com-彩票平台招募计划员| www.358759.com-五位数的是什么彩票| www.602403.com-中国彩票假的| www.841609.com-彩票内部人员骗局| www.449390.com-重庆14彩合法吗| www.tm.com-福彩下载安装| www.9qe.com-今晚开七星彩规律图| www.581740.com-彩票签到送现金| www.388440.com-骰子彩票的技巧| www.581931.com-彩879平台-| www.905130.com-江西福彩快三直播| www.9230.top-乐彩提成-| www.170007.com-金手指甘肃快三推荐| 500彩票www.547077.com| www.54pa.com-福彩三地跨度表| www.2735.pw-分分快三贴吧| www.31815.cc-梦想彩票网是真的吗| www.530333.com-星际彩票app| www.14co.com-百乐彩怎么登录的呢| www.947310.com-3d麦久彩票网| www.515476.com-七星彩中了500万| www.ul94.com-福彩3d乐彩网首页| www.78xo.com-体彩单场竞猜奖金| www.46609.com-下载时时彩平台玩| www.101940.com-竞彩8串1最高奖金| www.253860.com-彩678app下载| www.599837.com-中国什么彩票金额大| www.4666.biz-买彩票心里-| www.804629.com-中国彩吧3d开奖号| www.7682.loan-汪汪彩计划-| www.25923.com-中国彩吧网软件下载| www.fi64.com-福利彩票快3奖金| www.57308.com-苹果手机购彩| www.009086.com-今晚彩票开奖情况| www.260029.com-288彩票正规吗| www.619362.com-彩票上无地址|