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.806881.com-彩票变废纸-| www.929346.com-安徽各地市体彩中心| www.982706.com-体彩微信公众号| www.ga20.com-天天中彩票骗局| www.wd16.com-福利彩票什么算中奖| www.07qw.com-彩谜天地-| www.70os.com-福彩的工资怎么回事| www.1128.biz-中国福利彩票山东| www.8591.xyz-57彩票下载安装| www.35241.com-带玩彩票qq群号| www.77157.cc-彩票头等奖-| www.022674.com-时时采彩开奖记录| www.091600.com-春秋娱乐彩票平台| www.151911.com-内蒙快三n-| www.259811.com-内蒙古福利彩票快3| www.323627.com-七乐彩开奖号查询| www.385599.com-梁平体彩-| www.509078.com-916彩票中心| www.571503.com-湖北福彩玩法| www.631138.com-薄荷绿好彩烟支| www.693308.com-鸿博彩票-| www.762923.com-168彩票网安全吗| www.870004.com-福彩数字3开奖结果| www.936621.com-足彩进球彩玩法介绍| www.982254.com-中华彩票彩种| www.cp5152.com-上海快三技巧| www.jz40.com-新2彩票-| www.ys83.com-我要看体彩-| www.15mw.com-qq彩票网官网| www.003.cx-亿彩堂邀请码| www.2509.cm-6彩天下-| www.7276.loan-怎么画彩虹桥儿童画| www.16299.cc-足彩开奖比分直播| www.53288.com-彩之家网站首页| www.91244.com-台湾好彩双爆| www.039773.com-恒大彩票官方网站| www.157456.com-彩票之家官方| www.228326.com-河南都有什么彩票| www.289953.com-cp白菜彩金网站| www.353762.com-彩胜团队-| www.417691.com-金线苏式彩画| www.507700.com-彩票世界手机版| www.565582.com-彩票两元网数据遗漏| www.624228.com-彩票33号平台| www.684665.com-福彩3d中奖怎么兑| www.751633.com-每日彩票-| www.811106.com-竞彩之家网页版| www.874934.com-酷彩吧ios-| 爱彩乐www.www.ac9911.com| www.vo0.cc-海南彩票大赛| www.nv20.com-彩票挣钱靠谱吗| www.z40.org-彩神v封号-| www.42ze.com-福彩3d猜2d规则| www.050.date-网络赌彩票犯法吗| www.2460.wang-彩81下载苹果版| www.6879.biz-好彩头上市-| www.10350.com-95彩票网页-| www.43141.com-福彩山地带线走势图| www.79151.com-足彩预测单场专家| www.021526.com-辽宁快乐十二彩票| www.081750.com-澳门数字彩票技巧| www.134868.com-芙蓉王五彩缤纷香烟| www.202608.com-大发快三下载| www.265191.com-广西快三计划群| www.502156.com-买500彩票犯法吗| www.561459.com-福彩3d精准资料网| www.618341.com-世界杯足彩比分赔率| www.675332.com-兴华彩票网-| www.733632.com-江苏快三推荐豹子| www.791360.com-排列三字谜彩宝见| www.853708.com-六个彩下载-| www.903770.com-如何开发彩票app| www.957395.com-132彩票下载| www.999099.com-快三开奖计算公式| www.cp0304.com-大发快三彩票软件| www.is30.com-口袋彩票合法吗| www.wk02.com-分分中彩首页| www.02co.com-七色彩虹哪几种颜色| www.55mc.com-pc蛋蛋彩票app| www.451.xyz-福彩3d大公鸡图2| www.3410.vip-带迷彩军人网名霸气| www.8130.in-必发彩票骗局揭秘| www.20338.com-九度彩票是怎么回事| www.54678.com-加微信号送彩金| www.89832.cc-在日本买彩票中奖了| www.030972.com-江苏快三全天计划表| www.092608.com-订婚四彩礼-| www.140885.com-山东福彩网首页| www.204886.com-网彩平台哪个最靠谱| www.259903.com-体育彩票规则介绍| www.317487.com-竞彩怎么投注最稳| www.373753.com-精彩足球预测| www.588799.cc-汇彩网快三-| www.649664.com-博彩美縺-| www.745809.com-三地福彩走势图| www.789268.com-鸿发彩票官网| www.832216.com-好莱客彩票下载安装| www.885523.com-约彩票下载-| www.969988.com-双彩网网址导航| 凤凰彩票网www.558738.com| www.dz82.com-彩神快3下载| www.qv20.com-qq分分彩官网开奖| www.07fo.com-新彩吧藏机图正版| www.57mf.com-千里马团队阳光彩票| www.286.bid-什么是七星彩三字现| www.2424.biz-福彩六等奖多少钱| www.6885.cn-广东彩票开奖查询| www.08717.com-代理彩票反水| www.39323.com-时时彩追号技巧集锦| www.71176.com-上海福彩基诺彩票| www.061619.com-彩客网五分快三| www.122860.com-酷彩吧app安全吗| www.176947.com-国家福彩一分快三| www.230402.com-福彩3d下期预测| www.284619.com-快彩网首页-| www.367233.com-彩聊微信下载| www.432391.com-49c彩票集团| www.508088.com-安徽快三奖-| www.564727.com-体彩店主要什么赚钱| www.612898.com-网上玩彩票计划平台| www.665883.com-新加坡4d彩票规则| www.720902.com-乐彩网p3专家预测| www.777764.com-江苏彩票七位数规则| www.891131.com-幸运彩票网页计划| www.947266.com-双彩图3d双彩图| www.981969.com-日本彩票规则| www.dx13.com-快三一分app| www.qg94.com-好彩双爆多少钱一包| www.s02.cc-湖北快三加奖| www.30mf.com-创意色彩头像| www.96xp.com-十选一是什么彩票| www.1618.tv-非凡彩票可信吗| www.6978.cm-重生时时彩后一技巧| www.04718.com-竞彩交流微信群| www.35759.cc-万利彩票app| www.67717.cc-网上购彩算不算赌博| www.025814.com-内蒙古彩票-| www.081517.com-网络福利彩票合法吗| www.128117.com-快三是私人彩票吗| www.178966.com-北京快三是合法的吗| www.229016.com-天天好彩开奖号码| www.279928.com-皇家时时彩app| www.374182.com-河南彩票兑奖中心| www.450072.com-爱赢彩彩票app| www.518107.com-七星彩五行分布| www.567048.com-大乐透彩票软件下载| www.617255.com-彩神关注码-| www.666601.com-怎么投诉彩票| www.715190.com-这彩票是真不能买了| www.767516.com-广东褔彩快乐十分| www.871847.com-49彩票集团是| www.925323.com-ba彩票平台-| www.965447.com-凤凰快三软件| CP701www.cp702.vip| www.bv6.com-980彩票-| www.ip02.com-烟台福彩-| www.ug44.com-输入彩票号自动查询| www.v04.cn-山西体彩营销方案| www.27qs.com-福彩熊猫送胆| www.464.cm-财神彩票简体中文| www.2162.org-福彩代理需要多少钱| www.6078.biz-足球500万彩票网| www.9685.cm-c8万彩.cn-| www.45504.com-老时时彩开彩结果|