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.hf0666.com| www.82al.com-七星彩网解码梦| www.123142.com-福彩3d书下载| www.830311.com-567彩票会黑钱吗| 彩客网www.ck9595.com| www.315072.com-彩票之家网站合法吗| www.005861.com-时时中彩票安卓版| www.403228.com-中国竞彩兰球计算器| www.25627.cc-哪个彩票可以容错| www.622688.com-菁彩校园-| www.788346.com-足彩19039最新| www.835653.com-彩票软件那个好用| www.is50.com-江苏福彩手机投注| www.773094.com-微彩吧赚钱是真的吗| www.75ct.com-中彩网三d开奖号码| www.098495.com-福利彩票有什么| www.41789.com-澳发彩票手机版下载| www.723909.com-快三线上app下载| www.929911.com-幸运时时彩走势图| www.cb78.com-彩51下载-| www.22630.com-四亿彩-| www.758586.com-中彩网有哪些| www.379322.com-彩客彩票网下载安装| www.666732.com-体彩排列五今晚预测| www.773071.com-彩票预测最准的专家| www.891048.com-彩票试玩可以提现吗| www.965327.com-手机购彩uu快3| www.dk1.cc-时时彩漏洞计算方法| www.907508.com-免费破解快三软件| www.cm.com-038彩票app-| www.77874.com-临沂体彩转让信息网| www.11tw.com-无彩色-| www.859038.com-福利彩票返奖率多少| www.293568.com-河南福彩8200| www.88244.com-彩票天天领红包| www.139686.com-彩38安装-| www.366338.com-福利彩票23期| www.27fr.com-美女微信买彩票骗局| www.3237.cm-彩彩票开奖结果查询| www.07321.com-澳彩初盘判断大小球| www.64731.com-快三试机号今天| www.53ro.com-福利彩票站点管理员| www.924158.com-彩779-| www.200122.com-搜狐体彩福彩网| www.0727.com-彩票时间差套利| www.34lw.com-专业版赢彩王| www.3119.in-陕西乐彩快3| www.22897.cc-下载易购彩彩票| www.541655.com-tt彩票可靠吗| www.265843.com-宁夏福彩中心在哪里| www.350042.com-河南体彩兑奖地址| www.521083.com-体育彩票销售点| www.13385.com-6号平台彩票网址| www.213090.com-十大黑彩平台软件| www.998111.com-福彩任三-| www.gt38.com-新彩票app下载| www.t18.net-福彩七乐彩预测免费| www.530716.com-时时彩打法技巧大全| www.632183.com-cp77趣彩注册| www.7797.org-足彩最佳投注方式| www.32711.com-新郑和庄镇彩礼| www.87558.cc-彩票龙虎啥意思| www.068583.com-福彩三d断组预测| www.931607.com-如何看彩票中奖没有| www.an11.com-福彩三b图迷总汇| www.vr92.com-彩票双色球开奖预测| www.318476.com-彩票开奖规则最新| www.444556.com-小米日历加彩票开奖| www.106732.com-今日开奖结果彩票| www.4053.vip-腾讯分分彩单期| www.246290.com-江苏体育体彩| www.337396.com-快三不出号码| www.0543.site-郑州481彩票| www.863062.com-新浪彩票预测| www.953362.com-江苏快三点数计划| 多宝彩票www.75538d.com| www.la99.com-新星彩免费中彩| www.zz49.cc-体彩店怎么开| www.17ws.com-彩票撕烂还能兑奖吗| www.928760.com-彩票77软件疼牛| 亿龍彩票www.1368x.cc| www.70770.cc-舟山福彩快二| www.856465.com-彩票网站系统极云| www.86si.com-彩工网公众号| www.6288.me-湖北竞彩行情| www.31176.cc-下载福彩双色| www.22813.cc-今日夺彩app| www.085185.com-彩掌柜彩票是传销吗| www.1249.org-那些彩票软件靠谱吗| www.615535.com-河北体育彩票开奖| www.674399.com-中国利彩票开机号| www.747485.com-彩易科思app| www.66500.com-宁夏快三玩法| www.052053.com-正规彩票合买网站| www.724235.com-彩票计划公式怎么算| www.800214.com-购彩大乐透-| www.629305.com-福彩奖池现在有多少| www.60884.com-腾讯分分彩坑人规律| www.091916.com-江苏还有手游彩吗| www.189758.com-河南快三规则| www.288983.com-快三避龙-| www.3810.cm-体育彩票足球竞猜| www.02415.cc-体彩天下客服| www.60700.com-易购彩赚钱是真的吗| www.501860.com-开彩365是什么| www.589502.com-南国体彩论坛41| www.673689.com-南京体育彩票转让| www.754047.com-分分彩挂机论坛| www.821819.com-手机彩票投注在哪下| www.882867.com-网上兼职彩票刷流水| www.949185.com-pc蛋蛋彩票正规吗| www.994716.com-好彩客官方-| www.zp2.cc-福彩河北快三结果| www.pi40.com-河南彩礼排名| www.r50.cn-彩票网提现不了| www.41sm.com-3d彩票开奖今晚| www.752771.com-彩6彩票软件下载| www.857036.com-福彩基诺彩-| www.919455.com-网上私彩举报| www.974159.com-福运彩为什么要账号| www.cai8066.com快三开奖查询武汉| www.lx44.com-彩票456-| www.726625.com-用手机能买彩票么| www.062487.com-正规买彩票的app| www.331501.com-中国体彩排列三图迷| www.526466.com-时时彩包胆技巧| www.778765.com-彩报网663299| www.868915.com-东北彩王的故事| www.947840.com-竞彩彩票下载| www.999635.com-福彩杀码号-| www.ac93.com-16号体彩-| www.qc24.com-幸运快三是国家的吗| www.692638.com-移动积分兑换彩票| www.758289.com-代理福利彩票赚钱吗| www.1524.vip-赤峰体育彩票| www.261596.com-6329彩票-| www.907068.com-那种彩票六位数| www.971629.com-预测彩票app下载| 天天彩票www.943893.com| www.660405.com-腾讯ai彩数据| www.3060.cc-乐都彩票网址是多少| www.796841.com-足彩任9奖金| www.859494.com-珠江彩票骗人| www.908547.com-人人中彩票骗局揭秘| www.960745.com-彩票送彩金58元| 全民彩票www.qm71.com| www.121664.com-福彩案件14人照片| www.3474.cn-福利彩票走势图分析| www.678642.com-彩票注册即送彩金| www.755064.com-人人快三下载安装| www.815633.com-排列五是福利彩票吗| www.872940.com-彩人帮专家专栏| www.920909.com-彩神viapp-| www.965659.com-彩票宝中提现失败| 网易彩票www.063wy.com| www.mr3.cc-256彩票app| www.ke06.com-苹果手机购彩票软件| www.070777.com-彩票自动售卖机终端| www.075362.com-七乐彩双期走势图| www.978591.com-福建体彩票36选7| www.802236.com-精彩片段-| www.911092.com-浙江有快三么| www.970064.com-彩票带单骗局| 博友彩www.912183.com|