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.63rp.com-福利彩票自动销彩机| www.019265.com-我要查彩票中奖| www.092225.com-福彩全部图标| www.250615.com-高手计划中福快三| www.067391.com-网上私彩举报| www.3ft.cc-顺丰丰彩中奖几率大| www.472.bid-可靠彩票的网投平台| www.728224.com-京东彩票网官网一| www.282166.com-51彩票实时计划| www.280750.com-时时彩超级精准计划| www.369217.com-新疆体彩兑奖地点| www.375263.com-体彩组选三-| www.561257.com-下一期体彩预测码| www.908721.com-动物彩票-| www.502910.com-鸿彩直播破解| www.4059.cc-七星彩一组头尾| www.217365.com-快三追号欠下巨款| www.771112.cc-老时时彩走势图下载| www.861088.com-好彩26选2-| www.933320.com-小鹿多彩工具| 百姓彩票www.bxcp3.com| www.37415.com-那里网络购彩| www.898.hk-网上买彩票怎么报案| www.384669.com-彩票王的故事| www.381277.com-澳门福彩24小时| www.612981.com-南洋彩票官方网| www.844684.com-彩票下面的码是什么| www.917905.com-专业彩吧助手| www.979450.com-白菜网送彩金交流群| www.aa59.cc-体彩排列三开机号| www.8692.org-手机扫描彩票| www.69447.com-天津时时彩在线直播| www.63bf.com-体育彩票奖规| www.2544.cm-彩字在五行中属什么| www.109010.com-足彩亚盘欧赔| www.690031.com-周二双色球老头看彩| www.798059.com-福建彩票11选5| www.126766.com-8k彩票邀请码| www.98if.com-金博彩票下载| www.8099.in-高频彩怎么玩都会输| www.23532.cc-彩票站转让得多少钱| www.003697.com-722彩票网-| www.932037.com-犀牛彩票8-| www.985142.com-竞彩赔率规律| www.li31.com-聋哑人中彩彩票输了| www.35pd.com-在香港哪里买彩票| www.625319.com-长城彩-| www.693864.com-红神体彩下载| www.292723.com-大乐透彩票选号技巧| www.378787.com-优乐彩7697下载| www.991981.com-福利彩票复式投注表| www.732371.com-彩7彩票-| www.840559.com-足彩胜平负概率表| www.979748.com-一品彩票网手机版| www.qt59.com-福彩宗旨-| www.60ta.com-1216彩票-| www.6832.xyz-手持彩色烟雾棒| www.51367.cc-3d彩易网站-| www.039639.com-彩票合买系统在哪找| www.005106.com-彩民心水家-| www.372681.com-七乐彩专家预测| www.509769.com-内蒙古体彩竞彩| www.300725.com-18彩票网-| www.390808.com-九万彩票下载安卓版| www.867854.com-七星彩位置-| www.941236.com-彩票对冲套利方法| www.993544.com-足彩结束日期| www.ef23.com-百姓彩-| www.xd52.com-福彩快3几点到几点| www.562887.com-二八彩app下载| www.655248.com-湖北快三开走势图| www.719896.com-七星彩复式容易中吗| www.800232.com-上海彩票自助| www.399877.com-彩票分析家-| www.44bw.com-什么叫出彩了| www.231308.com-购彩吧软件-| www.pe43.com-中发彩票邀请码| www.34si.com-玩彩代打-| www.1151.top-彩之云彩富宝| www.058613.com-高频彩平台网址| www.39523.cc-豪彩官网注册| www.9764.cc-乐彩排列五-| www.040955.com-世界彩票巨奖排行| www.271695.com-好彩一八猜什么生肖| www.399562.cc-e赢彩官网-| www.688566.com-彩上海体育彩票转让| www.757676.com-腾讯一分彩-| 彩多多www.78949x.com| www.906232.com-彩色的拼音-| www.974154.com-信誉彩票网-| 旭彩www.737298.com| www.iy25.com-体彩浙江6十1开奖| www.341342.com-经典微信彩票群名称| www.4127.xyz-彩虹和长鹰无人机| www.841085.com-三地彩票中奖号| www.925257.com-体彩杀号定胆2元| www.980410.com-福彩广西基本走势图| www.as25.com-上海快三专家预测号| www.sf11.com-把高频彩当职业| www.15qq.com-体彩有关的对联| www.572477.com-湖北福彩网双色球| www.822559.com-台湾彩虹旗论坛| www.84534.com-彩色混凝土单价| 91彩票网www.912484.com| www.55728.cc-花生彩票真的假的| www.179201.com-百盈快三稳赚计划| www.268671.com-鸿彩网平台-| www.076922.com-app彩票站-| www.165365.com-安徽福彩中心电话| www.743518.com-那里网络购彩| www.812097.com-足彩开奖及奖金| www.879986.com-彩友玩啥-| www.946988.com-乐选3中奖规则体彩| www.984956.com-彩运8有几年了| www.cp2775.com-极速快三网址| www.662252.com-七彩乐开奖-| www.815789.com-新濠影汇博彩玩家| www.907075.com-腾讯十分彩开奖结果| www.cai4922.com甘肃快三开奖号预测| www.01487.com-棋牌网站注册送彩金| www.022917.com-环球迅8彩票| www.919120.com-中国黑彩在菲律宾| www.968354.com-胜负彩开奖查询| 凤凰彩票www.77802c.com| www.fj67.com-比较稳江苏快三计划| www.vh95.com-彩站宝彩民端叫什么| www.03er.com-南宁体彩去哪里领奖| www.62yv.com-阿理彩票app| www.773538.com-台湾五分彩开奖依据| www.22635.cc-时时彩老平台排名| www.23xd.com-盛彩彩票是真的吗| www.0109.vip-沉迷于彩票-| www.5675.cn-时时彩专家排行| www.580127.com-彩天堂app下载| www.663355.com-123福利彩票| www.745592.com-福彩3d百个差大彩| www.278861.com-彩票害人的真实故事| www.386496.com-重庆体彩网点电话| www.21362.cc-彩票跨度选号技巧| www.67128.com-彩票兑换地点| www.5862.xyz-易购娱乐时时彩代理| www.194970.com-吉林快三什么意思| www.323575.com-彩78软件下载| www.890929.com-至尊彩平台是真的吗| www.968966.com-彩神喷绘机怎么样| www.aw08.com-福彩五行绝杀码| www.oe49.com-注册送彩彩票| www.80au.com-手机买广西福利彩票| www.4442.wang-吉林快三形势走势图| www.4cf.com-彩票版区开开开| www.59ec.com-体育彩票杯-| www.89921.com-093彩票还点| www.095046.com-好彩牛材网-| www.835177.com-美国好彩香烟柠檬| www.062474.com-人人中彩票维护| www.176038.com-快三规律破解技巧| www.40403.com-彩票烂了能兑奖| www.818595.com-新快赢481彩票| www.874596.com-杭州福彩中心| www.939339.com-福彩门户资料| www.976908.com-焦作孟州结婚彩礼| www.ru91.com-90彩票首页-| www.v41.cn-豪客彩票下载安装| www.935067.com-天天赢彩票怎么样|