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天

知道了
1分快三 www.95328.com-竞彩外围计算器| www.81709.com-吉林快三最近一百| www.410097.com-我去彩票站提款冻结| 幸运彩票www.983699.com| www.193601.com-中国体彩网吉林| www.439664.com-大发彩票网站是什么| www.695315.com-竞彩能不能赚钱| www.830311.com-567彩票会黑钱吗| PK彩票www.www.23040.com| www.997084.com-3d褔彩迷语-| www.45gd.com-竞彩多长时间开奖| www.062964.com-自己开提彩票| www.173710.com-兰州快三定一身| www.594459.com-19022体彩-| www.4699.cm-58彩票互动大厅| www.099262.com-五福彩票苹果下载| www.59738.com-彩虹官方网站| www.095086.com-好彩高好论坛| www.67836.cc-怎么黑进彩票平台| www.444371.com-彩票31app苹果| www.544450.com-如何教我买彩票| www.446455.com-彩票网租-| www.621362.com-家彩网胆码杀码| www.7275.pw-台湾彩虹台网络直播| www.0512.wang-公益彩是什么意思| www.084414.com-动物福彩网-| www.jn84.com-江苏快三99彩正规| www.959365.com-御彩轩下载-| www.07rd.com-刚力彩芽长发| www.198543.com-湖北体彩网-| www.548066.com-大发送彩金-| www.657848.com-星彩网官网-| www.750168.com-彩票爱乐透天天中彩| www.835616.com-买彩票用什么软件好| www.906278.com-开黑彩判刑-| www.972969.com-彩虹岛ⅱ-| www.621.me-河内时时彩计划手机| www.788729.com-新加坡福彩开奖结果| www.879284.com-百盈快三规律破解| www.991766.com-彩霸王论坛小鱼儿| www.fc15.com-彩票破解软件靠谱吗| www.a75.net-时时彩越玩越输| www.653392.com-玖富彩票江西快三| www.739044.com-哪个彩票软件好| www.1776.club-南国七星彩手机板| www.yd97.com-云南体彩11选5| www.302143.com-河南河南快三| www.3jj.com-通博彩票app| www.778531.com-彩88双色球预测| www.1187.vip-吉林快三开奖查询| www.0297.cc-彩霸王论坛免费资料| www.4900.in-彩票688网-| www.210051.com-360彩票购彩大厅| www.784172.com-时时彩报警能追回吗| www.964863.com-555彩票网可信吗| www.ju40.com-彩计划app官方| www.37hs.cc-盈丰彩票官方网站| www.65eq.com-专家说彩-| www.3428.cn-快三内部数据曝光| www.tg3.cc-福彩开奖日期是周几| www.018124.com-时时彩万位人工定胆| www.100633.com-e乐彩网-| www.195868.com-彩票开奖查询公告i| www.320308.com-休肓彩票7位数| www.422124.com-日剧刚力彩芽| www.528906.com-竞彩店不能再申请了| www.707623.com-一分钟一期快三平台| www.242343.com-彩票软件如何破解| www.587355.com-昨晚彩票开奖结果是| www.700084.com-159彩票网比分| www.74459.com-七乐彩6等奖多少钱| www.362063.com-描写家乡彩虹的作文| www.571342.com-甘肃贵族快三| www.27787.com-代玩彩票赚钱| www.780606.com-彩铅画人物头像| www.1448.xyz-好彩客是黑网吗| www.787824.com-体彩排列5今天开奖| www.895204.com-七彩格子是干嘛的| www.973639.com-3d字谜彩吧-| www.zr76.com-时时彩在哪里玩| www.62484.cc-甘肃福彩3d走试图| www.226187.com-福彩抓了多少人| www.813749.com-123彩库-| www.663946.com-nba彩票推荐分析| www.990696.com-竞彩看盘网站| www.ze85.com-33彩票平台-| www.869.in-彩铅花卉玫瑰花| www.882700.com-易彩网黑我钱| www.970942.com-福利彩票3d口诀| www.cai322.com-福建快三开奖号码| www.565504.com-福彩专家双胆| www.628365.cc-彩神请码-| www.709991.com-彩票首存-| www.775550.com-张家口福利彩票中心| www.853938.com-全民智投彩票| www.911855.com-快3彩票下载注册| www.998193.com-经典彩版808版| www.pu46.com-98彩票网安全吗| www.01pg.com-彩虹七色分别是什么| www.sw24.com-我要机选七星彩| www.9744.top-全民彩彩票是真的吗| www.9465.shop-美国有哪些彩票| www.zn89.com-彩票代打兼职群| www.376058.com-双彩论坛3d字迷区| www.505195.com-哪个平台彩金多| www.563031.com-阳光彩民乐图谜| www.618356.com-世界杯足彩竞猜赔率| www.692701.com-6678彩票网-| www.760566.com-上海快三和值分布图| www.815896.com-体彩专家预测分析网| www.875661.com-彩神v111app| www.940959.cc-大发快三研究吧| www.988299.com-快三购彩小贴士| www.cp8548.com-河北省快三开奖结果| www.ls46.com-快三手机版-| www.b11.xyz-最有信誉的私彩平台| www.lt20.com-彩票刷水套利方法| www.zr28.com-大玩家彩票怎么用| www.29369.cc-添光溢彩-| www.414224.com-七彩阳光幼儿园| www.509536.com-爱心彩网址是多少| www.565466.com-临沂福彩中心官网| www.618435.com-酷彩app不能提现| www.672300.com-彩宝快三是真的吗| www.516963.com-中国传统色彩名称| www.588536.com-刚刚七星彩开什么奖| www.650049.com-本港博彩堂免费资料| www.753688.com-qq彩色昵称-| www.809821.com-好彩网3d字迷| www.869736.com-爱尔兰彩票开奖结果| www.919180.com-如何搭建彩票网站| www.966757.com-广西快三是骗人的吗| 杏彩www.00840q.com| www.yn2.cc-黑彩票平台提现技巧| www.312237.com-乐彩333-| www.386695.com-重庆时时彩计划软作| www.519567.com-飞翔竞彩吧-| www.583748.com-彩之乐-| www.637852.com-周围福利彩票店| www.722259.com-画画彩铅图片大全| www.804785.com-lgbt彩虹旗图片| www.876524.com-今日彩票老黄历| www.958667.com-欢乐十分钟福利彩票| 中国福利彩票www.33588g.com| www.yd69.com-足彩亚洲杯-| www.412332.com-中国福利彩票计划王| www.928600.com-87彩店店主版| 双彩网www.152012.com| www.559118.com-大彩网走势图百度| www.156695.com-惠彩-| www.309031.com-68彩票网站首页| www.419516.com-三宝生活体彩屋官网| www.663940.com-竞彩同赔查询| 乐发彩票www.113669.com| www.72jg.com-体彩六加一昨晚开奖| www.212307.com-时时彩注册送体验金| www.9324.cc-吉隆坡时时彩官网| www.537343.com-彩票能回本吗| www.778990.com-第一彩票网-| www.992046.com-福利彩复式怎样玩法| www.07lv.com-中国彩票返奖率太低| www.986255.com-时时彩最聪明的玩法| www.6568.cn-鑫彩美缝剂怎么样| www.34089.com-中国彩吧一彩吧论谈|