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天

知道了
106官网彩票平台 www.637443.com-小米彩虹电池好吗| www.820200.com-定亲给彩礼吗| www.280378.com-彩票娱乐十大平台| www.457826.com-恒彩总代-| www.278125.com-乐彩网苹果app| www.2mm.cc-中国体彩怎么买| www.083805.com-福彩动物总动员诀窍| www.227754.com-众彩乐手机版下载| www.64168.com-收米竞彩下载| www.5908.cn-彩礼都给谁了| www.49401.cc-极速时时彩属于哪里| www.33492.com-凤彩网排三胆码| www.7670.biz-900彩票网-| www.8135.wang-福彩3d几点封盘| www.575837.com-彩票店系统几点停售| www.10513.com-7乐彩结果-| www.391696.com-易迅时时彩-| www.657009.com-时时彩是可以赚钱的| www.775330.com-19023体彩-| www.873424.com-四川体育彩票大乐透| 乐盈彩票www.gy11.com| www.926652.com-彩32-| www.916393.com-重庆实时彩历史开奖| www.mw39.com-官方彩下载-| www.27wa.com-下载星彩网-| www.727348.com-51彩票平台怎么样| www.826773.com-南方彩票是真的吗| www.912639.com-小六壬测彩票| www.979253.com-好彩蓝莓价格| www.ad28.com-体彩任选3-| www.672151.com-全民彩票投注技巧| www.767386.com-福彩三b开机号| www.866287.com-搜狐彩票网官网首页| www.941377.com-体彩销售话术| www.990012.com-彩吧福彩3d试机号| www.do49.com-快三赚钱技巧规律| www.949476.com-快乐彩害人不浅| 博亿彩票www.664by.com| www.662777.com-彩票开奖信息推送| www.755012.com-1068彩票套路| www.870685.com-刚力彩芽av-| www.85hk.com-老马研彩最新推荐| www.769021.com-亚博国际彩票官网| www.j88.top-一新彩吧-| www.135231.com-玩赚彩票软件可信吗| www.517284.com-今日福彩预测图| www.510824.com-彩玉值钱吗-| www.018906.com-福彩双色球投注软件| www.458505.com-竞彩串关计算方法表| www.238800.com-彩票网站诈骗手段| www.980025.com-中国体育彩票装修| www.ec75.com-返回百姓彩-| www.r23.net-黑河市福彩兑奖地点| www.4345.pw-鑫彩网588-| www.894306.com-cp彩票网收集| www.962331.com-91彩票全天计划| www.8680.in-家彩网排三试机号| www.308877.com-彩票排行榜-| www.4839.biz-900万彩票官网| www.115112.com-江苏福彩如何兑奖| www.089609.com-中国体彩票图标| www.kg50.com-手机版8号彩票| www.180806.com-购彩大厅app| www.0xa.cc-彩票34648-| www.274422.com-分分彩反倍投绝对赚| www.909655.com-3d彩票过客-| www.783175.com-保定市彩票站| www.080179.com-快三豹子常见口| www.529757.com-特区彩票论坛特| www.198582.com-体育彩票开奖| www.307877.com-解梦七星彩号码| www.137427.com-竞彩足球九场开奖| www.734702.com-我要下载新浪彩票| www.284677.com-江西省福利彩票| www.560261.com-天天爱彩票网址| www.670268.com-中彩票40万拿多少| www.826182.com-新浪乐彩下载| www.983706.com-快三到几点-| www.x67.me-彩票33可靠-| www.127294.com-荷花涂色水彩| www.631880.com-南粤风彩走势图| www.810249.com-k彩官网下载| www.953746.com-好彩蓝莓柠檬爆珠| www.211852.com-内蒙彩票十一选五| www.557565.com-快速登录神灯彩票| www.657904.com-福彩机子连接电视| www.838513.com-七星彩开奖最新结果| www.959632.com-顶尖彩票平台是正规| www.zx19.com-彩虹棋牌比机有挂吗| www.511096.com-贵州遵义体彩电话| www.8135.biz-福彩类型走势| www.89772.com-在日本买彩票| www.131252.com-彩礼的历史-| www.365352.com-大乐透杀号彩乐| www.540261.com-彩61官方网站| www.80do.com-百盛金服彩票| www.69785.com-易彩补漆笔好用不| www.188783.com-极速快3彩票下载| www.592270.com-大喜彩票-| www.232044.com-旺彩大乐透软件下载| www.485456.com-快乐分分彩在线计划| www.650329.com-彩虹伞游戏玩法| www.751384.com-今日彩票图纸| www.420605.com-陕西竞彩加盟| 大众彩票www.974688.com| www.qn55.com-什么是江苏快三| www.10up.com-彩钢瓦规格及价格表| www.860.org-时时彩四码二期计划| www.56858.com-时时彩五星一码公式| www.ko.cc-极速快三预测| www.4996.in-明星彩票邀请码| www.771142.com-丰和彩票-| www.569367.com-皇家科技彩库宝典| www.553621.com-竞彩能挣钱吗| www.637520.com-彩虹6号直播| www.059475.com-吉林快三一定牛全天| www.481006.com-移动彩印心情语| www.42659.com-113彩票开挂软件| www.085138.com-万彩彩票靠谱吗| www.376617.com-最快的彩票开奖平台| www.86193.cc-网络卖体彩合法吗| www.023745.com-福彩双色球开奖多少| www.211195.com-河北快三玩法投注表| www.42fj.com-ios唯彩会下载| 凤凰彩票www.77801x.com| www.5865.biz-齐鲁风采彩票| www.007979.com-仟喜彩票江西3块| www.299655.com-安徽快三怎么玩的| www.592269.com-彩虹无人机千亿市值| www.cai966.com-湖北福彩k3走势图| www.663782.com-中体彩大乐透| www.834511.com-炫彩背包解锁新颜色| www.981355.com-苹果7钢化膜彩膜| www.400363.com-五分彩是怎么玩的| www.241987.com-最新彩票app下载| www.641177.com-600彩票网登录| www.11un.com-500轻聊彩票| www.237329.com-嘉兴体育彩票| www.483799.com-好彩客最新下载| www.197455.com-发达娱乐彩票| www.ay67.com-六台彩迷宫6| www.868556.com-七星彩合值走势图| www.088464.com-华夏彩票―代理注册| www.849203.com-皇冠足彩官网| www.855265.com-有关买彩票的故事| www.xy04.com-01彩票-| www.9008.online卖彩票犯法吗| www.53342.com-安徽快三买彩计划| www.760130.com-山东好彩快三是哪的| www.2513.biz-什么叫打彩-| www.730773.com-彩票返点5啥意思| www.5555.me-福彩3d分解方法| www.33527.com-新浪爱彩能赚钱吗| www.078969.com-幸运时时彩开奖结果| www.021153.com-老谢的彩票专栏| www.755432.com-大中华彩票网| www.273635.com-黑时时彩-| www.569615.com-好彩娱乐时时彩| www.by22.com-内蒙古福彩开奖| www.336711.com-福彩快三如何看规律| www.853797.com-幸运彩票xy365| www.zw24.com-彩票之家网站合法吗| www.873274.com-红彩网-| www.213005.com-哪些彩票平台靠谱的|