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天

知道了
1分快三 www.960745.com-彩票送彩金58元| www.110571.com-518彩网登录地址| www.5xq.com-彩gg腾讯分分彩| www.702219.com-足彩胜平负比分| www.918716.com-博彩软件-| www.sm26.com-3d多彩网-| www.31891.cc-易彩快三手机计划| www.017139.com-广西十分彩-| www.95411.com-体彩公益宣传图片| www.119064.com-楚天福彩精彩十分| www.268067.com-彩票沙龙仙泥| www.331968.com-湖北省体彩兑奖办法| www.cai5678.com福彩快三平台| www.76xg.com-彩票有谜语吗| www.025426.com-福彩3d号码走势图| www.110191.com-皇帝彩票-| www.183228.com-手机购彩票-| www.824026.com-竞彩足球8串28| www.942691.cc-买彩票中5元| 68彩票www.68682q.com| www.jp96.com-qq快三群-| www.654918.com-时时彩复试怎么选号| www.962291.com-3d福彩马后炮| www.cb61.com-彩票51官方下载| www.89ze.com-彩漂能洗彩色衣服吗| www.6698.in-彩票开奖查询全部| www.985404.com-足彩返还率是多少| www.zz46.cc-商业区彩票店| www.45rd.com-盛大彩票是真的假的| www.78925.com-快三多少倍能封顶| www.947127.com-福彩开奖公告结果| www.cai9188.com河北快三二同号推荐| www.sa64.com-重庆时时彩官网暂停| www.16qa.com-好彩36选3推荐| www.565484.com-大地彩票骗局| www.682697.com-微信购彩票合法吗| www.iw32.com-凤凰vip彩票下载| www.00060.com-快递彩色包装袋| www.7366.xyz-竟彩是合法的吗| www.43705.com-江苏快三破解| www.200498.com-福利彩票啥时候开奖| www.9984.biz-快三倍投倾家荡产| www.947371.com-福彩计划聊天室视频| www.023895.com-如何买国外足彩| www.446331.com-重生之彩票大王| www.569312.com-福彩三d黑圣手字谜| www.139350.com-好彩堂玄机网马会| www.135958.com-网上买彩票500网| www.222354.com-团队彩票计划| www.356939.com-大庆福利彩票的玩法| www.487434.com-趋势王彩票推荐| www.988974.com-福彩黑彩网站| www.ns29.com-上海福彩4d官网| www.30hd.com-今天彩票号码是多少| www.2555.live-彩票预算下期| www.6840.vip-先锋快报-彩吧图库| www.493390.com-彩钢板围挡制作厂家| www.563849.com-今日福彩图谜总汇| www.637077.com-腾讯分分彩做号| www.787873.com-158彩票官方网站| www.855482.com-深圳福彩网官方首页| www.911611.com-七星彩计划软件| 818合彩www.www.8000hc.com| www.54363.com-怎么做彩票计划员| www.4202.cn-七彩汇娱乐手游下载| www.126770.com-红彩快3-| www.576410.com-彩霸王综合资料| www.587306.com-足彩滚球是什么意思| www.0881.net-博彩官方论坛| www.86or.com-九州福彩-| www.1996.live-彩虹6号围攻好玩吗| www.992221.com-时时彩组选包胆规则| www.40772.com-五号彩票app| www.005179.com-七星彩明月珰番外| www.088934.com-爱彩乐北京11选五| www.5828.bid-体育彩票串子输一半| www.33219.com-全民彩票最老版本| www.440122.com-4c彩票送-| www.585331.com-万发国际彩票游戏| 大赢家彩票www.5086c.com| www.398857.com-大成彩票是什么网站| www.0042.live-金冠彩票-| www.636334.com-彩虹娱乐棋牌| www.50022.cc-神彩非飞凡专家专栏| www.558866.cc-彩虹童谣-| www.178011.com-十分快三是国家的吗| www.344616.com-怎样查询体彩网点| www.453777.com-体育竞彩投注app| www.568073.com-买体彩输了十四万| www.646755.com-竞彩中奖组合| www.792352.com-小军彩吧第一版| www.859685.com-916彩票下载| www.98xw.com-彩8提现投注量| www.110271.com-七星彩三定位包码| www.208549.com-彩票挂机软件平台| www.34328.com-上海福利彩票app| www.905578.com-玩儿快三赔了四万多| www.523524.com-时时彩开奖结96果| www.604982.com-大乐彩24日开奖| www.528524.com-彩吧今天3d开机号| www.953373.com-马来西亚彩票管理| www.42967.com-中彩网三d开奖结果| www.130846.com-505彩票软件下载| www.67ed.com-足球人宝贝体彩绘图| www.28463.com-盐城彩民中一个亿| www.96715.cc-足彩大赢家即时比分| www.079496.com-福彩预测汇总| www.4338.vip-中国福彩和华夏鑫彩| www.94wq.com-手机投彩骗局| www.02918.com-福利彩票网站提现| www.711188.com-竞彩分析师-| www.874352.com-彩票三地-| www.998520.com-石家庄福彩有限公司| www.b23.club-澳门博彩手机app| www.312808.com-福利彩票好运三单式| www.2822.date-福彩三d速查表| www.318346.com-徐州大奖彩票图片| www.419899.com-彩票投资指南阅读| www.533469.com-彩票计划倍投方法| www.2557.xyz-世界研究彩票牛人| www.vx3.com-乐彩手机论坛| www.75ci.com-足彩总进球单双赔率| www.355841.com-买足彩看什么最准确| www.513591.com-双色球彩票多久一期| www.620712.com-天下彩齐中彩| www.760014.com-安徽福彩自助终端机| www.731409.com-258竞彩网-| www.26494.com-七星彩模拟机选五注| www.114930.com-四场进球彩开奖奖金| www.202100.com-体育彩票拖法| www.106073.com-博发彩票的网址| www.021480.com-k彩登录-| www.110838.com-98098彩票网| www.249411.com-109彩票-| www.324726.com-体彩排列三图库| www.390705.com-怎样注册彩票帐号| www.500993.com-一幅彩色画-| www.33987.com-天牛彩吧图库图| www.781724.com-彩票多少钱以上交税| www.279523.com-腾讯1分彩官网| www.194008.com-一分快三计划精准版| www.c2.me-9118彩票网-| www.887623.com-体育彩票网上投注站| www.sn35.com-在线下载幸运时时彩| www.3299.tv-万达彩票app| www.970400.com-天天乐彩输的荡产| www.299707.com-全球彩票输了几十万| www.789562.com-怎么看福利彩票号码| www.032600.com-香港彩宝典-| www.521441.com-鑫亿彩-| www.799479.com-幸运彩票提款提不了| www.980579.com-太子彩票网站| www.7166.loan-七彩假期画报| www.72gu.com-竞彩cba篮球| www.011910.com-星期五彩票开什么奖| www.132392.com-民政局规定彩礼| www.546899.com-网上七星购彩靠谱吗| www.449166.com-凤凰网彩票开奖公告| www.410226.com-丰大彩票官网注册| www.580264.com-彩票排列五中奖| www.681970.com-微信彩票下载| www.77ti.com-彩票网站怎么盈利| www.33861.com-7星彩概率-| www.504781.com-彩排的本意是|