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天

知道了
江西11选5 www.126464.com-19050期足彩| www.87ka.cc-河北体彩中心招聘| www.4154.org-七彩缓中集团| www.778772.com-牛材网彩票指南报| www.881485.com-58彩票安卓下载| www.964556.com-渐江体彩网下载| www.cai130.com-湖北福彩快三查询| www.qs75.com-彩票店的宗旨| www.cai8157.com安徽快三今天| www.948464.com-福彩3d图库迷| 凤凰彩票www.77803j.com| www.ha93.com-518彩票网正规吗| www.11.top-3d彩票蔵机字谜图| www.788814.com-浦东结婚彩礼怎么样| www.870064.com-竞彩足彩分析师招聘| www.936968.com-中彩网3d专家预测| www.989608.com-彩51平台-| www.qe53.com-下载7彩app-| www.355966.cc-彩票小概率玩法| www.294153.com-江苏快三乐采购| www.378964.com-香港五分⑥和彩| www.735932.com-想联系个彩票分析师| www.829977.com-娱乐游戏送63彩金| www.906468.com-江西快三的漏洞| www.8118.live-福彩最新两元刮刮乐| www.44zb.com-上海快三有几期| www.1829.vip-网易上能买彩票了吗| www.763317.com-足彩加苹果-| www.868702.com-海南七星彩手机软件| www.948626.com-体育彩票的购彩技巧| 大赢家彩票平台www.376513.com| www.914442.com-大发快三彩票下载| www.309669.com-体彩7往数-| www.376035.com-陕西彩票几点停售| www.470674.com-体彩和值大小| www.553630.com-上海快三几点结束| www.617631.com-榆次彩票站-| www.700985.com-福星福彩3d推荐| www.781405.com-百彩影视-| www.850608.com-北京快三对子玩法| www.911375.com-三分时时彩官网| www.969251.com-快三追号计划利润表| www.bq8.cc-珠江彩票合法吗| www.081578.com-网上中彩票图片| www.642186.com-彩票密码在哪| www.710252.com-彩票平台首充送彩金| www.788540.com-玩手机彩票犯法吗| www.856564.com-福彩3d藏宝图高清| www.915591.com-加盟中国福利彩票| www.972001.com-时时彩免费全套源码| 手机购彩www.721588.com| www.2166.net-附近有卖体彩| www.rh6.cc-牛牛彩骗局-| www.4me.com-怎么查体彩中奖号码| www.268995.com-韩国快三网-| www.22dg.com-七星彩版区-| www.sa9.com-上海11选5彩经网| www.85030.com-大连福彩12选5| www.247115.com-快三怎么算和值| www.231950.com-福彩字谜总汇| www.818054.com-19025期胜负彩| www.947495.com-布衣彩吧3d图库| www.cj5.com-三分快三怎么玩稳赚| www.b90.pw-福彩三d和值走试图| www.76ba.com-彩天下稳-| www.4924.pw-足彩胜负彩开奖时间| www.33687.cc-彩票怎么看走势图| www.010350.com-彩票502万-| www.30gv.com-今晚彩票开什么| www.980045.com-体彩店装潢-| www.47696.com-大乐透彩票预测| www.37832.com-6234彩票网-| www.080286.com-吉林省福彩快3助手| www.337754.com-购买江苏快三app| www.61lk.com-富贵彩票注册官网| www.9760.vip-默彩第170-| www.133069.com-豪彩vip怎么样| www.cp9727.com-好彩妹-| www.905626.com-快三怎么套利| www.c83.top-新利彩票软件下载| www.1124.in-竞彩5000万中奖| www.758383.com-彩票01是正规的吗| www.883614.com-奔驰彩票官网首页| www.963909.com-中国福彩股票| 凤凰彩票www.77803n.com| www.972869.com-足彩胜平负彩客网| www.io65.com-胜负彩走势图带坐标| www.85ef.com-彩票人工计划靠谱不| www.52873.com-腾讯分分彩龙虎规律| www.949603.com-百汇彩票靠谱吗| 网易彩票www.9356h.com| www.266638.com-河北快三吧-| www.jk76.com-淘宝彩票停售| www.706969.com-上海快三和值口诀| www.903578.com-星光彩票注册码| www.11658.cc-大发快三靠谱平台| www.337455.com-yy彩票登录-| www.261258.com-98彩票官方网登录| www.375952.com-沈阳彩票站招打票员| www.735155.com-福彩快三线上投注| www.38672.cc-彩易科思怎么样| www.6293.biz-福彩3d杀号软件| www.445950.com-彩金项链值得买吗| www.595713.com-彩票站兑奖金额| www.691993.com-彩尊app最新| www.786791.com-彩一先知论坛网| www.2153.xyz-越南彩票今天| www.20744.com-足球竞彩购买技巧| www.062735.com-福建体彩开奖官方网| www.151723.com-韩国彩票lotto| www.253397.com-好彩妹嫁给谁| www.408538.com-体彩票大乐透| www.512818.com-七星彩票哪里下载| www.09pz.cc-彩民之家论坛手机网| www.8126.loan-福彩3d试机号金碼| www.89331.com-顶级彩票可靠吗| www.089226.com-易彩快三大师计划| www.200249.com-腾讯彩票的补偿方案| www.325193.com-云购彩票主页| www.354659.com-福彩人人快三| www.84hf.com-369.cn彩票-| www.1408.vip-好运来高手彩坛| www.6338.bid-摇发彩票听过吗| www.11591.com-双色球彩乐乐预测| www.50122.com-福彩胆码条件双胆| www.9080.in-时彩提前开奖号码| www.63969.cc-南阳彩礼多少| www.029983.com-带有彩虹含义的名字| www.15152.com-杭州体彩中心| www.964994.com-快乐彩票红包雨| www.lp39.com-旺彩双色球官方下载| www.097976.com-万彩万彩吧-| www.365799.com-彩铅怎么涂-| www.623652.com-亿盈彩票-| www.020567.com-重庆三分彩开奖结果| www.152130.com-竞彩看盘在哪看| www.273265.com-外围足彩玩法| www.369584.com-七星彩摇奖机简介| www.552195.com-火剪彩票vip版| www.59190.com-福彩三d秘籍| www.185188.com-093彩票软件| www.315840.com-河南福彩网走势图| www.165962.com-分辨彩票黑平台| www.272772.cc-福彩包括什么| www.381992.com-体彩书图片-| www.293210.com-体彩481打票方法| www.439243.com-4lcc金彩网百度| www.589242.com-沧州市体彩中心地址| www.738822.com-正规彩票微信交流群| www.943023.com-广西南宁市福彩中心| www.cp1190.com-今日内蒙快三推荐号| www.356416.com-新利快三最大遗漏值| www.004.live-手机时时彩开奖规律| www.142566.com-彩8彩票邀请码| www.96om.com-永安彩票兼职| www.9380.vip-tt彩票正规吗| www.951890.com-福彩快三过年放假吗| www.cp1573.com-快三qq计划群| www.q72.cn-江苏快三必出号| www.113709.com-中国福利彩一定牛| www.521786.com-搜索福星中彩网止| www.677542.com-中彩乐电子群英会| www.791121.com-彩票大师下载软件| www.142673.com-8彩网址登录|