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.30aq.com-香港彩厍宝典| www.2632.net-惠普彩色复印机硒鼓| www.99tv.com-科学预测彩票| www.4756.net-彩票冒领能查出来| www.943.cm-体彩排列三直播视频| www.6540.com-金牛彩票软件| www.582216.com-彩客彩票007| www.686712.com-中彩那天的板书| www.777583.com-星空彩票苹果版| www.860446.com-好彩双爆珠整条图片| www.935165.com-万彩彩票靠谱吗| www.994812.com-福利彩票七乐买法| www.fd11.com-3d彩票买法-| www.xs56.com-彩工网甘肃快3| www.854635.com-大乐透开门彩杀号| www.939113.com-快三权威下载| 彩神购彩www.csgc8.com| www.087090.com-乐福彩票网-| www.221969.com-买彩票输了80万| www.585022.com-掌聊买彩票软件下载| www.48177.com-竞彩技巧app下载| www.005143.com-星刚力彩芽-| www.087667.com-彩之王下载地址多少| www.160709.com-北京彩票站转让信息| www.033895.com-竞彩篮球大小分技巧| www.813384.com-想开个福彩和体彩店| www.115221.com-福彩快三-| www.979365.com-南通福彩网-| www.027157.com-体彩销售工作靠谱吗| www.192557.com-江苏快三推荐什么号| www.519859.com-福利采彩票开奖查询| 中国福利彩票www.3478x.cc| www.691665.com-彩乐彩票官方网站| www.899583.com-c81彩票最新网站| www.972887.com-彩虹代刷app官方| www.cp2968.com-彩票托怎么聊天的| www.rj24.com-网上买快三-| www.51037.com-重庆时时彩乐彩图表| www.033048.com-95彩票9年老品牌| www.503678.com-网络彩票合不合法| www.761249.com-好彩快3官网| www.992906.com-买彩票赚钱可靠吗| www.gk88.com-湖北快三百万高手| www.s70.cc-体彩排列三4机号| www.950487.com-购买福利彩票| www.47744.com-山西省体彩中心电话| www.j98.com-红五彩吧图库| www.793272.com-彩票九合法么| www.788263.com-中国足彩网客户端| www.002317.com-新西兰快三怎么样| www.607612.com-茶光福彩网点查询| www.877751.com-六台彩迷宫猪年有景| 必中彩票www.bizhong55.com| www.991589.com-彩票vip下载| www.968287.com-澳洲时时彩开奖平台| www.26se.com-体彩预测家彩网| www.1335.xyz-559彩票苹果| www.551940.com-彩票长龙提示| www.984705.com-神彩3-| www.369406.com-彩友网时时彩积分| www.94sv.com-体彩一共多少个数| www.7103.cn-七彩油滴建盏| www.731895.com-彩票代打佣金50| www.202762.com-贵州彩票11选五| 500彩票www.701574.com| www.206099.com-五分彩公式-| 500万彩票www.www.98528f.com| www.57927.com-汇彩邀请码-| www.ud35.com-王者彩票押大小| www.315073.com-cp900彩票-| www.417920.com-彩漂剂的作用| www.879671.com-l3d彩票开奖号码| www.957704.com-台湾彩乐透彩| 凤凰彩票www.77802m.com| www.le77.com-中彩彩票中福快三| www.td4.com-福建体彩开奖结果| www.973095.com-彩虹六号各种梗| 500彩票网www.960737.com| www.7277.date-手机可以看彩虹台吗| www.9686.net-壹彩万网址-| www.796415.com-乐盈彩票是黑平台吗| www.890982.com-七星彩彩票统计器| www.961504.com-福彩刮刮乐字母w| 小米彩票www.101377.com| www.1761.com-福彩3d两码直选| www.700177.com-彩票大发的技巧| www.804051.com-竞彩猫收费太贵| www.936270.com-彩票彩客app| 中彩网www.91233o.com| www.3289.wang-中彩票动态图| www.895332.com-华彩赢家靠谱吗| www.028791.com-乐彩双色球手机论坛| www.xn79.com-久彩彩票-| www.770465.com-篮球胜负竞彩玩法| www.14646.com-彩票中三等奖| www.108461.com-平台彩票赢的谁的钱| www.646869.com-14场胜负彩吧| www.865569.com-彩票怎么中大奖呢| www.2298.biz-bb快乐彩技巧稳赚| www.137283.com-易易彩网-| www.248580.com-132彩票注册官网| www.lf10.com-306官方彩票安卓| www.7qp.cc-彩票诗迷大全| www.668020.com-御都彩票改名了| www.bp97.com-乐彩网破解版| www.1010.net-周四开啥彩票| www.535388.cc-买彩票要选几个数字| www.692712.com-旺旺彩票大发快3| www.828984.com-永信彩票地址| www.967107.com-体彩兑奖有提成吗| www.dm7.cc-10分钟一开的彩票| www.pd93.com-网络彩票是骗局吗| www.122190.com-福彩中心作弊事件| www.151713.com-移动彩票软件下载| www.98248.com-彩票3b试机号查询| 中国福利彩票www.3478u.cc| www.020582.com-免费搭建彩票平台| www.659638.com-特彩网吧-| www.479896.com-西宁体彩哪里领奖| www.186475.com-网上彩票五分钟一开| www.155339.com-胜负彩中3个| www.775690.com-体彩昵称-| www.115456.com-体彩官网电脑版| www.180864.com-下载中彩彩票| www.244422.com-彩票开奖大乐透查询| www.048955.com-江苏快三中奖结果| www.815130.com-双色球搜狐彩票网| www.04161.com-黑龙江体彩22选5| www.59681.com-极速3d彩票漏洞| www.012527.com-海南体彩开奖结果| www.386653.com-福彩三地最新开机号| www.501729.com-体彩五块钱中几个数| www.45205.com-快彩11选5走势图| www.787538.com-湖北快三冷号统计| www.577327.com-体彩17095开奖| www.671031.com-百度彩票是真的吗| www.96163.com-东东彩票-| www.261907.com-福彩开奖七乐彩| www.542334.com-万彩吧彩票网站| www.292331.com-有没有玩快三赢钱的| www.659641.com-体育彩票群名| www.901929.com-永利棋牌彩票| www.pu1.cc-三分快三倍投数| www.495535.com-重庆时彩计划软件| www.613559.com-天福彩票图片| www.279856.com-胜负彩500w-| www.388145.com-华彩学校-| www.62259.cc-大赢家时时彩平台| www.318640.com-亚洲彩票网站| www.479342.com-彩票大底交集| www.601052.com-一次买多期的彩票| www.742505.com-好运彩软件-| www.886667.com-彩票黑点看出中奖| www.yu25.com-美国彩票官网| www.30bm.com-彩铅画多肉植物| www.337439.com-青海福利彩票3d| www.378781.com-体育彩票中奖公布| www.061577.com-彩票大嬴家走势图| www.800847.com-福彩3d今天开机号| www.hk07.com-乐彩网首页-| www.96634.com-彩票作假分析| www.jv01.com-中彩娱乐网站是| www.50px.com-大成彩票骗局| www.308211.com-彩票777正规吗|