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.807731.com-彩票排列3机选一注| www.18ke.com-福彩天天-| www.716577.com-无基础彩铅画| www.857419.com-彩票视频-| www.965611.com-博亚彩票公司合法吗| www.pg4.com-开门彩-| www.40sj.com-足球竞彩胜平负技巧| www.9281.shop-微信聊天叫玩福乐彩| www.12nd.cc-胜负彩二等奖怎么算| www.3800.tv-好彩开门入什么意思| www.01808.cc-彩虹六号搞笑名字| www.279672.com-时时彩计算原理| www.369155.com-彩票中奖名单身份证| www.494178.com-多乐彩网上-| www.599962.com-一直买一注彩票| www.684616.com-中福快开彩票| www.773791.com-体育彩票的官网地址| www.867836.com-七星彩重复中奖号码| www.539051.com-什么人容易中彩票| www.6998.bid-学生空间七彩网络| www.tg59.com-数字彩票研究方法| www.ag71.com-123彩票官网下载| www.60866.cc-全国最大彩票论坛| www.071978.com-竞彩服务器-| www.253828.com-青海快三遗漏号| www.78271.com-山西福彩3d走| www.381181.com-彩票复式中奖查询| www.698385.com-6十1彩票-| www.806550.com-八马彩票下载安装| www.900091.cc-288彩票官方网| www.976254.com-广西结婚彩礼多少| www.cp6536.com-江苏e球彩开奖| www.638787.com-福彩公益语言| www.780056.com-5d彩色打印机| www.et62.com-k彩福-| www.wg83.com-河北快三统计图| www.630778.com-体育彩票顶呱刮窍门| www.772875.com-吉祥大气的彩票群名| www.79cx.com-中国体彩体了大彩图| www.664374.com-兴博彩票qq群| www.954628.com-境外彩票合法吗| www.9qp.com-世界杯足彩网| www.570159.com-好彩二公式-| www.09181.com-七天彩分分快三| www.87998.cc-彩民网彩票资料大全| www.424731.com-幸运十分彩是哪里的| www.301251.com-58彩票app-| 杏彩www.00840p.com| www.150267.com-南昌体彩中心| www.27zk.com-快三保本打法| www.663737.com-南宁市福彩中心地址| www.774918.com-彩票170com| www.874259.com-彩票平台程序一条龙| www.957248.com-彩吧论坛论坛首页| 福彩www.86267r.com| www.69ic.com-搜狗彩票精准杀号| www.2304.com-辽宁福利彩票| www.gg66.com-彩客网触屏版| www.7ye.cc-香港财神彩神网| www.96by.cc-彩票公司控制亚洲杯| www.5630.top-qq群彩票机器人| www.21vy.com-哪个彩票立送彩金| www.hd6.cc-爱彩乐快3开奖结果| www.630622.com-三地走势图乐彩网| www.26748.com-幸运七星彩预测| www.270544.com-一分快三走势规律图| www.535371.com-5个数的彩票| www.676794.com-幸运快三彩票网| www.38995.com-600w彩票网平台| www.177202.com-快三助手最新版| www.357972.com-天天中彩票的天才猫| www.002293.com-福州彩票定位胆| www.72155.cc-彩猫客服-| www.bk98.com-神州彩票合法吗| www.mh13.com-亚博彩票登录| www.206851.com-靠谱的彩票平台平台| www.632072.com-重庆市彩时彩时间| www.711662.com-100块的彩票| www.786030.com-彩票时时彩遗漏统计| www.869095.com-七星彩万能8码| www.927395.cc-中国体彩直播| www.975073.com-海南七星彩怎么玩法| www.kw53.com-澳门3d彩报-| www.g58.wang-经彩网排列五走势图| www.27xt.com-123彩票和彩6| www.240843.com-北京福彩一定牛| www.631544.com-好彩头的意思| www.709008.com-分分彩同时买大小| www.773861.com-博彩官方彩票网| www.835678.com-彩在线计划-| www.950741.com-一分快三稳赚技巧| www.067375.com-怎么举报卖私彩的| www.038.date-七星彩开心彩版区| www.776773.com-台湾福彩经典报| www.849656.com-玩分分彩后果| www.920099.com-彩乐乐遗漏数据查询| www.974696.com-复式彩票中奖计算器| www.nb.cc-北京福彩-| www.046503.com-天天彩app-| www.562925.com-吉祥彩票能玩吗| www.674468.com-彩票c66下载| www.770993.com-什么是时时彩龙虎和| www.869716.com-福彩走势图模板| www.947343.com-福彩3d30期基本| www.mp58.com-彩2神争霸-| www.14jt.com-五星电玩城彩金| www.642629.com-七乐彩开奖号几注| www.789337.cc-买竞彩的app| www.914973.com-大发彩票有哪些平台| www.ao01.com-网易购彩163| www.45lt.com-苏州足球彩票店| www.021843.com-彩吧红五3d图库| www.785141.com-迷彩彩票app| www.423666.com-幸运28购彩游戏| www.561162.com-福彩3d布衣2| www.677926.com-福彩网开奖号码| www.853867.com-365彩票能提现吗| www.ms2.cc-安徽快三中奖查询| www.328789.com-青海福彩网官网| www.818200.com-搜狐彩票合法吗| www.11yf.com-腾讯分分彩绝密算法| www.424985.com-宝赢彩票软件破解| www.621133.com-大发时时采彩经验| www.155564.com-海南体育彩票飞鱼| www.sp9.com-长春快三怎么玩稳赚| www.537825.com-白色算不算彩色| www.96uh.com-新天地彩票刘军| www.3791.cn-澳客网竞彩app| www.559804.com-老彩票收藏照片| www.637529.com-体彩六加一中奖规则| www.717533.com-彩铅美术作业| www.791071.com-好彩美版-| www.947923.com-体育彩票的买法| www.986926.com-彩先知网站-| www.mz66.com-彩票代打拿佣金兼职| www.76747.com-足球竞彩赛事直播| www.931415.com-彩多多app下载| www.gi36.com-福彩快3官方平台| www.zc82.com-体彩排列五网上购买| www.995.live-彩票是选几个数字| www.029027.com-全球彩票官网| www.113266.com-各彩票奖金是多少| www.437234.com-今日老猫看彩3d| www.037308.com-福彩遗漏数据彩经网| www.811390.com-十六号体彩中奖号码| www.931576.com-湖北体彩论坛| www.025957.com-全球彩票九州彩票| www.477433.com-新粤彩报免费资料区| www.571781.com-江苏快三基本显示图| www.633658.com-河南福彩22规则| www.697744.com-大赢家彩票是真的吗| www.760146.com-六福彩票官方代理| www.972521.com-水溶性彩铅画星空鹿| www.307622.com-快三彩票跨度怎么算| www.qi93.com-好彩1几点截止投注| www.899024.com-江苏福彩6十1| 博亿彩票www.622by.com| www.jc92.com-福利彩票手机客户端| www.40kt.com-七星彩在哪里购买| www.971166.com-彩票如何选号规律| www.yr31.com-体彩乐三玩法介绍| www.65vu.com-乐彩城平台网址| www.74qq.com-福利彩票图谜| www.1546.vip-体彩自助投注机|