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天

知道了
58福彩 www.402369.com-dd彩票真的么| 全民快乐8www.qmkl4.com| www.318982.com-快三和时时彩哪个好| www.449912.com-大同彩票站-| www.74yb.com-体彩在哪里看中奖| www.1899.bid-洪山彩票店生意转让| www.901906.com-公益彩票网官方端口| www.994690.com-彩票领奖安全吗| www.dd70.com-彩票店转让-| www.x36.cc-时时彩一条龙| www.62qp.cc-今天足彩专家推荐号| www.1668.pw-五行预测彩票3d| www.689121.com-齐鲁彩票开奖时间| www.914344.com-今日说法网络黑彩| www.xc0.cc-青海福彩快三预测| www.rr78.com-魔方彩票有没有假| www.434729.com-体彩店位置-| www.fw10.com-福彩真的在作弊吗| www.r85.com-湖南福彩兑奖地点| www.975876.com-驻马店正阳县彩礼| www.dg08.com-瑞彩祥云彩票网址| www.a66.net-北京彩票快三| www.013408.com-重庆时彩现在开奖| www.808176.com-谦喜彩票登陆| www.893318.com-彩票做号软件手机| www.965980.com-大发快三网投彩票| 500彩票www.641577.com| www.36690.cc-澳门有彩票吗| www.301123.com-微彩吧是什么| 818合彩www.www.9889hc.com| www.955707.com-神马彩票网站推荐| 天下彩www.394689.com| www.13770.com-新浪爱彩彩果| www.89852.com-c85彩票-| www.1855.org-可以查彩票的软件| www.17299.com-下载彩票开奖号码| www.388322.com-下载华彩app| www.4007.biz-澳客彩网比分直播| www.378369.com-山东体彩申请| www.7136.pw-建盏蓝麒麟七彩光| www.37891.cc-詹天佑福彩3d| www.007978.com-1分块3彩票-| www.nr66.com-京东彩票诈骗| www.51pf.com-博彩游戏网站| www.277577.com-福彩快3有假吗| www.876375.com-福彩3d奇奇断组| www.959168.com-御彩轩免费版| 大玩家彩票www.84499s.com| www.cp9687.com-福彩快3彩票真假| www.xp48.com-体彩快三35期| www.338651.com-武汉彩票事件| www.474749.com-500彩票网500| www.575883.com-6288彩票靠谱吗| www.080419.com-七星彩解梦大全| www.210587.com-体彩快乐十分走势图| www.6707.vip-网上买彩票能提现吗| www.992808.com-福利彩票快三色子| www.hp41.com-新浪足球彩票彩| www.179288.com-彩票网站诈骗套路| www.262011.com-福彩开奖结果公告| www.338983.com-快三甘肃快三走势图| 福利彩票www.99677t.com| www.949521.com-彩票盈app-| www.cp7272.com-福建福彩快3| www.on56.com-山东体彩网app| www.132490.com-18060期足彩| www.772825.com-时时彩赢钱的办法| www.872096.com-彩票达人软件下载| www.cp8268.com-上海福利彩票快3| www.474983.com-boss直彩彩票| www.576277.com-江苏快三跨度图表| www.195388.com-竞彩店申请条件| www.6780.cn-彩球官网-| www.484700.com-福州彩票中奖| www.564920.com-福彩3d组选统计表| www.183.me-500万彩票计算机| www.5294.vip-深圳体彩店转让信息| www.50pr.com-福彩三地所有开奖号| www.3979.bid-49彩票开奖结果| www.13833.com-香港时时彩开奖结果| www.63828.cc-足彩app有哪些| www.703566.com-779彩票官方| www.810213.com-彩尊国际是真的吗| www.982111.cc-577彩票计划| www.fe23.com-福彩游戏帮投兼职| www.a83.xyz-现在那个彩票可以玩| www.26si.com-万博竞彩软件安全吗| www.853.hk-海南七星彩铁公鸡| www.4530.biz-七乐彩35-| www.9541.cc-彩色通道-| www.co0.com-百盈快三下载| www.566703.com-青岛市体彩管理中心| www.666049.com-上海快三往期回顾| www.751402.com-777彩票网下载| www.855153.com-大彩票软件-| www.920952.com-亚上彩登陆-| www.980807.com-附近有福利彩票店吗| www.cc9.com-36先7好彩3结果| www.mh04.com-快彩王-| www.95rq.com-京彩注册邀请码| www.5069.vip-互联网停售彩票| www.912585.com-时时彩计划网站在线| www.977448.com-彩妆店连锁-| www.cp3399.com-河南彩礼价目表| www.yf79.com-2005年的七星彩| www.83xq.com-博盈彩票骗人| www.0711.net-75彩票苹果-| www.114277.com-福彩快乐彩12选5| www.220891.com-快三看号技巧| www.306711.com-吉祥彩票官方| www.9590.cm-体彩稿件-| www.286474.com-3d彩吧彩报第一版| www.504176.com-彩排和预演的区别| www.aq35.com-遵义市福彩管理中心| www.w69.net-掌上购彩注册邀请码| www.89lf.com-电竞博彩合法| www.876375.com-福彩3d奇奇断组| www.949983.com-大财门彩票app| 爱购彩票www.043552.com| www.42605.com-彩经网工具箱| www.661267.com-本科彩票专业| www.908257.com-我要机选3d福彩| www.984586.com-亚博科技彩票app| www.04ki.com-水溶彩铅教程| www.59058.com-福彩3d讲座视频| www.127670.com-彩虹主刷网搭建| www.48444.cc-竞彩足球竞彩版安卓| www.bm37.com-牛票票彩票-| www.10155.com-体育彩票七乐彩| www.73711.cc-牛彩三d图谜总汇九| www.277370.com-买2元彩票中多少钱| www.96ln.com-高频彩计算公式| www.4966.top-彩44彩票网址| www.15566.cc-噢客竞彩手机网| www.53758.cc-盛时时彩-| www.002324.com-新西兰快三-| www.7202.cm-a7彩票娱乐平台| www.772422.com-博彩技巧大全书籍| www.861947.com-最近彩票开奖结果| www.950226.com-国家禁止500彩票| 爱彩www.1555ac.com| www.175959.com-彩票修改器多少钱| www.278863.com-大发云彩票骗局| www.578829.com-特区七星彩彩票论坛| www.752713.com-彩票挂机赚钱软件| www.18232.cc-万家彩票手机登录| www.633524.com-213彩票网app| www.699066.com-华夏彩票分分快三| www.765475.com-今晚七星彩神算子| www.822001.com-彩票容错方法| www.889290.com-彩票屠龙七次必屠吗| www.951400.com-977彩票aqq-| www.991208.com-快三安徽走势图| www.md3.cc-内蒙快三二码推荐| www.mf29.com-好彩app是真的吗| www.a83.org-十字彩怎么玩法| www.551.in-pp彩票官网-| www.5933.bid-陕西省体彩-| www.046775.com-彩51彩票提不了款| www.177834.com-上海快三中奖规则| www.316397.com-大通彩票-| www.415952.com-趣彩彩票网址| www.3842.cc-大发移动彩票投注| www.00470.cc-3d乐彩字谜画谜|