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.oh61.com-海南彩-| www.32jq.com-周四福彩开奖时间| www.99zu.cc-三彩彩计划-| www.841932.com-中国彩票分配| www.949241.com-湖北快三网络购买| 福利彩票www.99677z.com| www.7337.in-彩虹六号真实事件| www.007856.com-怎么黑彩票主机| www.006778.com-七星彩直播开奖现场| www.849422.com-一分时时彩开奖网| www.968604.com-重庆时时彩怎么加群| www.ey98.com-手机123彩票网| www.38810.com-中彩网址是什么| www.231139.com-快三作弊器有没有| www.637171.com-小米状态栏电量彩色| www.2179.top-福彩断组分解| www.jo73.com-一通快三赌博案| www.27ft.com-彩票查讯-| www.b15.club-福利彩开奖时间每周| www.585836.com-腾讯天天中彩票赔偿| www.906228.com-足彩竞彩计算器| www.996597.com-亚搏彩票软件官网| www.fp94.com-福彩开机号近100| www.wz84.com-湖北福彩快三论坛| www.91bx.com-辉煌彩票能赚钱吗| www.3060.biz-快乐十分彩票预测网| www.8812.vip-福体彩每日开奖| www.34913.com-福彩双论坛-| www.313580.com-微信彩票竞猜好恐怖| www.233714.com-e球彩3场奖金| www.353691.com-彩票直播邀请码| www.449941.com-快三012路是什么| www.526810.com-竞彩推荐表格制作| www.668628.com-还有华人彩票网站吗| www.734829.com-现在买哪种彩票靠谱| www.803758.com-买彩票违法吗| www.936355.com-足彩姜山冷门博客| 百姓彩票www.www.bxcp3333.com| www.75rb.com-什么是彩票漏洞| www.968682.com-9彩9彩票-| www.710487.com-什么是网上刷彩| www.835732.com-四年级中彩那天教案| www.960244.com-酷彩吧网址是多少啊| www.cp3320.com-一分快三合法吗| www.215362.com-万博彩票彩种| www.322675.com-旺彩买双色球合法吗| www.465268.com-美国彩票漏洞| www.499360.com-平台私彩-| www.625215.com-51福彩-| www.750660.com-众兴彩票-| www.874021.com-大发快三和值技巧| www.t26.com-湖北彩票大奖| www.397313.com-时时彩挂机设定方案| www.78656.com-陆慧明足彩任九最新| www.612421.com-乐购彩票大发快三| www.9926.vip-体彩试机号金码胆码| www.549707.com-体彩足彩怎么买| www.960342.com-好运彩彩票网可信吗| www.dz14.com-广西快乐彩开奖结果| www.k04.club-皇冠彩票网十年现金| www.66182.cc-体彩排列三精准胆码| www.86196.cc-和彩彩票app下载| www.682789.com-黑彩平台排名前10| www.761154.com-体彩销售提成多少| www.828218.com-提现秒到的彩票平台| www.881384.com-足球博彩软件下载| www.25fs.com-体彩店转让5万| www.298932.com-彩票体彩-| www.496858.com-31体彩开奖-| www.8143.com-彩48彩票网-| www.16177.cc-申国彩票开奖结果| www.678395.com-签到送彩金app| www.512346.com-手绘凤凰图片彩色| www.645845.com-足彩最佳投注方式| www.413193.com-篮球体彩奖金| www.536770.com-福利彩票都有啥| www.879628.com-彩票实用工具数据| 大赢家彩票平台www.810523.com| www.10pf.cc-黑彩代理返点设置| www.kj27.cc-彩票走势图新浪| www.974151.com-快三秒总部电话| www.im56.com-广东福彩下载安装| www.1848.vip-大发快三中奖秘籍| www.17655.cc-北京快3彩票合法吗| www.096040.com-青海福彩快三开奖| www.260234.com-福利彩票怎么领大奖| www.51ad.cc-d福彩双色球开奖| www.2687.com-彩32下载-| www.467189.com-中国体育彩票开奖| 大赢家彩票平台www.976271.com| www.960041.com-福彩快三长龙助手| www.086835.com-彩福软件-| www.140275.com-体彩领奖地址| 网易彩票www.191079.com| www.909718.com-福彩快3甘肃| www.976128.com-河南林州彩礼钱多少| www.cai1288.com宁夏快三走势图今天| www.h61.club-澳洲5分彩开奖时间| www.06358.cc-最棒的彩票网站大全| www.179362.com-安徽快三助手一定牛| www.1144.xyz-熊猫时时彩官网| www.520521.com-e球彩总进球数奖项| www.644496.com-五湖四海彩票网址| www.756115.com-御彩轩害死了多少人| www.878921.cc-手机彩票过滤器| www.974889.com-055hcc福彩网| www.tq6.cc-乐彩网可靠吗| www.l01.net-时时彩彩票解码器| www.860807.com-好彩香烟价格免税| www.928123.com-大型彩色打印机价格| www.984060.com-福建快三号码统计器| www.sw4.com-福彩复式合买刷流水| www.b21.cc-竞彩彩票官网首页| www.323346.com-七彩开奖结果今晚| www.8528.cn-彩票坊平台下载| www.589128.com-南围彩票论坛| www.706612.com-彩票没中过-| www.768800.cc-众恒彩票平台| www.53956.cc-彩票平台输-| www.9490.xyz-体彩福彩什么意思| www.1032.org-黄金神彩网黄金四肖| www.8821.loan-澳彩网下载-| www.005624.com-买网络彩票犯法吗| www.511913.com-水溶彩铅绘画图片| www.798526.com-鼎盛五分彩-| www.800443.com-白菜群彩票吧网址| www.906414.com-江西快三网投| 彩民网www.76520y.com| www.34yl.com-七星彩坛论头尾| www.704256.com-云南省彩票-| www.436010.com-七星彩早版或加急| 大发彩票www.782w.com| www.630679.com-解彩神通字谜| www.780007.com-福彩3d讲座-| www.872703.com-福彩迷平台怎么样| www.969005.com-河北福利彩票网| www.aa60.com-体彩11选五玩法| www.715612.com-新3d彩票骗局骗局| www.7381.cc-怎么用懂球帝买彩票| www.090091.com-吉林新快三o12路| www.964380.com-能用的体彩app| 99彩www.996863.com| www.204068.com-3d彩票的玩法| www.22qm.com-梦到彩票号码真出了| www.885.mobi-彩票数学公式| www.5757.tv-体彩扑克3玩法金额| www.20184.com-凤凰彩票时间差漏洞| www.5894.net-博猫平台彩票| www.02898.cc-中彩网中奖故事| www.275242.com-一分时时彩预测| www.3863.cm-竞彩官方信息发布| www.577111.cc-乐凯彩票人人猜球| www.er56.com-体彩体彩独胆预测| www.4650.cm-中彩票只是运气好吗| www.735135.com-网上买高频彩合法不| www.87zj.com-444彩票网-| www.6412.cm-长龙助手神器彩票| www.49982.com-讯盈彩票app| www.978480.com-易彩快3走势图| www.ag15.com-今天彩票出号是多少| www.tx12.cc-玩大发快三赢钱吗| www.40968.com-拾彩-| www.528908.com-体彩竞彩开店| www.115771.com-农村彩礼新规定|