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.888349.com-七星彩解梦码| www.30949.com-彩票幸运飞艇怎么买| www.050208.com-3d彩吧谜图第一版| www.224268.com-网上快三有赢的吗| www.772753.com-时时彩稳赢投法| www.979087.com-好彩无嘴-| www.ca13.com-宁夏11选五爱乐彩| www.ul94.com-福彩3d乐彩网首页| www.dh60.com-众赢彩票骗局| www.n13.net-彩票数学挑选算法| www.0826.net-开足彩店赚钱吗| www.64585.com-中国足彩中国足彩网| www.987230.com-天天中彩票关停| www.fl94.com-中国竞彩500| www.062349.com-官方快三分分彩下载| www.344972.com-预测彩票中奖| www.247769.com-湖北红快三-| www.337187.com-那种彩票可以玩单双| www.427208.com-福彩3dk开机号| www.523524.com-时时彩开奖结96果| www.597137.com-福彩图库总汇| www.672906.com-三地南方双彩开机号| www.751851.com-1号计划彩票| www.822669.com-打开彩-| www.895140.com-乐彩网三地走势图| www.963391.com-海南体彩七星彩论坛| www.cai9677.com安徽快三奖金对照表| www.13838.com-新浪爱彩足彩资料库| www.081087.com-彩票尾数的规律| www.175565.com-快三算号神器手机版| www.78006.com-六爻测彩票心得| www.753461.com-金彩虹-| www.878165.com-福彩3d先锋快报| www.956889.com-金利彩票网站| 乐博彩票www.67258b.com| www.45xn.com-刮刮乐彩票兑奖期限| www.696867.com-体彩周六开什么彩票| www.806081.com-风云彩报-| www.891205.com-彩票梦想站合法吗| www.962414.com-福利彩票怎样选号| 500彩票www.50080x.com| www.905966.com-福彩3d官网下载| www.979418.com-铁盒好彩烟-| www.bt96.com-彩票助手手-| www.135335.com-河南福彩手机版| www.2151.win-中国有哪些彩票| www.4385.xyz-彩票对打套利违法吗| www.31923.com-彩票名家双色球推荐| www.349934.com-合肥最大的彩票店| www.bc33.com-多乐彩票网站| www.14pf.com-7星彩18143-| www.530.gg-5分钟高频彩| www.090089.com-彩票兼职的联系方式| www.8659.xyz-七星彩摇奖机| www.281890.com-彩票中心主任| www.796491.com-江苏快三加盟| www.885280.com-白菜网免费送彩金| www.956806.com-下载567彩票网| 购彩在线www.66332z.com| www.497626.com-南昌市体彩管理中心| www.fu79.com-快三连号最大遗漏| www.a01.net-东方集团彩票官网| www.44nz.com-彩掌柜苹果版| www.338027.com-天天中彩票双色球| www.555253.com-上海快三奖金查询| www.670922.com-国彩app叫什么| www.04ox.com-彩神幸运飞艇下载| www.052025.com-租用彩票平台app| www.090728.com-在彩票店打工怎么样| www.223950.com-中国体彩网官方| www.8655.date-民政局福彩贪污| www.1tg.com-双色球杀号双彩网| www.673878.com-古建彩绘图案丶| www.796042.com-尊彩是什么-| www.73895.cc-山西体彩11选5图| www.475313.com-彩客网足彩开奖| www.580954.com-手机版彩票开奖| www.666108.cc-航天彩虹即时股价| www.744109.com-快3彩乐乐推荐| www.807941.com-七个数字的彩票预测| www.276832.com-时时彩二星看号经验| www.65lo.com-亿客隆彩票-| www.6665.loan-来彩网下载-| www.422826.com-吋时彩今天开奖结果| www.568509.com-体彩排列三断组码| www.672378.com-一分快彩技巧| www.751084.com-玩彩票赚钱心态| www.827308.com-足彩双选技巧| www.907124.com-福彩快三可信吗| www.337558.com-够力七星彩官网| www.441922.com-七星彩遗漏查询| www.470000.com-境外足彩推荐网站| www.877105.com-百胜彩票-| www.970484.com-福彩幸运农场| www.811110.com-下载福彩选号技巧| www.901960.com-聚诚是黑彩吗| www.987332.com-本网赚是福彩快三| www.7918.cc-香港行政快三app| www.664566.com-油性彩铅画-| www.63141.com-彩宝大乐透预测推荐| www.625944.com-福彩跨度图-| www.772831.com-4scc彩票-| www.874077.com-众彩网能赚钱吗| www.978415.com-22彩票最新app| www.cp5768.com-买快三输的最惨的人| www.ud08.com-凤凰私彩平台手机版| www.123419.cc-最新彩票信息网| www.46wg.com-678彩票网投| www.046650.com-福利彩票店装修图片| www.528.in-新浪爱彩必发指数| www.8277.com-久久彩票苹果版| www.ul3.cc-中国体彩开奖结果| www.wi74.com-凤凰彩票输掉了几万| www.226052.com-ag彩-| www.320939.com-彩经网预测杀号| www.2117.wang-江苏体彩在线app| www.8357.in-体育5分钟彩票足球| www.46gs.com-周末彩票兑奖时间| www.6009.pw-福彩消消乐中25万| www.0228.com-时时彩中央新闻| www.ll61.com-中彩网会员登录网址| www.606605.com-买足彩的app澳客| www.692810.com-鸿博彩票登录网址| www.780633.com-彩客网首页网址| www.862915.com-肥城彩票-| www.912386.com-竞彩附近体彩店| www.963972.com-彩乐乐3d杀号| 天朝彩票www.98599.cc| www.3043.xyz-朱雀彩票-| www.8207.top-玖亿彩票可信吗| www.1061.vip-跟彩名堂一样的软件| www.69412.com-福乐彩网-| www.051030.com-盈众彩票幸福常伴| www.800317.com-必中彩票正规吗| www.870758.com-cp彩票官网登录| www.932903.com-下载118彩软件| www.hw8.com-一分快三如何屠龙| www.761293.com-宝马彩票集团网址| www.913574.com-网上玩立彩是骗局吗| www.973213.com-女的唱的歌词里彩虹| www.cai96.com-今天广西快三开奖| www.cai8300.com六开彩开奖结果r| www.ld80.com-彩中彩平台可靠吗| www.3da.com-仲博是黑彩吗可靠吗| www.54mf.com-南昌中一等奖彩票站| www.015894.com-彩票账号被冻结| www.246676.com-重庆快三-| www.254342.com-彩票代理加盟| www.236888.com-众彩网排3专家预测| www.365917.cc-吉林快三遗-| www.79mt.com-迪士尼彩乐园168| www.3555.tv-存5元送彩金| www.133787.com-六开彩开奖2019| www.g69.com-彩独1下载-| www.341733.com-湖北福彩论坛| www.36161.cc-快乐十分彩票官方| www.965407.com-97彩票app-| www.262508.com-彩票网址-| www.302301.com-3d走势图彩经网| www.395583.com-福利彩票出什么| www.798696.com-精彩视频-| www.888841.cc-第1彩-| www.952771.com-七乐彩中奖奖金| www.93656.cc-微彩娱乐下载|