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.4346.xyz-福彩天地报下载| www.44198.com-3d开奖彩票图片| www.94111.cc-惠彩票-| www.073991.com-天空彩报码开奖| www.155875.com-201930期彩票| www.401336.com-uk彩官网-| www.522400.com-鸿运彩票账号安全吗| www.603801.com-足彩澳客网下载| www.684515.com-华彩网是不是骗人的| www.774216.com-七乐彩选号秘籍| www.901871.com-信誉可靠的足球彩票| www.968080.com-英国五分彩开奖视频| www.dy79.com-网上买的快三怎么查| www.yh84.com-福彩8app骗局| www.29rp.com-陕西体育彩票官网| www.0669.cm-竞猜足彩预测| www.7756.me-彩票送88彩金平台| www.30775.com-彩票计划助手| www.79733.com-天水市体彩中心在哪| www.038086.com-金牛彩票网-| www.165875.com-芜湖市体彩中心在哪| www.261946.com-刷彩金群-| www.358369.com-南京福彩3d中奖| www.456043.com-红菜苔彩票提不了现| www.590117.com-七星彩专家百位杀号| www.671004.com-彩票历史开奖走势图| www.755744.com-彩票开奖查询日期| www.892376.com-全民彩最新版| www.967196.com-即时开彩下载app| www.cai1950.com河南快三推荐号| www.mm42.com-51时时彩计划表| www.8am.cc-彩神通免费版下载| www.72ax.com-甘肃爱乐彩快3| www.1607.cm-天天爱彩票网页版| www.9998.cn-体彩好运十倍坑| www.58228.cc-海南七星彩规律| www.022273.com-恒彩88总代-| www.101979.com-彩天下骗局-| www.175759.com-彩神8网址版登录| www.290129.com-大发快三无法提现| www.460465.com-彩票3大推荐| www.555704.com-大华彩票网址| www.628844.com-广州好彩酒家宴会| www.703979.com-639彩票-| www.788265.com-14中国足彩网投注| www.868697.com-dd彩骗局-| www.999568.com-福彩走势两千期| www.bk28.cc-内蒙古快三中奖绝招| www.ut94.com-基诺彩票中奖规则| www.12qe.com-彩票心水大全| www.84vf.com-18世界杯有啥彩票| www.2410.shop-甘肃贵族快三| www.8236.biz-强胆推荐竞彩网| www.32293.com-8k彩票登录网址| www.77358.com-头彩网站是假的吗| www.030931.com-福彩三d字谜汇总| www.110182.com-七星彩20组头尾| www.181793.com-app快三-| www.256932.com-正规的彩票预测软件| www.332429.com-彩879平台下载| www.408822.com-今天3d彩报纸| www.518380.com-彩票新闻中奖生日| www.590390.com-3d彩票和值表图片| www.666666.com-乐彩网提现不了| www.745586.com-彩票计划导入潮信| www.821253.com-福彩双色球参考数据| www.896530.com-华夏彩票平台合法吗| www.958269.com-福彩快3查询| 大赢家彩票平台www.2394.com| www.dl54.com-中国快三网app| www.ta26.com-彩票都有几位数组成| www.30rw.com-彩虹六号干员介绍| www.1157.vip-山东福彩开奖查询| www.8698.bid-七乐彩票中奖| www.55197.com-快三庄家联系| www.99383.cc-福利彩票相关规定| www.063369.com-现在福彩生意好做吗| www.201198.com-彩票开奖公告立| www.264677.com-解读彩票新规| www.383926.com-中彩票标语-| www.515693.com-彩天堂黑钱了吗| www.576297.com-3d快三的跨度表| www.648417.com-佩戴彩宝的好处| www.778370.com-厦门福彩快三| www.908552.com-彩票零风险倍投方法| www.965634.com-快三猜一码是多少| 500彩票www.50788k.com| www.fp03.com-一分快三开奖| www.xc33.com-下载体彩福彩| www.14ya.com-天下彩票26gg| www.817.cn-儿童彩虹裙-| www.4741.vip-好想买彩票中大奖| www.9991.vip-福彩3d小鱼图字谜| www.67670.com-计算彩票-| www.028176.com-什么是快开彩票| www.101354.com-大通彩票导航| www.164820.com-彩票试机号3d| www.269788.com-87彩票官方网站| www.355373.com-怎么看五分彩趋势| www.435661.com-湖南福彩微信公众号| www.527460.com-078彩票一总经销| www.630992.com-体彩飞鱼有什么规律| www.700081.cc-3d福彩怎么看| www.772911.com-白菜网送彩金网站| www.870094.com-网易福彩网-| www.989276.com-福建体彩排列三| www.cp2201.com-福彩快3技巧口诀| www.ll50.com-彩票22app-| www.e00.cc-58彩票计划-| www.30yi.com-天马娱乐彩票全天彩| www.281086.com-买私彩怎么判刑| www.868987.com-七星彩怎么算的很准| www.937748.com-注册送28彩票平台| www.60456.com-10彩-| www.592883.com-彩虹的重力预告| www.662423.com-聚彩堂计划下载| www.730800.com-彩票平台返点设置| www.797158.com-多赢彩票-| www.866707.com-福彩昨天开奖的结果| www.926111.cc-梦想彩票手机版下载| www.972575.com-彩客网双色球推荐| www.qp36.cc-福利彩票有哪几种| www.y53.cc-试机号关注号彩神通| www.47gc.com-谁会玩新浪爱彩| www.478.mobi-体彩绝杀六码| www.3674.vip-万彩吧开奖历史| www.8612.com-87彩店官网网址| www.63161.cc-彩宝彩票提现被拒绝| www.008244.com-中国福利彩彩票开奖| www.068856.com-江苏快三定毒胆| www.129318.com-众彩彩票真假| www.196832.com-七乐彩中奖规则| www.260256.com-福利彩票如何兑奖| www.325435.com-新万彩吧资料| www.388752.com-福彩新浪走势图| www.566531.com-和彩放题买一赠一| www.629277.com-易网彩票幸运选号| www.690663.com-宝鸡体育彩票体彩管| www.761777.com-山东省彩票兑奖中心| www.871534.com-彩票用什么软件好| www.949156.com-和值15红号快三| www.994477.com-体育彩票飞鱼技巧| www.cp0337.com-吉林快三助手app| www.jq91.com-360购彩大厅首页| www.yp77.cc-时时彩开奖结果吉林| www.13ru.com-体彩票排五开奖查询| www.74tn.com-中福快三软件下载| www.0765.cc-福利彩票那几天开奖| www.9497.loan-彩钢琉璃瓦生产线| www.42650.com-彩经彩票首页图| www.82027.com-彩票中奖的前兆| www.025709.com-福彩3d杀码专家| www.090678.com-体彩6-| www.143440.com-黑彩代理犯法吗| www.209338.com-快三可以赚钱吗| www.270222.com-093彩票处理| www.406661.com-巨丰彩票网址是多少| www.503058.com-彩友多最新版| www.562669.com-淘彩吧3d两码差| www.623032.com-财神8彩票网正规吗| www.682231.com-足彩不能网上买了吗| www.750479.com-好彩属于正规的| www.807399.com-彩票代玩是不是骗局| www.873145.com-贵州省体彩助理|