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天

知道了
彩01彩票 www.860217.com-奥客彩票wan| 13e彩票www.812870.com| www.ro86.com-体彩大乐透深圳中奖| www.63xm.com-足彩奖金封顶吗| www.4022.cm-海南博彩公司| www.26955.cc-七星彩多钱一注| www.735073.com-专家说彩李迎| www.845613.com-体彩竞彩比赛时间| www.998190.com-神州分分彩计划软件| www.385290.com-今日竞彩误差排行| www.721400.com-快三江苏走势图| www.817608.com-快三自动计划软件| www.904000.com-快三直选中两个| www.974787.com-南国体彩七彩论坛| www.tk38.com-大乐透开奖彩票网| www.553525.com-福彩开奖近20期| www.779762.com-福彩3d布衣图纸| www.964143.com-快三选号秘诀| www.4500.vip-彩票全国开奖3b试| www.356742.com-员工年终奖彩票中奖| www.523644.com-十分彩是什么意思| www.660073.com-七星彩周易梦册查码| www.131055.com-湖南结婚彩礼一览表| www.336738.com-天天彩选四上海开奖| www.029575.com-彩摘布衣天下好彩网| www.11944.cc-口袋彩店官网| www.046169.com-彩51彩票靠谱吗| www.237315.com-彩票倍投好不好| www.388737.com-天天彩选4中奖金额| www.723790.com-每天买彩票的人| www.199463.com-彩票开奖预测今天| www.379340.com-电子彩票原理| www.568666.com-万彩彩票app下载| www.760900.com-广东福彩好彩3| www.880150.com-福彩3d杀码图库| 大赢家彩票网www.83033i.com| www.74un.com-105彩票中奖福地| www.192471.com-江苏快三技巧规律| www.459342.com-蓝精灵彩报今天图a| www.818504.com-福利彩票真实吗| www.929218.com-玩彩網-| www.57858.cc-彩票漏洞软件| www.397854.com-昆明彩票店转让| www.530516.com-时时彩前一选号技巧| www.659430.com-七星彩票试机号直选| www.wo14.com-人人中彩票小福仙| www.49hd.com-彩友人工计划| www.3686.vip-彩色复印机出租| www.22448.cc-时时彩五星缩水软件| 亚投彩票www.ya909.com| www.79611.com-尼彩手机n5-| www.397422.com-七星彩春节休市| www.641.cm-福彩3d看组三| www.8093.cn-10大博彩公司排名| www.43455.com-七星彩历史开奖记录| www.97686.cc-nba每日推荐竞彩| www.789547.com-彩票榜手机版下载| www.879186.com-亿乐彩下载app| www.947053.com-最热门的高频彩票| www.995885.com-竞猜足彩310| www.dc87.com-足彩分析师排行| www.ss47.com-上海快三号码推荐| www.803725.com-广州鸣彩公司收费| www.484244.com-智慧彩平台出租| www.378207.com-幸运彩大发快3下载| www.95310.com-七乐彩买的人那么少| www.353988.com-怎么买彩票一夜暴富| www.095188.com-彩票作假视频| www.977379.com-彩妆店是干嘛的| www.949741.com-中华彩票网网址| 爱购彩票www.493552.com| www.084387.com-即时开彩新版| www.249324.com-什么叫购彩-| www.6176.vip-彩色混凝土地坪| www.17735.com-爱心彩广西快3| www.634599.com-七彩孔雀蓝建盏| www.028975.com-如何研究彩票走势| www.465087.com-山东体彩网彩友吧| www.659824.com-500彩下载软件| www.736225.com-彩票平台自带聊天室| www.yo73.com-开一家彩票店赚钱吗| www.114421.com-下载500彩票软件| www.70250.com-体彩投注站查询| www.635106.com-开奖公告彩票中奖| www.722439.com-体彩专业连线走势图| www.809804.com-955彩票安全吗| www.903740.com-那个彩票合买平台好| www.995104.com-五分彩官网平台| www.im88.com-彩39-| www.21582.cc-吉林快三软件盘| www.47474.com-3d试机号彩经网| www.062608.com-怎么举报黑彩平台| www.145492.com-河南金手指彩票报纸| www.362304.com-七星彩十位百位定胆| www.824232.com-三彩实体店地址| 趣彩彩票www.c177.com| www.73bu.com-新浪彩票手机客户端| www.33148.cc-快三的套路-| www.94577.cc-皇冠足彩官方| www.075363.com-七乐彩除6走势图| www.09ho.com-开彩吧正板资料| www.5515.shop-彩票销售点加盟| www.16887.cc-中国彩票云发购| www.632586.com-快三软件植入病毒| www.637369.com-彩虹5号电池评测| www.257510.com-甘肃省福利彩票| www.743834.com-快三购彩网网站| www.26qt.com-福彩3d大神群| www.678892.com-欧冠足彩在哪买| www.576271.com-湖北体彩兑奖点| www.714400.com-双色球五百彩票网| www.918395.com-重庆彩票中心嘉州| 博亿彩票www.696by.com| www.917051.com-必赢彩票可靠吗| www.402115.com-uk彩网页-| www.195663.com-快三大小单双走势图| www.6623.shop-彩588平台-| www.813695.com-彩票上的条码怎么看| www.902828.com-彩帝彩票客服平台| www.114684.com-xx彩票-| www.250685.com-306官方彩票安卓| www.790.vip-易彩堂骗局-| www.531358.com-博瑞彩票主页| www.612222.com-彩虹蛋糕图片| www.vm84.com-十分快三是谁开的| www.82ht.com-南洋彩开奖现场下载| www.83798.cc-买彩票的软件有哪些| www.089359.com-7168彩票苹果版| www.38yi.com-内蒙快三开奖情况| www.81nn.cc-足彩单场固定规则| www.3339.vip-高频彩开奖怎么查询| www.4715.top-彩票中国红的玩法| www.509559.com-牛彩彩票线路导航| www.585365.com-腾讯旗下天天中彩票| www.983376.com-彩票c66软件| www.ms55.com-掌中彩官网可靠吗| www.427799.com-下载个彩票双色球| www.555468.com-竞彩上市-| www.618867.com-五一彩票站放假吗| www.1383.in-简单水彩花卉图片| www.9040.wang-nba彩票规则| www.32864.com-彩票驿站首页| www.356791.com-足彩赌博-| www.080062.com-专业玩福彩-| www.6472.me-时时彩必赢计划| www.99481.cc-彩票七位数开奖结果| www.057391.com-福彩快三吧-| www.057633.com-彩神帝登录-| www.134336.com-广州哪有好彩烟| www.942899.com-go彩大厅注册| www.989649.com-国民彩票网站| www.pa1.cc-新手怎么买彩票流程| www.rb67.com-湖北快三统计走势图| www.x15.com-学生玩彩票输了几千| www.72fx.com-吉林快三最后一期| www.3752.bid-今天晚上七星彩开奖| www.9805.cm-足彩缩水软件哪个好| www.02vw.com-菲律宾福彩合法化| www.944262.com-聚彩彩票骗局| www.989047.com-福利彩吧下载| www.cai9155.com彩票开奖查洵| www.69405.com-彩霸王玄机网| www.030056.com-秋天彩铅画图片大全| www.313829.com-赢钱彩从哪下载|