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.079216.com-江苏彩票手机投注| www.004160.com-足彩大赢家过| www.133102.com-新型彩钢围挡设备| www.571668.com-易彩快三是什么| www.620523.com-福利彩票双色球买法| www.uv1.cc-足彩8串1中一亿| www.02644.com-江苏快三首页| www.052605.com-彩神合法吗-| www.79tv.com-福彩任选3中奖规则| www.hw47.com-百度彩票走势图3d| www.205.cm-彩铅画图片人物明星| www.br16.com-至尊彩app-| www.ld7.cc-e球彩走势图| www.ja56.com-足彩胜负彩-| www.92mn.cc-网赌刷彩金-| www.7172.in-怎么打水博彩| www.092234.com-分分时时彩破解| www.2003.org-远途国际彩票靠谱吗| www.9987.pw-中国最大的彩票| www.472449.com-彩票情缘全文阅读| www.666607.com-合乐彩票网正规吗| www.851433.com-去店里咋买彩票| www.sc17.com-丹麦快乐彩官方| www.683.live-福彩3d很假骗人| www.301824.com-海南七星彩现场直播| www.402338.com-dd彩靠谱不-| www.8232.cn-彩票平台刷流水佣金| www.748.net-时时彩和值尾数规律| www.33uq.com-今晚七星彩票七星彩| www.1485.com-快三豹子号中多少钱| www.8210.cn-北京彩票中心| www.93546.com-快乐三分彩走势图| www.071071.com-全国各地彩礼价格表| www.148234.com-234彩票打不开| www.223129.com-贵州省福彩官网| www.306407.com-app刷彩兼职| www.420297.com-体育彩票装修| www.137777.com-快三有多少组号码| www.386105.com-竞彩足球强胆推存强| www.84.cn-福利彩票双色球开癸| www.80pz.cc-天干地支与彩票| www.367362.com-彩铅樱花枝教程| www.351104.com-彩票店兼职卖点什么| www.219977.com-百度乐彩-| www.184755.com-湖北今天快三推荐| www.297935.com-快三合值表-| www.396321.com-博友彩网站-| www.552252.com-壹玖玖彩票-| www.677508.com-彩钢板临时围挡| www.777480.cc-青海省快三开奖果| www.902275.com-彩巴图-| www.973034.com-湖北福彩走势图| www.cp5152.com-上海快三技巧| www.582989.com-棋牌游戏彩票导航| www.671608.com-i彩-| www.770053.com-恒大国际福彩| www.864752.com-147彩票平台| www.964202.com-彩票翻倍公式| 彩678www.c67801.com| www.ni11.com-足彩竞猜实时比分| 七星乐www.535666e.com| www.801886.com-翼彩宝投注大厅| www.895848.com-快三是福利彩票的吗| www.965324.com-众彩之家下载安装| 大赢家彩票网www.178211.com| www.067398.com-天乐乐彩票-| 500彩票www.50052j.com| www.pa96.com-安微快三万能走势| www.17az.com-代买彩票诈骗| www.590.org-重庆桥下彩票研究| www.06052.com-福利彩票3d论坛| www.828658.com-578彩票官网| www.910759.com-nba竞猜篮球彩票| 彩之家www.19czj.com| www.13yl.com-安徽体彩中心在几楼| www.447005.com-众彩网是什么| www.850265.com-比特币分分彩真假| www.131858.com-濮阳彩礼-| www.270508.com-577彩票网下载| www.517828.com-福利彩票怎么抓| www.sj74.com-北京时时彩投注软件| www.907.tv-彩票速赚攻-| www.878626.cc-上饶市体彩中心| www.447415.com-体彩大吉大利代码| www.263136.com-体彩排列三两元网| www.15vh.com-彩票77网页-| www.44mi.com-富利彩票官网下载| www.883588.com-彩票上家是什么意思| www.32re.com-v3彩票app-| 500彩票www.904862.com| www.8541.biz-安徽体彩中心| www.45522.cc-微彩网是什么| www.699130.com-竞彩中奖计算器| www.521114.com-秒速赛车彩票| www.911607.com-快三大小单双走势| www.250125.com-505彩票真的假的| www.169683.com-安徽快三开奖| www.019220.com-买彩票多少钱| www.346971.com-大乐彩票福-| www.sk19.com-私彩代理-| www.7690.org-美宝莲彩妆加盟价格| www.430300.com-二鱼玩彩-| www.580583.com-体彩中心举报电话| www.1463.cm-彩铅鹿星空图| www.544900.com-三国梦想星彩无惨图| www.206530.com-大乐透购彩大厅| www.190581.com-广西福彩走势图| www.98223.cc-香港利民彩计划| www.974200.com-福彩快三有几种玩法| www.376576.com-97彩票登录-| www.516342.com-幸运彩票网安全吗| www.596931.com-河北福彩排列走势图| www.670502.com-彩经网新版排三| www.754218.com-必发彩票信誉网推荐| www.821397.com-孤不归福彩专栏| www.912888.com-微信时时彩骗局| www.981664.com-彩票驿站-| www.jb64.com-辽宁福彩-| www.th52.com-重庆时时彩胆拖玩法| www.63qe.com-h5彩票游戏开发| www.3143.cn-成都体彩店-| www.06804.com-吉林快三网站| www.63361.com-足彩推荐310| www.392229.com-体育彩票排3预| www.538395.com-国彩合买骗局| www.30gi.com-福彩3d奖结果r祸| www.2692.org-官方福彩3d图表| www.40672.com-123+彩票网-| www.027646.com-黄山体彩外围| www.cp7769.com-苹果手机买彩票| www.5945.cc-彩票365手机网站| www.927636.com-江苏省体育彩中心| www.974247.com-体彩和福彩的区别| 500彩票网www.607992.com| www.55259.cc-彩票排列五开奖查询| www.197411.com-马来西亚博彩诈骗| www.304876.com-易彩网彩票下载| www.391456.com-艾彩原创海天足恋| www.582216.com-彩客彩票007| www.509393.com-排列五彩宝网首页| www.654250.com-卖假彩票怎么处罚| www.963282.com-线上彩票合法吗| www.br67.com-五分快三计划网址| www.z68.cn-腾讯世界杯竞猜彩票| www.85wj.com-竞彩专家单场推荐一| 众彩www.896950.com| www.967629.com-领军彩票导师微信| www.kp1.cc-快乐十分快三助手| www.129914.com-四川体育彩票金7乐| www.77657.cc-彩票走势图显示器| www.071925.com-河南彩色沥青油毡瓦| www.965945.com-新彩网app-| www.15an.com-澳彩登入网址| www.920733.com-佰萬彩票app| 彩69www.022173.com| www.185801.com-时时彩走势图| www.314661.com-七彩网上订花| www.377308.com-福彩店对联-| www.453618.com-华达竞彩现在能用吗| www.22715.com-够力七星彩安装80| www.022534.com-今日吉林快三开奖| www.165166.com-福利彩票交流| www.263391.com-七乐彩复式中奖| www.sh.com-皇都彩票app下载|