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.154510.com-福利彩票色子敲门| www.545144.com-武汉福彩店转让信息| www.50pd.com-十四场足彩直播吧| www.7812.net-玩竞彩-| www.959435.com-彩票战狼计划软件| www.487706.com-网彩漏洞-| www.224334.com-湖北福彩中心官网| www.953454.com-竞彩即时支持比例| www.361002.com-永安彩票网-| www.310531.com-山东体彩论坛打不开| www.2519.pw-江苏福彩快直彩乐乐| www.95wt.com-福彩3d围数技术| www.16iy.com-k彩游戏20图片| www.398159.com-大奖彩票网上购买| www.122840.com-执行彩票公益金| www.528757.com-体育彩票复式怎么买| www.019220.com-买彩票多少钱| www.56.biz-彩泥图片-| www.494260.com-福建体彩有app吗| www.827798.com-福彩跟单什么意思| www.896383.com-乐福彩票合买平台| www.967164.com-神彩通金码关注码| www.bf37.com-快彩是骗局吗| www.659577.com-休彩出什么号码| www.460679.com-三分彩怎么看走势图| www.173632.com-天天彩选四开奖| www.340117.com-足球彩票澳客网| www.2048.vip-彩虹小鸡动画下载| www.533880.com-1分彩和值单双| www.634752.com-七彩油滴盏-| www.30oo.com-福彩大乐透预测最准| www.57883.cc-全球彩开奖下载| www.1qd.cc-老梁什么彩票股票| www.3404.com-欢迎登录国民彩票| www.920608.com-幸运快三技巧顺口溜| www.575887.com-6288彩票怎么样| www.133958.com-好彩在哪买-| www.12gc.com-江苏体彩老快三| www.020100.com-南国彩票7星彩论坛| www.ti55.com-418彩票-| www.31cg.com-彩票三位数开奖结果| www.996.xyz-特区彩票论坛下载| www.1827.pro-吉祥彩在线登录| www.9214.love-航空彩虹股-| www.50502.com-808彩票安卓版下| www.13ly.com-七乐彩50期开奖| www.9731.net-破解五分彩个位规律| www.558431.com-星空彩铅-| www.649598.com-博彩管理专业学什么| www.887836.com-天天爱彩票下载安装| www.957476.com-快三龙最长出多少期| 博乐彩票www.35918e.com| www.405705.com-中国彩礼最高的省份| www.247714.com-七天彩是不是坑人的| www.356159.com-数学计算彩票中奖率| www.0638.net-cc彩球网手机网址| www.8198.cn-澳门彩票资讯网| www.29926.cc-彩运无限安全吗| www.966850.com-福彩3d顺口溜| 至尊彩票www.150935.com| www.gy04.com-广州鸣彩艺术诈骗| www.127548.com-彩虹六号经典语录| www.230310.com-北京快三线路| www.139021.cc-天空彩票软件| www.222534.com-注册就送彩-| www.67211.com-阜阳福彩中心在哪| www.101624.com-买足球彩票软件| www.83864.com-镇上买彩票-| www.846979.com-大奖网触屏彩票| www.935328.com-腾讯游戏qq彩票| www.996429.com-足彩北单胜平负结果| www.ck16.com-快彩网-| www.369394.com-牛赑彩票app| www.335963.com-大乐透彩票指南报纸| www.33408.cc-多彩贵州网图片| www.999888.com-台湾彩虹旗-| www.uj06.com-内蒙古福利彩票开奖| www.181834.com-青海西宁快三查询| www.cp1158.com-快三软件-| www.0512.vip-天津彩票自助投注站| www.209262.com-买彩票怎么选号中奖| www.318041.com-萄京彩票骗局| www.383774.com-彩票采集器图片| www.501615.com-彩票159安卓版| www.369405.com-彩友时时彩计划在线| www.9121.org-保定彩票兑奖中心| www.70135.com-彩票8网站-| www.0669.vip-中奖的彩票图片大全| www.598978.com-中彩网开奖视频直播| www.689604.com-胜负彩欧盘亚盘| www.9453.top-棋牌彩票qq群| www.31975.cc-豪彩平台登录| www.374914.com-百世子彩票软件| www.513396.com-时时彩一星直选| www.586404.com-充值送彩金38| www.658001.com-万金彩票-| www.735361.com-外围彩票稳赢打法| www.819153.com-买彩票几百万| www.74265.com-彩虹旗为什么禁止| www.085081.com-彩客彩票ios| www.53ak.com-遵义彩票销售员招聘| www.0034.cm-什么彩票7位数| www.21322.com-1305彩票兼职| www.936592.com-彩客竞彩彩票好用吗| www.cai7166.com快三预测开奖软件| www.b04.com-水彩创意表现形式| www.21yb.com-千喜彩票网址| www.92of.com-五八同城彩票销售员| www.575780.com-体彩试机号3o期| www.967121.com-体彩提成-| www.062748.com-彩96彩票平台| www.769917.com-玩好彩输了好多钱| www.859707.com-官方699彩票| www.937205.com-为内蒙古喝彩原版| www.996225.com-罗马彩票官方网站| www.am10.cc-彩票购彩大厅| www.443995.com-最新一期彩票开奖| www.552040.com-万彩吧开奖查询结果| www.163300.com-彩票外围帮投团| www.639060.com-体彩开店补助| www.53216.cc-腾讯分分彩邀请码| www.024113.com-河北彩票快三42| www.8454.top-澳门合法的博彩公司| www.286156.com-体彩试机号今天| www.578819.com-体彩店布置-| www.698880.com-初学者一幅彩铅画| www.361788.com-e赢彩靠谱吗| www.285253.com-什么彩票有快三| www.82kt.com-江西福彩赣州兑奖处| www.22155.com-足彩走势图带坐标| www.732073.com-3d彩报图今天老虎| www.511456.com-彩虹两个字别称| www.582040.com-cp彩票微商-| www.646577.com-足球竞彩能玩不| www.03554.com-买七星彩赚钱骗局| www.41305.com-中奖中彩中的意思| www.261064.com-亚洲彩票骗局| www.420262.com-彩票投资盈利| www.539607.com-彩票平台在线抢红包| www.sn71.com-时时彩后二四胆做法| www.64dr.com-黑网站和重庆时时彩| www.937234.com-福中彩票app| www.977568.com-彩票截止时间是几点| 大赢家彩票平台www.817055.com| www.658642.com-彩票店能买世界杯吗| www.672456.com-福彩3d和尾-| www.778146.com-时时彩早上几点开盘| www.899261.com-快三未出号码| 福彩www.15355m.com| www.965083.com-时时彩大群-| www.301889.com-湖北新快三软件下载| www.458321.com-1998世界杯彩票| www.767681.com-中大奖彩票网充值| www.946949.com-官方彩种春节关闭| www.cai906.cc-中国福利彩票快3| www.0648.vip-天意彩票注册平台| www.605566.cc-彩票平台最好的| www.912478.com-购彩网一分快三计划| www.259937.com-福彩大厅-| www.zd2.com-彩票平台提现失败| www.505056.com-体彩排列五分析软件| www.962196.com-体彩天下定制| www.424442.com-彩票充值不到账| www.615751.com-福彩快三秒魔方|