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.98zx.com-台湾极速快三| www.138678.com-时时彩计划方案| www.32bf.com-彩虹六号头像| www.558200.com-1分时时彩计划| www.865362.com-体育彩票加盟费条件| www.023171.com-七乐彩六个号有奖吗| www.gz84.com-彩票666-| www.954913.com-澳洲3分彩-| www.26781.cc-海南七星彩赔| www.891574.com-上海快三下载软件| www.573102.com-惠民彩票靠谱吗| www.215131.com-在线投注快三平台| www.771.space-时时彩开奖早知道| www.539748.com-彩经网走势图带震幅| www.696581.com-香港时时彩官网网址| www.011197.com-体彩有多少种玩法| www.978647.com-易彩票下载-| www.ra42.com-玩快三赢钱的人多吗| www.0131.org-威尼斯怎么去彩色岛| www.43665.com-3d旺彩网3b字谜| www.56714.com-彩票出票公司吃票| www.129805.com-最新彩市新闻| www.282758.com-玩时时彩算不算犯法| www.066523.com-900彩票正不正规| www.042852.com-甘肃快三微信交流群| www.149755.com-副利彩票机选| www.237593.com-99彩票手机版| www.311813.com-基诺型彩票漏洞赚钱| www.383310.com-中国体彩19029| www.490538.com-湖北体彩中心| www.678923.com-麒麟彩票下载安装| www.784725.com-福彩双色球是骗局吗| www.912141.com-彩53平台-| www.994479.com-彩票经验心得| www.mi59.com-港版好彩-| www.96331.com-发福利彩票的意义| www.s23.xyz-周四体彩彩票开奖吗| www.669520.com-福彩三d怎么买| www.1495.cc-彩虹照片唯美| www.9886.cm-500高频彩票| www.2377.pw-60123好彩下载| www.336046.com-广西福利彩快乐十分| www.524430.com-彩票开奖开奖结果| www.678216.com-福彩3d村黄金蛋吗| www.803671.com-中彩网投注大赛软件| www.936042.com-乐山快三到底真假| 大赢家彩票平台www.916025.com| www.884900.com-彩神网赌-| www.dg10.com-甘肃快三开奖纟结果| www.516188.cc-一赔一彩票-| www.nz24.com-博众彩票app| www.38on.com-福彩公益广告语大全| www.4879.biz-彩票摇号软件| www.026574.com-伟德体彩app| www.8302.top-深圳福利彩票机转让| www.181705.com-安徽快三基本走势| www.363651.com-重彩-| www.540318.com-彩票大赢家排列五| www.816465.com-时时彩冷号遗漏| www.959468.com-易彩快三作弊器| www.072446.com-秒速时时彩开奖规律| www.229182.com-当彩票打票员风险| www.69445.com-五百vip彩票网| www.33862.com-微信群彩票分析师| www.9008.cc-乐彩彩票开奖结果| www.dr84.cc-快彩下载安装到手机| www.26cw.com-非法发行彩票| www.1862.vip-明天可能中的彩票号| www.23463.com-时时彩三星直选技巧| www.92100.com-顺丰彩票官网| www.104909.com-中国竞彩联盟| www.365523.cc-彩铅桃花林怎么画| www.82000.cc-彩票实战手册| www.118371.com-体彩西甲-| www.593120.com-彩虹演员表-| www.222934.com-彩票快三全天计划| www.598787.com-彩票代理可以推广吗| www.932695.com-快三手机软件怎么样| www.00957.com-乐彩3d杀码-| www.15893.cc-休彩现场直播| www.476949.com-双色球快三奖金规则| www.0222.cc-时时彩传统玩法介绍| www.25oi.com-正规的网上彩票网站| www.57711.com-河北福彩排7走势图| www.082569.com-河南彩色水泥板厂家| www.208329.com-全国快三走势| www.556991.com-公牛彩票真的还是假| www.382007.com-五行预测彩票取数| www.568081.com-卖体彩好还是福彩好| www.0297.tv-福州体彩转让信息| www.rm18.com-彩票反水啥意思| www.79ic.com-惠州中彩票-| www.cx1.cc-福彩近30期走势图| www.ue92.com-彩票属于赌博| www.51mu.cc-足彩500奖金分析| www.332615.com-买彩票的正规平台| www.404343.com-结婚彩礼多少| www.524731.com-凯利公式彩票| www.607093.com-海南七星彩免费头尾| www.676197.com-彩票兵哥3d-| www.745001.com-网上彩票购彩哪个好| www.804376.com-易彩自动投注软件| www.869435.com-手机怎样买七星彩| www.925179.com-财神彩票-| www.976324.com-彩票未领-| www.cai0022.com快三玩法中奖技巧| www.ij50.com-福利彩票安卓下载| www.4733.biz-蛊龙彩票-| www.28332.cc-网上购彩票合法吗| www.315374.com-彩虹棋牌比机有挂吗| www.306037.com-送礼送彩票好吗| www.115117.com-彩神通4码准不准| www.198628.com-大发彩票app平台| www.35159.com-腾讯彩票负责人毛涛| www.857848.com-雪绿园足彩比分直播| www.gi34.com-广西快三和值走势图| www.426996.com-绝对可靠的足球彩票| www.92551.cc-快三快3和值单式| www.045105.com-湖北快三9导未出号| www.125000.com-中国福彩体彩| www.449881.com-保定体彩电话投注| www.529252.com-彩虹岛手机网页版| www.590114.com-七星彩定胆杀号大全| www.650356.com-中国体育博彩合法吗| www.731735.com-彩钢围挡5年| www.793048.com-绵阳市福利彩票中心| www.865734.com-赢多彩票-| www.925389.com-宏发娱乐彩票邀请码| www.128650.com-吉林新快三走势| www.526039.com-四川福利彩票20期| www.202530.com-彩之星江苏快3| www.324518.com-7乐彩专家预测号码| www.403187.com-河南福利彩票跑号码| www.523191.com-男子桥洞研究彩票| www.607109.com-彩票历史大奖| www.691887.com-彩乐乐app-| www.77.biz-鸿辰国际彩票app| www.550349.com-大乐透杀号网易彩票| www.123495.com-双色彩票信息| www.221911.com-高频彩票害人| www.305283.com-怎样选彩票容易中奖| www.072693.com-到彩票店怎么买| www.63bq.com-安全彩票o2o系统| www.221113.com-国家正规彩票网站| www.051281.com-彩票开奖公告大全x| www.019469.com-福彩小助手是真的吗| www.088781.com-福彩门户惠泽资料| www.010930.com-腾讯彩票游戏平台| www.100467.com-105彩票网安全不| www.689219.com-福彩3地黑圣手字谜| www.759177.com-微彩特区七星论坛| www.819403.com-彩票人工计划联盟| www.882878.com-093彩票靠谱吗| www.936360.com-姜山足彩推荐| www.996717.com-福利彩票手机机选| www.ca12.com-江苏福彩专家推荐号| www.tq63.com-足彩能网上买吗| www.15br.com-关于彩票的对联| www.67yu.com-一分时时彩人工计划| www.0297.cc-彩霸王论坛免费资料| www.4917.top-中国体彩票查询| www.9286.biz-乐彩沦乐彩论坛| www.73369.cc-体彩6加1开奖时间| www.27qb.com-怎样注册彩票账号|