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.523253.com-福彩毒胆专家预测| www.365546.cc-干家务的简笔画彩铅| www.766852.com-福彩4d选4玩法| www.48tw.com-双色彩开奖结果| www.1078.live-张家口沙城镇中彩票| www.2691.cc-彩票停售最新消息| www.17bc.cc-足彩预测专家老牛| www.242334.com-快三第一门户违法吗| www.50478.com-33彩票安卓版| www.cai350.com-快三破解器app| www.505403.com-快乐88彩票-| www.736543.com-6彩库宝典最新开奖| www.1114.cc-体彩模拟投注| www.0644.win-齐鲁福彩三十选七| www.29971.com-体彩小将去哪里兑奖| www.06153.com-潮款卖彩票500万| www.82405.com-竞彩中奖达人| www.341763.com-重庆时时彩五星在线| www.572725.com-天猫翻牌积分换彩票| www.78id.com-国外足彩平台| www.545502.com-足彩竞猜规则| www.95wt.com-福彩3d围数技术| www.981974.com-彩票平台网址大全| www.204163.com-彩迷app官方下载| www.854205.com-最新竞彩258下载| www.983122.com-玩时时彩死了多少人| www.578380.com-香港好彩堂论坛| www.lo72.com-哪些彩票是官方的| www.22495.com-美国人结婚要彩礼吗| www.382672.com-无锡彩旸香江商场| www.l96.com-彩票走势图软件下午| www.1062.com-七星彩现场摇奖直播| www.025442.com-481彩票-| www.597367.com-3d彩票猜谜-| www.01672.com-时时彩开奖结果| www.918500.com-鸿博彩票app| www.302518.com-众彩网上官燕七星彩| www.57926.com-汇彩网网站-| www.111827.com-牛彩摘彩收录机论坛| www.88576.com-彩票站打错号中奖| www.230981.com-湖北福彩快3预测| 500彩票网www.65707v.com| www.011490.com-每日首存彩票平台| www.ex5.cc-中国福彩玩法| www.130991.com-七星彩官方网站| www.365983.cc-最顶级的水彩颜料| www.659103.com-特区七星彩开奖结果| www.5714.cc-福彩3d胆码排顺| www.386538.com-双彩网排三排五论坛| www.0900.net-如何线上买福利彩票| www.262317.com-3d彩票天天开奖| www.518398.com-皇都彩票我的账户| www.wt75.com-下载快三走势图表| www.828925.com-做梦梦到自己中彩票| www.367900.com-刚力彩芽男-| www.306058.com-澳發彩票平台| www.40265.com-瑞彩祥云彩票微信群| www.120815.com-福彩双色球顺口溜| www.491567.com-希腊时时彩开奖| www.jk81.com-江苏快三如何赚钱| www.2539.pw-什么是打彩票| www.603582.com-山西福彩彩票中大奖| www.970333.com-体育彩票走势图下载| www.79ln.com-彩乐园2官方网站| www.340054.com-金彩是不是正规网| www.897698.com-多彩贵州网怎么样| www.536513.com-淘彩吧唐龙断组| www.812925.com-8g881彩票-| www.d09.top-五百彩票开奖| www.7011.biz-竞彩蓝球玩法| www.152615.com-怎么在网上买七星彩| www.501783.com-乐⑧彩票安卓下载| www.637496.com-60彩票靠谱吗| www.do48.com-大发快三稳定平台| www.83zf.com-河南福彩新快三| www.036151.com-彩票号码统计器| www.522084.com-怎么买彩票网上| www.931381.com-uu彩票倒闭了| www.277709.com-二分快三是国家的吗| www.572533.com-体彩一e球彩| www.707903.com-大发快三求带回血| www.689788.com-微彩彩票安卓| www.870150.com-时时彩8码在线计划| www.989281.com-手机51中彩彩票| www.pj50.com-竞彩比分值播| www.8666.top-首页网青蛙彩票| www.261960.com-福彩山东全图| www.845360.com-竞猜型体育彩票| www.975293.com-黑马彩票-| www.5738.cm-乐彩网胆码排序图| www.52893.cc-好彩四色爆-| www.531105.com-重庆时时彩止损技巧| www.874672.com-彩票网页在线计划| www.9727.biz-登录瑞彩祥云app| www.191696.com-一分快三官网app| www.636087.com-彩虹六号版本区别| www.g42.cn-体彩排列五现场直播| www.99cj.com-向洪甲五行绝算彩票| www.130740.com-758彩票下载安装| www.565546.com-福彩双胆必下好| www.hc38.cc-11选5购彩软件| www.7318.vip-彩虹像-| www.455885.com-乐彩彩票网登录| www.703067.com-足彩亚盘走势图| www.855038.com-澳门天麟国际购彩| www.509.hk-爱彩vip登录| www.22485.com-彩票店整体转让| www.224957.com-01彩票是骗局吗| www.359365.cc-中国体育彩票微博| www.481986.com-七星彩彩票兑换期限| www.763188.com-广西淘宝快三体彩| www.gg31.com-福彩三d一定牛| www.m45.com-卖体育彩票赚钱吗| www.82xy.com-北京彩民中5.7亿| www.35888.com-福彩3过综合走势图| www.009391.com-福彩3d新彩预测| www.125402.com-彩迷张专栏-| www.222029.com-时时彩挂机软件坑| www.316396.com-上海快三今日推荐| www.866476.com-体彩开奖结果昨天的| www.985.org-彩票平台哪个靠谱| www.91955.com-迪士尼彩票官方网站| www.335547.com-广西体彩在哪兑奖| www.497857.com-金利彩票手机版官网| www.862959.com-泰安体彩中奖新闻| www.961984.com-在网上买彩票靠谱吗| www.4602.vip-如何申办体彩点| www.18728.com-亚洲彩票是骗人的吗| www.267439.com-足球彩票最快开奖| www.470755.com-华彩赢家中奖率高吗| www.569213.com-腾讯分分彩开奖数据| www.829000.com-新乐彩登陆-| www.962643.com-银河彩-| www.21mq.com-d9彩票登入-| www.8082.pw-彩票最好的软件| www.024089.com-彩票2元网3d走势| www.343402.com-九万彩票平台怎么样| www.556282.com-三国最精彩的打斗| www.766311.com-时时彩网站注册| www.991367.com-海南私彩头尾规律| www.23ib.com-福利彩票网点利润| www.1577.org-冀彩宝客户端下载| www.27638.com-好彩平台是诈骗| www.012890.com-7星彩走势-| www.303134.com-苏州快三是什么| www.436095.com-投彩很赚钱吗| www.568921.com-彩票领导-| www.690173.com-福彩三d千禧试机号| www.807853.com-常州竞彩中心| www.921234.com-云来娱乐彩票| 凤凰彩票www.55228a.com| www.qd49.com-有哪些老彩票app| www.79vz.com-购买足彩的app| www.5675.pw-黑彩是什么-| www.51882.cc-时时彩杂六半顺规律| www.051841.cc-福彩金码试机号| www.306543.com-澳发彩票官网| www.425644.com-辽宁省彩票报纸大全| www.562172.com-即时开奖彩票| www.694396.com-排三众彩专家预测| www.933170.com-手机上玩快三犯法不| www.cp9677.com-快三形态走势图河北| www.u19.shop-c8.cn万彩吧| www.2458.cn-內蒙古快三開獎結果|