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.er67.com-彩天下坑人-| www.56ff.com-竟彩胜平负投注| www.1871.me-广东彩民守号中奖| www.15815.cc-少儿卡通狗彩铅画| www.67045.cc-彩票领奖后怎么离开| www.058760.com-水果图彩报第一版| www.157787.com-澳客竞彩必发盈亏| www.258677.com-足球比赛竞彩网| www.345879.com-高频率彩票-| www.445775.com-福彩基诺新玩法| www.554433.com-经典福彩广告语| www.635382.com-七彩假期官网| www.793520.com-骗客买彩票-| www.882801.com-k彩有几年的历史了| www.979217.com-湖北快三多少钱| www.lb9.com-河北快三今天| www.tq14.com-福利彩票站转让| www.14ia.com-中国体育彩票任选9| www.983.date-七星彩推算公式| www.7834.com-彩票开奖提前知道| www.34433.cc-上海福彩网点| www.85922.cc-58福彩官网-| www.051812.com-新加坡快三最新开奖| www.180231.com-福利彩票字谜汇总| www.267018.com-杭州快三开奖结果| www.373221.com-九州体彩-| www.506820.com-研究彩票管用吗| www.587526.com-体彩排三的玩法| www.670339.com-福利彩票3d太湖| www.757726.com-有人带玩彩票靠谱吗| www.887061.com-铭发彩票合法吗| www.977159.com-甘肃省治理高价彩礼| www.iu2.com-澳门快三开奖结果| www.ry09.com-qq快三开奖结果| www.18wj.com-澳门足球彩票手机网| www.512.com-qq群投彩-| www.5202.vip-澜沧彩票中大奖| www.12806.cc-头奖彩票系统恢复| www.63134.com-香港6喝彩开奖结果| www.062726.com-大发快三投注攻略| www.154546.com-博雅彩票真的吗| www.310432.com-吉林省福彩官方网站| www.392993.com-彩铅画竹子图片| www.536318.com-美国的彩票-| www.629408.com-993彩票正规吗| www.706926.com-时时彩平台代玩兼职| www.789519.com-买彩为生-| www.872024.com-2688彩票-| www.978748.com-微信买彩票靠谱吗| www.di2.com-博众时时彩官方网| www.qn37.com-绿好彩多少钱一包| www.13zs.com-好彩特供香烟图片| www.90kz.com-鑫利博彩怎么样| www.3026.vip-体彩今天开奖号码是| www.8972.shop-国彩过滤单怎么买| www.68281.com-手机快三哪个平台好| www.033902.com-乐彩网最新开奖| www.128104.com-温州体彩中心电话| www.210888.cc-快彩网骗局-| www.290128.com-海南四合彩票| www.404180.com-王刚讲故事彩票王| www.518090.com-福利彩票一定牛软件| www.592118.com-独家七星彩小七靓码| www.669563.com-上海彩钢瓦价格| www.753730.com-彩票12靠谱吗| www.884708.com-百度怎么买彩票| www.967011.com-安徽快三输了很多钱| www.cai2199.com快三如何玩-| www.lo06.com-12彩票官方-| www.n90.net-彩票准确极高的公式| www.47ej.com-荣誉彩票官网| www.931.cm-七星彩机选中奖故事| www.5587.vip-所有天天存送彩票网| www.11359.com-易记彩票是什么网站| www.57778.cc-我要中彩票下载| www.079013.com-北京全民彩-| www.145685.com-时时彩概率学长期赢| www.251673.com-中彩吧投注-| www.326200.com-万彩吧c8cn6合| www.397526.com-中国体彩牛材网| www.545096.com-开福彩-| www.632805.com-七彩平台查分| www.706258.com-五分时时彩开奖网址| www.783046.com-福彩11选5开奖号| www.859957.com-彩票平台软件出租| www.929633.com-彩牛彩票安卓| www.984481.com-彩8彩票是正规的吗| www.pb10.com-一分钟快三趋势| www.1an.com-彩宝彩票可信吗| www.61my.com-福彩变腐彩-| www.0349.biz-什么是彩票跨度| www.8328.bid-时时彩号码复式| www.29886.com-天天好彩949cc| www.73929.com-福利彩票直播开奖| www.025373.com-大智慧彩票平台| www.099621.com-赢彩网靠谱吗| www.163700.com-nba体彩玩法| www.303012.com-97彩票下载app| www.373236.com-乐享500万彩票| www.505315.com-350彩票下载| www.575636.com-中国体育彩票唯一| www.646759.com-专业彩民-| www.752555.cc-玩彩票被骗无法提现| www.836213.com-腾讯快开彩兼职| www.907061.com-彩票有几位数字组成| www.970476.com-体育彩排列三开奖号| www.cb5.com-福彩作弊视频| www.og20.com-天津福彩快三开奖| www.48lm.com-海滨时时彩计划| www.810.cm-易彩网合法吗| www.4697.cc-杭州体彩专管员| www.9798.in-七星彩的奖金是多少| www.68738.com-一等奖彩票-| www.026636.com-500彩票包赔任务| www.102215.com-快彩11选5开奖| www.166849.com-北京快3开奖爱彩乐| www.271831.com-中原彩票用户注册| www.356947.com-彩票中的钱怎么办| www.439368.com-福彩25万的游戏厅| www.531342.com-彩99官网登录| www.635092.com-顾乡凯德七彩影城| www.719570.com-手机快乐3彩票下载| www.791726.com-时时彩的网址是多少| www.868221.com-福利彩票摇奖模拟器| www.961282.com-足球竟彩网计算器| 众盈彩票www.77996b.com| www.fu50.com-江苏快三压大小| www.wh12.com-大通彩票手-| www.08rs.com-福利彩票摇奖机| www.74il.com-福利彩票双色球九| www.0890.com-凤凰彩票用户注册| www.9962.cc-2两彩票中4位数| www.51131.cc-手机淘宝双色球彩票| www.89990.com-彩票假中奖生成| www.042647.com-多彩贵州网董事长| www.142427.com-财神彩彩票-| www.213125.com-福利快三app下载| www.277849.com-皇都彩票1分快3| www.377552.com-彩票对联大全集七字| www.491910.com-彩之网互动区手页| www.562069.com-鸿彩主播小雪| www.622820.com-大发快三就计算公式| www.688634.com-牛彩快三如何做规划| www.762152.com-陆慧明竞彩猫app| www.882527.com-彩色画-| www.948853.com-体育彩票有app吗| www.984510.com-8彩是否合法| www.sz3.cc-重庆时时彩手机下注| www.ph54.com-网上买彩票很多| www.5zr.cc-红中彩票娱乐平台| www.55zk.com-超级赛车彩票网站| www.765.live-时时彩大遗漏走势图| www.4399.cx-快三笫一门户| www.9222.net-家彩论坛杀码| www.67556.cc-胜彩娱乐-| www.022217.com-今期彩图片-| www.088026.com-共赢福彩-| www.142642.com-财神彩票可靠吗| www.208591.com-福彩3d布衣图1| www.273518.com-福彩类型-| www.387767.com-天天买彩票买不了| www.502798.com-足彩胆-| www.565903.com-智慧彩票ios| www.623191.com-福彩体排列三走势图|