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.767185.com-双色球彩界精英| www.025418.com-人人彩票公司在哪里| www.hw96.com-体彩5d开奖公告| www.0166.biz-福彩诈骗-| www.554573.com-彩票中奖上亿| www.115300.com-159彩票网网页版| www.019086.com-利彩彩票-| 大赢家彩票平台www.908673.com| www.114554.com-买彩票哪个app好| www.347743.cc-彩虹屁文案-| www.69288.com-彩票追号万能计算器| www.31512.cc-网上玩彩票心得| www.464699.com-查福彩试机号码| www.537718.com-深国彩-| www.777069.com-锋彩直播apk| www.886391.com-好运来彩票是骗局吗| 瑞彩网www.809572.com| www.e29.top-旺彩双色球社区| www.987188.com-彩迷是什么化妆品| www.204297.com-中彩票两亿的小说| www.536606.com-买彩票有几种方式| www.653761.com-中国彩是不是正规的| www.004715.com-快三高手软件| www.sq52.com-六给彩票玩法| www.994453.com-好彩客下载14m| www.905.cc-彩票33在线登录| www.026723.com-交友博彩-| www.48488.cc-87彩下载地址| www.035228.com-青岛西宁快三查询| www.219249.com-一分彩-| www.347228.com-彩票大奖中奖故事| www.235150.com-长沙体彩网网| www.wc98.com-更多精彩视频| www.240.cn-福彩3d断组方法| www.9573.com-福彩东方6加1| www.347642.com-大发彩票黑平台| www.011813.com-周六晚上开什么彩票| www.217632.com-快三能赚钱不| www.173388.com-秒速快三开奖走势图| www.352205.com-178彩票计划| www.ea34.com-分分快三下载链接| www.wp13.com-马采西亚乐和彩开奖| www.315410.com-网上时时彩合法吗| www.450312.com-北京七星彩信息来| www.581986.com-时事彩怎么买不会输| www.670046.com-台湾四星彩開獎记录| www.777154.com-澳客彩票售后电话| www.923579.com-秒速时时彩财神| www.cp373.com-快三平台靠什么赚钱| 中国福利彩票www.08588d.com| www.038066.com-体彩竞彩打票教程| www.026842.com-彩票网投哪个网站好| www.388444.cc-猎人迷彩图片| www.0974.date-粤彩网诈骗| www.57sb.com-注册账号玩彩票| www.020846.com-乐和彩开奖时间表| www.121271.com-彩尊app下载| www.jx15.com-17年七星彩-| www.6644.top-彩票中奖500万| 易彩堂www.55885i.com| www.338132.com-牛彩网彩摘网字谜| www.9296.biz-分分彩后二玩法技巧| www.46697.com-久久彩票ios| www.76811.cc-玩彩票被骗6000| www.084541.com-福彩天齐网站| www.322250.com-手机彩票网网站大全| www.698441.com-嘉兴福利彩票官网| www.803812.com-海南彩票app| www.882383.com-中国体育彩票售卖点| www.949048.com-玛雅吧玩彩票是骗局| 888彩票www.26001.com| www.mv04.com-多中彩彩票-| www.43za.com-人生精彩是什么意思| www.0548.xyz-福彩牛彩3d字迷| www.062234.com-正规福彩快三平台| www.233840.com-福彩排列三-| www.316600.com-福彩标志图-| www.409228.com-vr3分彩计划| www.819328.com-买哪个彩票容易中奖| www.909908.com-贵州彩票快3查询| www.968425.com-举报时时彩电话| www.hh73.cc-七乐彩基本走势图| www.ri53.com-福彩下注-| www.179687.com-苹果手机买彩票| www.505284.com-易赢彩票咋样| www.668668.cc-彩经网走势图大全搜| www.739075.com-彩神通破解| www.807018.com-7号彩票怎么样| www.885650.com-内蒙快三奖金规则| www.962010.com-彩涂板-| www.hl06.cc-一分快三彩票官网| www.a81.cc-信彩彩票官网| www.5259.cc-类似派彩网-| www.2523.win-天下彩彩图诗句玄机| www.cx60.com-十大黑彩排行| www.8395.xyz-海南七星彩买奖软件| www.65377.com-双色球彩票分析数据| www.838481.com-海南七星彩今日开奖| www.447551.com-足彩吧豪哥公众号| www.555800.com-北京快三有几站| www.609126.com-几点对彩票大乐透| www.677357.com-分分彩算号器| www.750172.com-豪彩投是什么| www.809498.com-手机玩彩票违法吗| www.879341.com-481彩票-| www.951620.com-好乐多彩票app| 亚洲彩www.68568f.com| 彩多多www.78949t.com| www.566531.com-和彩放题买一赠一| www.680210.com-玩彩票软件下载| www.761647.com-甘肃快三中奖秘诀| www.589524.com-广州体彩中心网| www.22835.com-王者彩票违法吗| www.zi38.com-多盈彩票网站| www.7oa.com-彩票中奖秘密领奖| www.83fh.com-好彩台-| www.525708.com-福彩3d双胆-| www.939394.com-重庆市彩55期| www.997772.com-爱心彩官网-| www.fx96.com-福彩3d连线图| www.390070.com-买彩票买了几十万| www.635663.com-河南福彩网七乐彩| www.696980.com-今日竞彩足球比赛| www.778151.com-迪士尼彩乐园ii| 火星彩票www.hx6686.com| www.128004.com-123彩票开奖公告| www.393551.com-湖南福彩中心官网| www.464671.com-六开彩开什么| www.581004.com-彩牛网49467| www.667876.com-福彩中心窝案14人| www.743624.com-快三购彩平台是骗局| www.824628.com-万博博彩app地址| www.952454.com-k彩富民福地测登录| www.682958.com-广州好彩酒家电话| www.418525.com-中博国际是正规彩票| www.573985.com-中国电信爱音乐彩铃| www.682398.com-中国体育彩票购买| www.749249.com-汇彩国际时时彩| www.823827.com-和彩彩票app下载| www.891027.com-彩票网试玩-| www.961863.com-四川福彩官网首页| 万达彩票www.627212.com| www.lw78.com-时时彩8码滚雪球| www.w08.top-青岛福彩电话投注| www.46kb.com-中国体彩刮刮乐| www.137431.com-彩票自身返点啥意思| www.241133.com-彩铅入门与技巧| www.326188.com-彩宝网3d近30集| www.6326.vip-杭州三彩折扣店| www.410080.com-足彩竞猜投注258| www.64lx.com-众购彩票下载安装| www.7180.org-职业博彩的最高境界| www.075488.com-体育彩票下载并安装| www.15327.cc-彩票倍投不可取| www.331471.com-天天爱彩票安全吗| www.3hs.com-网警怎么查网上彩票| www.572682.com-怎么买竞彩-| www.782991.com-甘肃省福利彩票用途| www.599033.com-福利彩票34期结果| www.fi94.com-安徽快三人工计划| www.082224.com-查上海快三开奖公告| www.5033.biz-快三兑奖期限多久| www.55892.com-幸福快3彩票| www.009986.com-澳客足彩网-|