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.223291.com-黑彩靠什么盈利| www.836822.com-十分精彩软件| www.191936.com-北京快三选号助手| www.346926.com-3d两元彩票网| www.564177.com-北控自助彩票| www.975633.com-湖南长沙福彩中心| www.1601.in-河南休彩彩481| www.942628.com-重兴分分时彩| JJ彩票www.22503.cc| www.gm30.com-江苏快三群真的假的| www.b14.in-福彩开奖结果查询表| www.39my.cc-七星彩专家杀号定位| www.1028.cm-众盈彩票app| www.7098.com-博创彩票-| www.968746.com-彩世界下载官方平台| www.dx7.com-分分快三提前开奖| www.932969.com-各省快三开奖查询| 大赢家彩票平台www.009321.com| www.338612.com-湖北葛店彩票中奖| www.456497.com-开户送彩金的娱乐城| www.567625.com-体彩19056期| www.652368.com-福彩最新两元刮刮乐| www.736210.com-怎么可以买彩票挣钱| www.820605.com-七星彩直播结果| www.899569.com-天天彩是个什么软件| www.969009.com-酷彩吧官网下载安装| www.cai1212.com江苏快三害死多少人| www.030349.com-谁有淘彩票邀请码| www.121142.com-彩票店取名-| www.196004.com-江西省福彩兑奖地址| www.155577.com-凤凰彩票怎样能赢| www.575253.com-大发快三赢了很多| www.963069.com-江苏省福彩兑奖中心| www.cai5025.com福彩快三助手| www.879243.com-彩票几位数算中奖| www.cp3316.com-快三秒-| www.157167.com-北京福彩大奖在哪领| www.359619.com-高原苍狼体彩断组| www.xw03.cc-春天彩票app| www.319935.com-百宝彩票方案详情| www.1731.org-彩票306官网下载| www.559648.com-双彩论谈3d字谜| www.686376.com-500彩下载手机版| www.1867.com-q彩是合法的吗| www.685863.com-正规的福利彩票软件| www.774461.com-七乐十分彩-| www.858949.com-彩票查-| www.944950.com-248彩票首页| 豪彩VIPwww.18399.com| www.785648.com-领航彩票软件| www.61316.com-乐米彩票客服| www.082399.com-正规购彩软件| www.195868.com-彩票开奖查询公告i| www.509321.com-河内5分彩软件| www.641655.com-中国体彩2串1图标| www.399360.com-七星彩千军万马| www.544334.com-手机我中啦彩票下载| www.706414.com-时时彩在线预测网站| www.ez20.com-破解私彩软件| www.1410.vip-福利彩票群英会开奖| www.962130.com-彩票全天单期计划| www.51687.cc-网投时时彩-| www.50059.cc-华宇娱乐彩-| www.488046.com-七乐彩7期开奘结果| www.615769.com-玩彩票犯法吗| www.809030.com-足彩中奖心得| www.287833.com-彩票合买大厅| www.98911.cc-时时彩假吗-| www.117792.com-刮彩票有什么技巧| www.202264.com-贵州省体彩中心| www.275978.com-福彩3d下注-| www.215.biz-鼎丰彩票邀请码| www.6990.mobi-七彩云盒密码多少| www.33826.com-斐波那契数列与彩票| www.929380.com-七星彩的中奖规则| www.cp9218.com-中彩娱乐app| www.977182.com-河南濮阳范县彩礼| www.no70.com-宁夏快三100期| www.06ft.com-福彩双色球是真的吗| www.83099.com-七星彩开奖是几点钟| www.853142.com-彩票168官网| www.945843.com-乐米彩票注册| www.996801.com-北京体育彩票销售点| www.gw66.com-体彩排列三预测号| www.l66.com-汇彩网是正规的吗| www.85yq.com-老徐福彩3d工作室| www.747865.com-彩宝3d下载-| www.816602.com-海南私彩今日开什么| www.901099.com-福彩三地东北彩霸3| www.961114.com-内蒙古体彩网点| 818合彩www.www.1555hc.com| www.872.pw-彩铅画桃花树| www.7880.la-陶宝买彩票-| www.65523.cc-炫彩成语-| www.024467.com-彩票万能公式脚本| www.h57.club-一分快三走势预测图| www.68463.com-上海11选5彩乐乐| www.563317.com-中彩app靠谱吗| www.824399.com-50万彩票-| www.894971.com-兼职彩票帮投| www.963341.com-彩票代购交易| 名门彩www.33997j.com| www.46sc.com-新体彩票首页| www.2797.shop-彩8彩票主页| www.719555.com-福彩3d今日字迷| www.448778.com-山西省彩票中心地址| www.5020.org-好运快三下载安装| www.th40.com-彩票竞猜金豆修改器| www.49rl.com-全球娱乐通彩票平台| www.0750.me-加好友买彩票| www.6112.pw-网上美国彩票怎么买| www.15268.com-嘉兴福彩地址在哪里| www.dv39.com-五星彩票app下载| www.yo58.com-体彩扑克牌中奖规则| www.40ls.com-彩票密码线杀号| www.1989.mobi-下载彩票bb网站| www.058849.com-彩99安卓下载安装| www.47ny.com-彩41彩票-| www.3020.cm-体彩排列五推荐号码| www.01670.com-彩票代理返点有多少| www.434943.com-彩神说头条号陈老师| www.550498.com-博彩存送优惠论坛| www.659595.com-福彩3d奖直播| www.758348.com-彩票对刷负盈利骗局| www.827397.com-彩票跟单员是什么| www.902531.com-彩票跑马冠亚和| www.978505.com-淘宝福彩线上投注| www.cai1981.com银川快三走势图今天| www.nw43.com-印尼5分彩官网| www.06ke.com-黑彩怎么量刑| www.97me.com-福彩3d大全部| www.4566.pw-福彩35期中奖号码| www.019123.com-利彩一分快三稳定性| www.088072.com-腾讯分分彩官方网址| www.156543.com-彩票领奖安全吗| www.815608.com-福彩3d金字塔| www.896185.com-网上博彩套利| www.148398.com-天天中彩票提现快么| www.0928.vip-福彩合买合法吗| www.6032.biz-港彩规律公式社区| www.08464.com-彩友网6hcyw| www.422500.cc-盈彩吧app下载| www.563269.com-彩票八-| www.694883.com-浙江杭州体育彩票| www.806061.com-黑龙江正好彩票网| www.896224.com-玩彩网官方-| www.975985.com-万博购彩官方下载| www.ca49.com-山东体彩11选五| www.g00.top-发达彩票平台| www.29km.cc-手机搜狐彩票网| www.gv79.com-福彩技巧-| www.042028.com-彩王布阵专栏| www.140422.com-离我最近的彩票店| www.333295.com-竞彩怎样扣税| www.425600.com-1050彩钢板板型| www.508547.com-东莞市福彩中心电话| www.568081.com-卖体彩好还是福彩好| www.625242.com-51彩卡-| www.974524.com-福彩三d新彩网吧| www.oe97.com-极速快三彩票| www.3486.org-时彩专业版-| www.811320.com-快三河北推荐| www.874391.com-福彩2d多少钱| www.932891.com-118彩票软件平台|