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天

知道了
500彩票竞猜 www.709052.com-网上投注彩票靠谱吗| www.546207.com-利用分分彩刷流水| www.727800.com-福彩双色球最高中奖| www.865446.com-甘肃体彩排列三| www.939611.com-福彩公益事业| www.997217.com-足彩任九比分直播| www.111007.com-河北福彩快3带垮| www.328814.com-免费彩金申请网站| www.560611.com-澳洲3分彩开奖时间| www.690286.com-竞彩足球比分投注| www.824039.com-福彩直播现场| www.891881.com-www106彩票-| www.912247.com-私彩和官方有关系的| www.018192.com-漫画星彩无惨| www.9665.com-香港6合开彩| www.981861.com-海南省体彩中心| www.206410.com-福彩快3软件有哪些| www.365649.cc-彩铅绘画欣赏图片| www.033796.com-怎样七乐彩机选一注| www.cai566.com-快三助手免费版安卓| www.61081.com-网络彩票举报网址| 购彩在线www.66332z.com| 818合彩www.www.8000hc.com| www.968421.com-福建福彩网快3开奖| www.037461.com-安装彩票大师| www.914920.com-黑彩举报会怎样| 网易彩票www.332930.com| www.991879.com-福彩快三是真的假的| www.756.hk-时时彩猜数字怎么猜| www.7888.pro-中发彩票官方网站| www.400161.com-808七星彩早版区| www.8654.loan-有没有微信彩票群号| www.176546.com-大发快三技巧和方法| www.78394.com-wps做彩票走势图| www.359365.cc-中国体育彩票微博| www.453178.com-中国每年彩票销售额| www.11hh.cc-澳客彩票客户端官网| www.6848.pw-今日羊城晚报晚好彩| www.557629.com-好运彩票网登录| www.81uq.com-工银e生活彩票| www.1975.top-中国福利彩票世界杯| www.9781.vip-周六有哪些彩票开奖| www.50566.cc-ag333爱购彩| www.09792.com-中国山东彩友沙龙| www.452048.com-选彩票技巧-| www.052829.com-福州市体彩中心兑奖| www.568053.com-五福彩彩票票官网| www.439977.com-中彩那天解释词语| www.578376.com-老奇人彩图-| www.014272.com-彩票平台系统出租| www.911619.com-春节彩票开奖时间表| www.53tg.com-彩票绝密书-| www.8882.cm-重庆时时采彩作假| www.932298.cc-01彩票是真的吗| 网易彩票www.096wy.com| www.161089.com-新开彩票平台送彩金| www.084001.com-彩票托会见面吗| www.509038.com-云彩软件-| www.982055.com-彩票推广贴吧| www.087031.com-鸿博彩票安卓下载| www.85892.com-网上的体彩天下快三| www.979669.com-体彩装修目录| www.444633.com-云朵福彩3d杀码| www.578209.com-沈阳有快三吗| www.672672.com-七星彩1-| www.cp3100.com-网上福彩快三骗局| www.512306.com-古风女彩铅-| www.623253.com-3d福彩牛彩图谜| www.721811.com-北京福彩3d走势图| www.559223.com-爱彩网下载-| www.63xe.com-全民赢彩票压熊猫| www.196048.com-安徽快三开奖结| www.zc45.com-幸运快三计算公式| www.66bk.cc-时时彩五星复式计划| www.456025.com-郴州快乐十分彩票| www.616545.com-7彩网下载-| www.699501.com-新浪竞彩足球分析| www.778063.com-彩娃app下载| www.7250.site-彩虹糖分类机| www.18758.cc-黑彩大小双单| www.80823.cc-福彩打票员教程视频| www.22171.cc-天天福彩网站| www.377731.com-彩礼多还是嫁妆多| www.699306.com-足彩猜比分-| www.16729.com-159彩票网比分| www.54999.cc-彩票平台手机版| www.95354.com-中国福利彩票新彩网| www.388499.com-女生说在玩彩票| www.605503.com-家彩网开奖号| www.369155.com-彩票中奖名单身份证| www.2411.pw-甘肃快三技-| www.8147.loan-7125彩票-| www.409433.com-辽宁体彩爱彩乐| www.836519.com-体彩推荐号-| www.933577.com-彩票多少钱以上到省| www.02bt.com-3分时时彩预测| www.97ai.com-人生没有彩排事例| www.4411.net-福彩3d倍-| www.269313.com-珠江彩票是真是假| www.79882.cc-123彩图图库| www.852232.com-百彩网免费料一| www.7ix.cc-高级儿童彩铅画大全| www.880876.com-黑彩网站有没有漏洞| www.993872.com-竞彩半全场玩法介绍| www.hc77.com-彩运8软件是真的吗| www.279450.com-时时彩官网啥时候停| www.qo7.cc-吉林省福彩中心电话| www.270208.com-567彩票cc版| www.362074.com-快钱体育买彩票| www.917918.com-哪些彩票网站比较大| 博友彩www.533786.com| www.746733.com-七星彩专家荐号| www.800085.cc-网上怎么买足球彩票| www.858942.com-下载彩票开奖信息| www.916107.com-体彩店转让最新信息| www.967985.com-时时彩心得贴吧| 68彩票www.68682l.com| www.bn05.com-彩71app-| www.oc74.com-彩票導航-| www.448999.com-北京三分彩开奖记录| www.pn51.com-安徽快三遗漏值| www.136.com-彩虹p-| www.37869.cc-星光彩票可靠吗| www.137973.com-网上快三-| www.436047.com-四川体彩领奖流程| www.958402.com-甘肃体彩官网app| www.41ls.com-亿菲彩票官方网站| www.520718.com-分分彩后三稳杀2码| www.713385.com-我买福彩3d输惨了| www.5078.top-福彩25选7奖结果| www.01238.cc-最新送白菜彩金网站| www.690560.com-567彩票网址| www.57991.cc-福彩传真-| www.5369.biz-手机购快三-| www.17594.com-体育彩票31-| www.86196.cc-和彩彩票app下载| www.029153.com-彩宝贝网双色球杀号| www.099969.com-彩经网手机版下载| www.158241.com-彩票助赢计划| www.225557.com-百合彩票-| www.51go.com-足彩11转9算法| www.609904.com-福彩十五选五的玩法| www.682152.com-彩票店扫码出票软件| www.771002.com-腾讯分分彩和值计划| www.850825.com-大发时时彩能不能玩| www.901099.com-福彩三地东北彩霸3| www.954060.com-足彩竞彩官网| www.994073.com-体彩篮球怎么玩法| www.tc0.com-重庆时彩十年心得| www.ot59.com-彩票新规定-| www.791678.com-下载福彩3d预测| www.884246.com-江苏快三下-| www.953502.com-好彩紫色爆珠多少钱| www.994935.com-好彩堂一肖两码| www.ap1.com-河北快三近100期| www.ll19.com-彩票巴士官网下载| www.i92.net-七星彩开奖视频直播| www.186736.com-快三中胆码啥意思| www.635252.com-国外博彩公司工作| www.693689.com-北京彩票网-| www.755972.com-3d开奖彩票图片| www.42205.com-大乐中奖彩票图片| www.09930.com-微彩彩票安卓| www.77571.cc-有没有稳赢的彩票|