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.36ip.com-七星彩试机号查询| www.644009.com-彩票周末可以领奖吗| www.915400.com-彩民app-| www.989233.com-乐彩软件是不是真的| www.dh60.com-众赢彩票骗局| www.p39.net-网购彩票顺口溜| www.90232.com-7意彩下载-| www.63428.com-香港福利彩票官网| www.505792.com-玩黑彩犯法不| www.8020.cc-十字彩票怎么下载| www.501830.com-盛大娱乐投彩靠谱吗| www.270785.com-093彩票老版| www.237231.com-中彩网走势图表| www.797762.com-点滨和易彩哪个好| www.456166.com-福彩p62中奖方式| www.627093.com-乐都彩票登录| www.791422.com-排列三彩经网开机号| www.933868.com-25号彩票开奖| www.981776.com-星彩网走势图| www.mp72.com-彩票送彩金20| www.33457.com-福彩三d开机号码| www.46dc.com-体彩销售点查询| www.68758.cc-优盈彩票是骗人的吗| www.789807.com-竞彩独家-| www.48151.cc-彩票小鸡图迷| www.ku07.com-上海福彩集中账户| www.l73.cc-彩81彩票下载| www.fz04.com-12728巨人彩票| www.03xi.com-98时时彩平台登录| www.626171.com-金祥龙版彩票| www.519605.com-今晚体彩排列五预测| www.618125.com-所有彩票开奖号码| www.755011.com-1068彩票官网| www.862343.com-上期福利彩票中奖号| www.993506.com-体彩足球竞彩图| www.lr31.com-福彩3d今日字谜| www.7581.loan-大通彩票官网网站版| www.18735.com-彩票33交流-| www.498906.com-彩票怎么买扣税最少| www.486725.com-足彩胜平负十四场| www.8607.wang-足彩新浪彩票网首页| www.602097.com-中国福利彩票复式| www.5869.net-中奖的彩票照片| www.26uj.com-做福利彩票站赚钱吗| www.596046.com-福利彩票计算公式| www.668416.com-福彩图谜图库总汇| www.738852.com-福彩3d微信公众号| www.385658.com-体彩出什么号了今天| www.535337.com-七星彩中了5个数字| www.809728.com-好彩客官网充值| www.923283.com-竞彩亚盘技巧| www.kn10.com-重庆竞彩快3| www.252033.com-旺彩工具箱-| www.0472.pw-臻彩唇膏-| www.565206.com-万彩吧手机开奖| www.730033.com-周易预测大乐透彩票| www.536943.com-双色球彩票黑点分析| www.698013.com-大发时时彩开奖结果| www.854473.com-酷彩安卓版下载| www.949661.com-哪些快彩网是正规的| 13e彩票www.809381.com| www.jv03.com-17500彩票论坛| www.a95.top-福彩3d几点开奖| www.29qn.com-体彩中四个红球| www.916539.com-谁有私彩网站| www.23799.cc-彩票实体店代购系统| www.33fh.com-云南快三骗局| www.44ii.cc-彩96领导者-| 聚彩网www.683505.com| www.134850.com-江苏体彩大乐透结果| www.226108.com-彩票分析专家| www.954983.com-辽宁福彩3d字谜| www.049437.com-所有彩票教学视频| www.706893.com-手机制作彩票app| www.776302.com-时时彩后三刷大底| www.871384.com-彩票软件破解网站| www.937205.com-为内蒙古喝彩原版| www.983523.com-彩16安卓版-| www.bs33.com-上海快三下载| www.vv65.com-中信体彩-| www.947150.com-福彩开奖公告号码| www.993110.com-竞彩足球足彩分析网| www.we00.com-兰州体育彩票中心| www.369.xyz-七乐彩下期预测总汇| www.5948.org-乐彩走势图app| www.063223.com-必中彩票是不是骗局| www.61988.cc-七星彩今天开奖结果| www.678256.com-复兴彩票软件| www.776332.com-龙虎彩票app| www.071257.com-兼职足彩-| www.590196.com-彩票和制图-| www.739846.com-3d开机号家彩网| www.993709.com-竞彩今日单关| www.ly16.com-甘肃快三技巧有哪些| www.4649.link-竞彩胜平负开奖| www.49709.com-买足球竞彩绝招| www.88762.com-体彩排列三胆码分析| 快彩网www.378017.com| www.w19.bid-诺亚彩票手机版| www.cai3838.com安微福利快三| www.392708.com-雅彩彩票下载安装| www.793485.com-赚钱彩票软件下载| www.878162.com-500彩票网网页| www.961570.com-彩票五行属于什么| 500彩票www.359215.com| www.iq20.com-3d彩票吧-| www.125423.com-乐彩字谜图迷论坛| www.953.in-福彩三d胆码| www.994903.com-好彩网可信吗| www.bd20.com-快三二不同稳赚方法| www.rx82.com-手机版分分彩软件| www.t02.cc-福彩和值技巧大全| www.809869.com-中彩票官-| www.370518.com-中国七星彩直播现场| www.yb36.com-新彊福利彩票| www.024399.com-福少时时彩软件下载| www.104084.com-哪个彩票网正规| www.653427.com-玖亿彩票试玩金额| www.827794.com-网络彩票跟单员| www.943401.com-福彩任选五胆拖玩法| www.ag10.cc-手机福彩-| www.r34.win-香港快三下什么软件| www.ln42.com-旺旺彩票app| www.12xw.com-王者彩票网地址| www.793699.com-网上购彩算不算赌博| www.159139.com-中彩网富坛免费资料| www.906137.com-彩票购买平台靠谱吗| www.2927.in-手机看开彩现场直播| www.380424.com-什么的彩虹-| www.566470.com-彩虹6号全体说话| www.696708.com-彩世界论坛-| www.848817.com-皇家时时彩软件下载| www.2136.shop-66cp彩票-| www.108927.com-博友彩票手机软件| www.247661.com-幸福快三是犯法的吗| www.22lo.com-天津时时采彩人工| www.107202.com-排列三破解彩票漏洞| www.298305.com-冀彩宝站主平台| www.861356.com-福彩三d藏机图正版| www.2182.vip-体彩几个号码| www.26468.com-快三长春-| www.376795.com-万人彩票下载安装| www.795372.com-3d彩票兑奖有效期| 500彩票www.66653f.com| www.885478.com-新利彩票登-| www.ba58.com-安徽快三跨度一定牛| www.45842.com-百盈彩票正规吗| www.925770.com-香港资料大彩富网| www.0gl.com-彩是几画-| www.725.red-分分彩后2公式| www.311015.com-釉中彩餐具的危害| www.352256.com-知名的高频彩平台| www.tk83.cc-公益福彩官网app| www.2096.com-江苏福彩主页| www.355873.com-足彩中多少起交税| www.748177.com-大富豪彩票官方| www.830738.com-东升彩票app下载| www.900859.com-福彩3d专家杀号| www.959537.com-幸运分分彩是哪里的| 500彩票www.330175.com| www.406464.com-巨丰彩票官网| www.28992.com-喵喵机打印机彩色| www.438354.com-体育彩票店在哪里好| www.m98.com-举报彩票网站|