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.616743.com-福彩直选3开奖结果| www.555506.cc-神彩争霸注册邀请码| www.28sj.com-美狮彩票官网| www.061.date-乾隆粉彩九桃天球瓶| www.3618.vip-87彩店最新版下载| www.03239.com-巴巴彩票网站| 中彩网www.81233j.com| www.3794.cm-七星彩高手专区| www.514514.com-3d天天彩报纸今天| www.681736.com-豪彩平台-| www.822121.com-500万购彩网| www.953451.com-昨天彩票开奖| www.hj90.cc-谁在uu快三输了钱| www.13sd.com-彩票开奖排三| www.320488.com-江苏快三骗人吗| www.700659.com-佬牛足彩分析| www.cp5200.com-今日贵州快三开奖号| www.787126.com-彩先知开奖-| www.639876.com-东方亮彩哪个部门好| www.824440.com-福彩中心周末上班吗| www.988222.com-保定体彩电话| www.uo28.com-内蒙古快三转家预测| www.523.me-时时彩停开怎么回事| www.411266.com-海南七星彩梦见死人| www.78245.com-排列三论坛家彩网| www.320639.com-快三线上是真的吗| www.651680.com-荣兴彩票开奖网| www.821926.com-七星彩前四位和值| www.632666.cc-七彩捞腌菜微信群| www.876483.com-领航彩票源码| 福彩网www.60007t.com| www.25bb.com-爱购彩官网下载安装| www.8270.org-彩票ps-| www.033615.com-彩票网站制作平台| www.205657.com-甘肃省福彩快3| www.350046.com-实时返佣的彩票| www.679448.com-兼职赚彩金-| www.900228.com-生日号码生成彩票| 500万彩票www.39500g.com| www.xr26.com-买彩票是怎么说| www.3445.vip-网易杀号专家时时彩| www.32734.com-快三可以网上购买吗| www.069018.com-彩神争8手机| www.193175.com-彩票高手计划下载| www.356203.com-彩票分析技巧| www.554032.com-晨兴彩票网址| www.731026.com-彩票业务员-| www.890069.com-nba体育彩票| www.qo1.cc-中奖彩票去哪里兑奖| www.13sy.com-七星彩头尾规律软件| www.2433.vip-时时彩绝密技巧| www.59961.cc-彩店宝彩票靠谱| www.158030.com-竞彩足球加奖| www.333023.com-体彩三d开奖结果| www.590681.com-77幸运彩-| www.507322.com-亿彩堂是怎么回事| www.34ta.com-七星彩开奖号码连号| www.975892.com-彩礼起源-| www.k60.in-购乐彩票app| www.4554.biz-易彩补漆笔官网| www.39236.cc-体彩排列3晚秋字谜| www.277314.com-奇门测彩密法| www.221908.com-乐点平台大发时时彩| www.gh12.com-篮球体彩网站| www.61la.com-心脏彩超sv正常值| www.32586.cc-彩礼退还比例| www.84808.com-福彩大兵全图| www.171630.com-彩票开奖查洵| www.874930.com-全民竞彩下载| www.pu14.com-933彩票娱乐| www.898294.com-海南梦兆查询七星彩| www.864555.com-手机彩膜可以用多久| www.970223.com-网络彩票老师带单| www.7467.com-七星彩今天开奖直播| www.129840.com-采44彩票-| www.027762.com-怎样看彩票走势讲解| www.879672.com-极速彩票骗局| www.981640.com-体育彩票世界杯奖金| www.zt16.com-竞彩网计算器胜负平| www.4041.cc-977彩票怎么样| www.948841.com-好运彩彩票幸运快三| www.bd47.com-内蒙快三和尾走势图| www.559227.com-大彩网下载地址| www.242200.cc-快三和值表奖金图片| www.024265.com-体彩p3中奖号码| www.767377.com-体彩排列三72期| www.881436.com-伟德体彩app| www.369465.com-福利彩票坏处英语| www.38866.com-中彩彩票亏了| www.058133.com-三分彩开奖从哪查询| www.288726.com-福彩3b字谜大全| www.562575.com-电子游戏送38彩金| www.w87.club-彩乃奈奈修女| www.286044.com-体彩试机号金码| www.577635.com-楚雄彩鄂公路| www.694563.com-足彩百度贴吧| www.150955.com-49c永利彩票网址| www.797586.com-彩票机选中奖的多吗| www.83461.com-买彩票中奖的电影| www.205633.com-生肖彩票开奖结果| www.362990.com-彩虹可以比喻成什么| www.578668.com-pk彩吧注册-| www.745368.com-福彩3d开奖结果日| www.829662.com-彩盈娱乐正规吗| www.949715.com-给账号代玩时时彩| www.589875.com-今日足彩推荐方案| www.971342.com-福彩中奖概率最高| www.ov74.com-福彩3d秘密-| www.80166.com-棋牌彩票满提现| www.162390.com-福彩九宝图-| www.368388.com-落日余晖彩铅画教程| www.520673.com-玩快三能赚到钱吗| www.707527.com-竞彩直播比分500| www.384893.com-澳发彩票公司| www.306362.com-335彩票是真的吗| www.165116.com-彩68彩票aqq| www.307781.com-派彩快三能玩不| www.501078.com-离婚律师彩票| www.777934.com-网络彩票怎么骗人| www.848062.com-福利彩票三d彩票图| www.911843.com-时时彩大神交流贴吧| www.969495.com-酷彩香港官网| 百姓彩票www.bxcp3.com| www.909272.com-怎样学打彩票| www.969682.com-乐彩3d交流-| www.il.cc-福彩快三开奖走势图| www.kg16.com-苹果版彩票软件| www.xr01.com-买彩票死守一个号| www.28yx.cc-天禧彩票app| www.89jf.com-竞彩14-| www.1237.bid-三分时彩走势图| www.8020.in-时时彩刷量技巧| www.303202.com-彩虹7无人机| www.406318.com-形容彩虹的美的诗句| www.590216.com-七星彩三四位差值| www.679935.com-彩票每日首存送| www.776816.com-猜球吧竞彩app| www.874659.com-福彩浙江快乐彩开奖| www.988397.com-福彩全国积分兑换| www.et00.com-旺彩彩票手机版下载| www.c03.com-江西快三购买| www.55hs.com-海南七星彩论| www.1701.cc-中彩彩票注册教程| www.09997.cc-彩票让彩民寒了心| www.158772.com-星耀团队买彩票| www.to25.com-7070彩票-| www.mc23.com-玩彩网下载app| www.cs30.com-瑞彩祥云幸运快3| www.5490.org-一道彩虹是什么歌| www.27283.cc-澳门快三是不是真的| www.266509.com-大发快三是不是赌博| www.543879.com-体彩19028期| www.723977.com-福彩在线下载安装| www.73gq.com-盛世彩票漏洞| www.1490.vip-七色彩虹寓意是什么| www.356850.com-彩票可以做广告吗| www.930806.com-体彩公式-| www.711009.com-足球竞彩比分直播网| www.699730.com-v98彩票官网| www.214331.com-有前景的体育彩票店| www.792608.com-福利彩票是谁开创的| www.025446.com-多乐彩结果查询江西| www.72202.com-福彩3d大花猫今天| www.963484.com-简单好看彩铅画星空|