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天

知道了
金山彩票 www.860860.cc-60万一包的好彩| www.308220.com-c彩38-| www.539460.com-彩票站未来发展趋势| www.725771.com-今晚福彩几点开奖| www.892736.com-可靠的快三平台下载| www.cp5563.com-3分快三开奖结果| www.23md.com-大发快三中奖截屏| www.230731.com-购彩软件-| www.308593.com-彩73彩票领导者| www.72185.com-25彩票-| www.551578.com-体彩大乐透合买大厅| www.683359.com-环彩o2o-| www.181080.com-今天福彩快3走势图| www.043434.com-彩票代理拉人术话| www.2453.com-金钱豹彩迷会| www.700845.com-我要下载彩票开奖| www.860595.com-快三每天开奖时间| www.952676.com-乐和彩网址-| 博乐彩票www.35918r.com| www.6nb.cc-能预知彩票奇人| www.886451.com-双色球买彩大厅| www.mm24.cc-快三预测号码软件| www.084646.com-快彩下载链接| www.257333.com-微彩吧app下载| www.363125.com-天彩app官网| www.009503.com-三d彩票论坛首页| www.650511.com-海南彩票开奖查询| www.923514.com-cp.12彩票官网| www.996900.com-头奖彩票3d-| www.lp65.com-旺彩预测大乐透| www.47dk.com-体育超级大乐彩查询| www.381704.com-泰安彩票店转让信息| www.683212.com-男子一亿买彩票| www.787842.com-河南马前县彩礼规定| www.877577.com-彩票发财脸-| www.963429.com-万福彩票-| 大赢家彩票平台www.591023.com| www.472600.com-时时彩两期推波方法| www.756267.com-幸运分分彩计划| www.886881.com-中国福利彩票中奖| 百姓彩票www.bxcp3.com| www.886908.com-江苏快三全天计划表| www.974687.com-七星彩特区论坛头尾| www.ap46.com-吉林快三开奖直播| www.d64.cc-看体彩排五开奖号| www.37rt.com-极速一分彩计划| www.33432.com-福彩快3中奖对照表| www.025720.com-凤凰网彩票有退水吗| www.132270.com-彩礼索要过多| www.086715.com-溢彩年华旗舰店| www.195688.com-吉林福彩快3| www.311991.com-体彩七星彩网上购买| www.449198.com-福彩彩票站提成| www.095533.com-线上购彩网站| www.309249.com-马来西亚乐和彩合| www.397849.com-体育彩票加盟店联系| www.639486.com-彩票店彩票不上报| www.550076.com-优彩戴泽新-| www.8392.net-重庆彩合法吗| www.f50.net-7乐彩免费推荐| www.232929.com-百彩网正版资料| www.484062.com-好彩客app最新版| www.506646.com-乐彩双色球图谜论坛| www.611353.com-竞彩500合买投注| www.hl7.com-快乐彩12-| www.9380.shop-tt彩票账号-| www.53892.com-新浪彩票客户端下载| www.010446.com-体育彩票开奖查询体| www.122541.com-澳门彩金骗局| www.814387.com-三分快三开奖计划| www.068995.com-快三模拟摇奖| www.625806.com-七星彩瑶冰魄| www.450156.com-彩票瘾怎么戒掉| www.562591.com-重庆十分快三| www.980088.com-竞彩胜平负开奖结果| www.849205.com-香港利民彩计划| www.90942.com-彩票机选还是自选好| www.397791.com-九万彩票专业版| www.589857.com-球探足彩比分直播网| www.669774.com-七位数的彩票| www.751128.com-高频彩8彩票| www.809170.com-f彩网犯法吗| www.880741.com-快三单双-| www.948981.com-国彩彩票是官网吗| 天地彩www.44tdc.com| www.bk03.com-聚宝彩票是真的吗| www.qw65.com-时时彩老版走势图| www.10uw.com-四季彩代理最高返点| www.77cb.com-彩迷直通车自动更新| www.218787.com-大发快三怎么稳赢| www.88138.cc-彩票app自动追号| www.069587.com-福彩3d跨度号码表| www.8176.cc-重庆时时彩2期必中| www.83896.cc-玩彩赚钱是不是真的| www.829099.cc-彩9彩票ios下载| www.953149.com-七乐彩幸运机选| 彩票坊www.583877.com| www.585086.com-诺亚在线彩票违法吗| www.661469.com-彩票代投长期兼职| www.907043.com-地方快三可靠吗| www.964173.com-网络售彩十选五骗术| www.cai2200.com河北体彩十一选五| www.642424.com-中彩网全偶统计图| www.719005.com-彩虹象-| www.810631.com-福彩开奖上期结果| www.883626.com-高频彩票停售原因| www.62184.com-购彩平台彩票娱乐| www.945371.com-足彩玩法-| www.pl24.com-体彩北京快3走势图| www.28rd.com-易迅时时彩-| www.2969.loan-金祥彩票网址导航| www.77jf.com-网易福彩预测| www.7482.org-彩票店摆设-| www.760959.com-三分时时彩定胆计划| www.618012.com-垂直彩票网-| www.33906.com-彩吧图库彩吧图库| www.006613.com-好彩246天天好采| www.108975.com-有没有彩票代打群| www.013576.com-今天七星彩图纸| OK彩票www.ok52.com| www.72768.com-北京彩票app| www.103080.com-乐和彩走势图表| www.934679.com-利奥彩票app| www.987202.com-广西福彩兑奖服务处| www.oe46.com-大陆平台彩票送彩金| www.31sr.com-竞彩软件下载哪个好| www.362.cn-我爱中彩票网| www.8633.org-彩神通代理软件下载| www.59018.com-彩票预测系统第二版| www.023077.com-南方彩票网预测分析| www.223459.com-线上快三-| www.972622.com-彩铅画春天-| www.120342.com-英国五分彩下载| www.978790.com-好彩1开奖预测| www.sq8.com-百乐宝彩票-| www.vh79.com-福彩八码最大遗漏| www.9ay.com-福彩3d对子多少钱| www.340101.com-怎么p彩票中奖| www.391918.com-彩吧3d胆码图| www.791125.com-甘肃快三走势图明天| www.639951.com-个人七星彩软件下载| 天下彩www.460689.com| www.949068.com-福彩在线怎么玩| www.02482.com-至尊彩是不是黑平台| www.083234.com-组织快三犯法吗| www.41789.cc-休育彩票几点开奖| www.92643.com-澳洲男子彩票全中| www.558018.com-彩票北京pk10| www.630908.com-好彩欧盟-| www.710834.com-刷福彩是什么意思| www.554632.com-大富彩票网靠谱吗| www.893300.com-彩票大师app| www.681100.com-网络彩票怎么戒掉| www.92883.com-时时彩就是一个骗局| www.412383.com-彩钢条牌匾-| www.155735.com-福彩3地图谜汇总| www.673958.com-玺彩画-| www.237079.com-全能中彩彩票| www.981809.com-大发彩票是违法的吗| www.993668.com-送彩金的打鱼| www.4445.cm-满堂彩彩票官网| www.386303.com-重庆体彩官网平台| www.079976.com-彩票扣税-| www.471896.com-香港皇家彩报|