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天

知道了
北京快乐8 www.544903.com-足彩翻倍投注法| www.776647.com-如何判断时时彩| www.45542.com-万彩吧万彩吧预测| www.204808.com-合肥快三走势图| www.417237.com-湖北快三多少钱一注| www.033073.com-128彩票的网站| www.293911.com-南京福利彩票| www.693996.com-命中中彩专家专栏| www.19419.cc-发彩网fc8828| www.069335.com-北京福彩网快三| www.172357.com-一分快三怎么玩大小| www.262297.com-中国福利彩票怎么样| www.59372.com-彩铅画漫画人物女孩| www.184499.com-湖北快三形态走势| www.319888.com-百胜快三下载地址| www.807365.com-彩票中5000万| www.971410.com-卖彩票赚钱吗| www.lq05.com-彩经网app苹果| www.6383.in-福彩计划独胆| www.796485.com-9彩票app-| www.681.in-时时彩公司-| www.94798.com-总有人邀请玩彩票的| www.112049.com-竞彩宝安全吗| www.749912.com-3d双彩论坛试机号| www.xw36.com-彩票01软件-| www.3684.vip-竞彩足球手机彩票网| www.278863.com-大发云彩票骗局| www.366806.com-吉林快三不输方法| www.334455.cc-搏大彩票-| www.110106.com-广东彩票快乐十分| www.667658.com-彩票害人视频| www.747483.com-彩易科思和那个购彩| www.831063.com-好彩萝卜糕-| www.928087.com-七星彩19032期| www.985283.com-福彩三d赵公明| www.kx0.cc-河南省快三走势图| www.1190.me-七天彩是违法的吗| www.869791.com-3d福彩唯彩会| www.52158.cc-彩票资讯双色球| www.934858.com-快彩软件-| E彩堂www.43818a.com| www.eo74.com-快三投注论坛| www.wz14.com-青海快三规律| www.632260.com-买彩票中奖视频| www.642881.com-彩票中头奖怎么办| www.738872.com-微信合买彩票靠谱吗| www.na.com-快三赚钱方法| www.uv92.com-3d今天的彩图| www.34ud.com-彩票代购排名前十名| www.625.tv-万豪福彩下载最新版| www.zn88.com-中国竞彩网官方首页| www.77ms.cc-琼海七星彩彩票网| www.2360.com-七彩云南第壹城三期| www.9169.biz-美国福利彩票| www.38368.cc-分分中彩票网| www.88069.com-买彩票哪个平台好| www.fn74.com-足球竞彩500| www.6702.vip-微信彩票竞猜可信吗| www.123312.com-福彩3d秘密通道一| www.78al.com-有没有正规的足彩| www.774754.com-亿元彩票-| www.883588.com-彩票上家是什么意思| 网易彩票www.506951.com| www.388033.com-华彩彩票是真的吗| www.510276.com-彩虹的约定简谱儿歌| www.582389.com-安装e77乐彩登陆| www.927351.com-网上快三客户| www.246793.com-k3福彩官方邀请码| www.502591.com-网上的星际彩合法吗| www.620572.com-手机购买竞彩足球| www.867518.com-福彩3d谜语准确率| www.623582.com-福利彩票6等奖| www.693139.com-竞彩篮球比分直播网| www.171192.com-快三开奖查询江苏| www.270456.com-新彩彩票-| www.360198.com-七星彩手机直播现场| www.456179.com-高频彩票输死人| www.fm80.com-福彩3d跨度30期| www.p16.org-手机什么彩票软件好| www.55lu.com-山西竞彩5800万| www.717331.com-彩铅画简单入门| www.459939.com-彩世界哪里的平台| www.694464.com-竞彩网篮球-| www.944809.com-如意百姓好网彩| www.7869.vip-足彩中奖心得| www.512091.com-彩票个人所得税最高| www.432684.com-福彩时时开奖结果| www.519783.com-时时彩7码推波方案| www.585415.com-彩宝价格是多少| www.650136.com-福彩开奖走势彩宝贝| www.718516.com-彩虹网络用语| www.789756.com-快三到底跟不跟计划| www.866648.com-3d彩票大侠三胆| www.942842.com-go彩app-| www.986843.com-彩票中几个数有奖| www.al33.com-彩票投注计算器| www.sy03.com-体育彩票怎么看懂| www.03wp.com-v8彩票app官网| www.231946.com-湖北快三奖励| www.408004.com-七星彩中奖几率高吗| www.582308.com-网冠彩平台-| www.671082.com-福利彩票开心奖结果| www.770969.com-118彩票网投平台| www.861191.com-广东好彩1在哪买| www.939581.com-代玩彩票帐号赚佣金| 福彩www.2109w.com| www.ib65.com-甘肃快三对子| www.g92.club-彩票预测软件大全| www.341092.com-今天三d彩民乐图| www.300071.cc-快三表格数据分析| www.16252.com-爱彩彩种-| www.352867.com-热购彩票违法| www.525321.com-今曰彩票开奖时间| www.613.biz-时时彩论坛九码公式| www.987256.com-天空彩免费料大全| www.ip94.com-亚洲体彩app| www.597375.com-欢乐快三走势图| www.659342.com-权威彩票-| www.59.cc-永安彩票是干嘛的| www.vb08.com-三d彩吧图库第一版| www.01mv.com-生涯彩虹图理解| www.823022.com-58福彩官网-| www.957514.com-大发ok彩票-| www.cp6355.com-体彩app-| www.78581.cc-苏州南站到新昌双彩| www.101542.com-新彩华章和新华网| www.3197.cc-吉林快三窍门| www.226039.com-福建福彩网站| www.131946.com-山东省彩礼排名| www.231795.com-什么软件可以买彩票| www.376349.com-安徽彩票兑奖| www.569850.com-陕西福彩二十选八| www.842726.com-金博时时彩-| www.910391.com-竞彩篮球预测| www.984863.com-三宝生活体彩屋注册| www.hy08.com-三的走势图今天福彩| www.2rm.com-彩票879靠谱吗| www.846196.com-福彩群英会计划软件| www.22937.cc-《中彩那天》原文| www.326268.com-彩宝彩票有安卓版| www.015907.com-49彩票集团怎么样| www.896464.com-华夏彩票登录地址| www.cai9855.com精彩十分开奖号码| www.e40.bid-湖北福彩双色球论坛| www.53727.com-时时彩单式做号视频| 500彩票www.514377.com| www.1606.top-481彩开奖-| www.324428.com-福彩开奖造假| www.386356.com-玩运彩即时比分直播| www.0491.xyz-万彩吧彩票网站| www.847744.com-山东菏泽结婚彩礼| www.gs1.com-优彩社区网站首页| www.06258.com-福彩3d吉祥二宝| www.748.mobi-时时彩2星直选| www.cp6578.com-浙江体彩网一官网| www.34ra.com-南通伊彩风尚| www.966129.com-福彩双色球中奖查询| www.253795.com-好运彩快三下载| www.015579.com-七星彩012-| www.799875.com-福彩开奖结果是什么| www.933056.com-惠民彩票官网下载| www.59661.cc-评论赢彩彩票| www.056067.com-香港十二生肖彩票| www.356734.com-做彩票行业-|