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天

知道了
彩01彩票 www.946636.com-福彩6十i开奖结果| www.sa22.com-吉首快三秒电话| www.42ww.com-七彩网络在线登录| 818合彩www.www.5666hc.com| www.929204.com-玩彩下载-| www.633046.com-竞彩篮球胜分差玩法| www.8107.loan-吉林快三作弊软件| www.99151.cc-时时彩怎样玩不会输| www.022741.com-约彩365靠不靠谱| www.109754.com-福彩3d预算-| www.210415.com-江西快三开奖结果| www.3837.biz-2019福彩政策| www.76650.com-各种彩票获奖介绍| www.178388.com-国家推荐彩票软件| www.326808.com-中了七星彩怎么领奖| www.66089.cc-福彩2018151| www.963747.com-福利彩票好处| www.894532.com-内蒙快三每天多少期| www.014508.com-七星彩最好的软件| www.090953.com-众彩软件-| www.35km.com-星期日彩票-| www.0936.tv-跟单体彩-| www.04309.com-彩票软件会中大奖吗| www.89111.com-c8com万彩-| www.56.org-彩团网1242cc| www.1001.top-218王者彩票sc| www.227714.com-彩票中奖概率| www.32ip.com-长沙福彩中心电话| www.869722.com-浙江福彩3d开机号| www.285964.com-亚洲彩票是干嘛的| www.390482.com-网络时时彩怎么报警| www.510808.com-彩玉原石图片| www.593878.com-七彩格子投资赚钱| www.484804.cc-福彩3d杂六-| www.451561.com-风中彩莲爱你无悔| www.554751.com-彩票分析预测表| www.637228.com-双色球中彩网走势| www.714571.com-彩神1怎么玩| www.039229.com-七星彩网开奖视频| www.994077.com-康彩娱乐体彩乐吧| www.gb28.com-福建厦门福彩快3| www.we33.com-兰州市体彩中心电话| www.pe72.com-福彩一分钟-| www.666299.com-航天彩虹是做什么的| www.806349.com-竞彩之家是合法的吗| www.893477.com-千亿彩票-| www.3cz.cc-好的黑彩哪些| www.547.date-500亿彩票-| www.ia68.com-一分快三彩票工具| www.076923.com-快三中奖多少钱| www.365378.com-彩库宝典四不相图| www.513889.com-体彩排列三藏机图| www.580264.com-彩票排列五中奖| www.541628.com-体彩手机可以投注吗| www.914098.com-广覀福利彩票网站| www.gw4.cc-淘彩票大发快3开挂| www.i18.org-今日体彩票开奖结果| www.460.in-财神彩票网址是多少| www.1630.cc-kk彩票网骗局| www.968734.com-时时彩高手贴吧| www.oe56.com-彩票送18元彩金| www.9367.biz-双色球彩票如何防伪| www.062479.com-淘宝体育彩票| www.920053.com-福建快三玩法介绍| www.cr44.com-快三提现是真的吗| www.72590.com-省福彩中心电话号码| www.614200.com-明三彩特点-| www.26312.cc-彩吧是什么意思| www.238229.com-发彩app-| www.601940.com-80彩票几年了| www.243600.com-福利彩票怎么选号| www.367585.com-上上期彩票中奖号码| www.633637.com-94彩票软件-| www.796043.com-尊彩网官网-| www.952345.com-6678彩票登录| www.jg98.com-内蒙快三跨度和值图| www.16mv.com-福彩双色球几开奖| www.5754.org-快三软件开发| www.84683.com-彩圣字谜3d汇总| www.085515.com-时时彩跨度怎么算| www.966820.com-体彩顺口溜-| 大赢家彩票平台www.109075.com| www.6646.top-足彩四场进球彩玩法| www.000443.com-加拿大时时彩骗局| www.2748.org-足球彩票app排名| www.21382.cc-网上叫你买彩票的人| www.92856.com-正版家家好彩| www.095905.com-免费彩票预测软件| www.380611.com-福彩3口走势图| www.538496.com-中国福利彩票案| www.697753.com-518彩网注册| www.793586.com-快三贵州预测号| www.877191.com-今晚七乐彩开奖| www.948768.com-玩分分快三的技巧| www.989317.com-有什么软件能买彩票| www.xy9.com-彩神网网址-| www.pz37.cc-彩1官网-| www.ue62.com-九度彩票是真的| www.30hd.com-今天彩票号码是多少| www.551123.com-苏州竞彩快3| www.699718.com-彩票5网站-| www.787999.com-七情上面的足彩博客| www.862311.com-彩客彩票app| www.922631.com-人人竞彩官网首页| www.975687.com-因为彩礼放弃你男人| www.ob5.com-甘肃快三今日走势图| www.80108.com-三部门叫停快彩| www.119857.com-数字型彩票代购网站| www.509533.com-淘金彩票安全吗| www.601646.com-福彩双色球奇葩号码| www.679608.com-怎么制止老公买彩票| www.760339.com-时时彩分析软件排名| www.826656.com-网上售彩票恢复了吗| www.888152.com-香港赛马派彩| www.rg98.cc-8亿彩网骗局揭秘| www.yu75.com-酷彩网app下载| www.93uj.com-彩色1寸照片| www.504665.com-玩网易红彩怎么提现| www.671155.com-彩独2-| www.51xh.com-广州彩鹰喷绘| www.241911.com-七星彩开奖玩法说明| www.373653.com-足球竞彩赛果开奖| www.049264.com-福彩排列5开奖号| www.163429.com-靠彩票-| www.809049.com-排列三开机号彩吧| www.9012.cn-下载上海体彩网| www.115456.com-体彩官网电脑版| www.118885.com-快三诈骗-| www.091568.com-手游彩怎么没了| www.202264.com-贵州省体彩中心| www.14ml.com-杞县结婚彩礼钱多少| www.059.biz-利彩机械-| www.6099.vip-釉中彩骨质瓷5a| www.80oz.com-彩客竞猜彩票手机版| www.857951.com-福彩快乐十分手机版| www.960729.com-邀请码送彩金| 爱彩乐www.372918.com| www.kl46.com-王牌彩票是违法的吗| www.m85.com-海口彩票网图版下载| www.975387.com-福彩3d怎么手机买| www.gt20.com-快三助手ios| www.i51.cc-360福彩3d之家| www.9817.biz-古建彩绘流程| www.94136.com-彩票数字顺口溜大全| www.910206.com-彩神彩专家专栏| 500万彩票www.39500g.com| www.809170.com-f彩网犯法吗| www.x12.shop-随时赚彩票-| www.52876.cc-77彩票网可靠吗| www.123089.com-酷彩吧是什么平台| www.8157.top-今天可以买彩票吗| www.029817.com-2118彩票软件| www.122197.com-彩票主任27亿| www.5133.tv-北京彩票截止到几点| www.08644.com-福彩扫一扫app| www.071715.com-彩色压印地坪施工| www.64dk.com-有没有足彩微信群| www.257215.com-分分中彩-| www.295432.com-3d彩吧迷图-| www.373563.com-好彩双爆真假| www.254693.com-好彩下载-| www.89457.com-新彩彩票是什么| www.jr89.com-王者彩票提不出现| www.40zl.com-七星彩牛爹资料大全|