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.60030.com-彩名堂官方下载| www.076318.com-彩票猜一生肖| www.163148.com-易网彩票怎么下载| www.293526.com-河南福彩百度网| www.377848.com-德州福利彩票店转让| www.551905.com-足彩金手指日报| www.668092.com-博彩招聘-| www.755972.com-3d开奖彩票图片| www.858634.com-刚力彩芽完了| www.936251.cc-中国福彩客服电话| www.999984.com-体彩大乐透资讯| www.ax72.com-江西快三一定牛预测| www.vd02.com-体育彩票开奖时间| www.26kv.com-分分彩定位胆心得| www.0764.xyz-河北彩民中1.2亿| www.8090.pw-六开彩怎么才能赚钱| www.33771.cc-爱乐透彩票小白| www.83681.com-支付宝积分换彩票| www.051655.com-福彩3d投注方法| www.177479.com-福利快三是真的吗| www.261276.com-快三守号计划图表| www.342911.com-京东彩票扫码器| www.439904.com-乐米彩票中大奖后| www.544877.cc-澚淘彩票-| www.682059.com-中密无极彩票软件| www.772946.com-彩68官网下载| www.870884.com-全民快三网页版| www.971442.com-众购彩票网登录网址| www.zl6.cc-河南彩素481| www.tz13.com-福彩屠龙啥意思啊| www.14oz.com-ope彩票下载| www.623.red-中国彩票查询| www.5506.com-像一道彩虹歌词| www.13398.com-快彩走势图-| www.63835.com-下载快彩王-| www.065715.com-彩虹岛w-| www.144001.com-青海福彩公众号| www.228803.com-江苏体彩七位数| www.315269.com-分分彩八码-| www.391146.com-众和彩票骗局| www.620614.com-武汉福彩申请流程| www.698415.com-k彩是骗局揭秘| www.781547.com-多宝彩票开奖结果| www.864813.com-手机彩票送28| www.939090.com-彩票699-| www.998712.com-体彩领导-| www.rj7.cc-正规彩票网-| www.rx79.com-广东快三开奖记录| www.16dp.com-七彩国际彩票| www.174.in-天地彩票平台| www.4048.wang-97彩票网下载| www.9875.biz-汇丰彩票app注册| www.68678.cc-各大彩票一等奖概率| www.032813.com-开奖派彩助手| www.111692.com-福彩游戏帮投是什么| www.187277.com-5分时时彩-| www.265670.com-上海福利快三| www.390956.com-英国幸运5星彩| www.507158.com-重庆高频彩微信| www.582172.com-e乐彩下载平台| www.657639.com-体彩阿盛看胆| www.781377.com-幸运快三qq群骗局| www.850722.com-时时彩斗牛怎么算| www.909094.com-甘肃快三中奖助手| www.973347.com-曾轶可彩虹歌词| www.hs72.com-快三赌博大小单双句| www.a27.top-七乐彩玩法说明| www.32qo.com-我想福利彩票| www.0288.net-彩票业主心得与总结| www.7224.org-彩虹一号-| www.23988.com-彩票双色球怎么买| www.69590.com-福利彩票创始人是谁| www.058661.com-今天银海彩报| www.141238.com-鸿运彩票手机网| www.220361.com-上海快三下载安装| www.298371.com-幸运彩票软件| www.372428.com-彩票大奖购买时间| www.477150.com-福盈门彩票app| www.557796.com-福彩三地走势| www.628196.com-泉州体彩聊天直播室| www.698325.com-彩虹周杰伦在线试听| www.777832.com-购彩网是真的| www.947219.com-美国加州彩票官网| 彩82www.c6321.com| www.ca32.com-武汉快三的走势图| www.ue48.com-78彩票-| www.03mj.com-北京快三加奖了吗| www.72vt.com-彩票中奖猫腻| www.1201.com-全民福彩双色球| www.04297.com-彩票软件上中一等奖| www.48066.com-七乐彩胆拖投注价格| www.93557.cc-竞彩足球对冲赚水钱| www.057509.com-今天福彩三d彩报图| www.175776.com-快三规律破解软件| www.261595.com-广西体彩官网| www.350528.com-彩票11选五怎么玩| www.429883.com-超简单又好看水彩画| www.527995.com-新重庆时时彩遗漏| www.631503.com-丰彩app下载| www.699300.com-3d彩票几点开了| www.775205.com-七星彩怎样看三等奖| www.872230.com-山西体彩在哪儿兑奖| www.954327.com-排三彩票网-| 彩乐乐www.cll168.com| www.cq42.com-彩客网是正规平台吗| www.tr97.com-快三送彩金-| www.02sv.com-世界杯微博竞彩| www.70nd.com-下期彩票中奖号码| www.1180.tv-金彩网原装正版料| www.37966.com-彩61主页-| www.82644.com-直播足彩-| www.030828.com-彩61平台-| www.103566.com-福彩直播开奖视频直| www.168639.com-湖北快三基本走势图| www.296930.com-彩是什么意思| www.365677.com-容易临摹的彩铅名画| www.448333.com-彩票代买平台| www.534142.com-砺儿7乐彩推荐号码| www.650180.com-投彩游戏-| www.730606.com-台北快三是骗局吗| www.801068.com-彩虹店铺-| www.871340.com-陕西快三-| www.954945.com-瑞彩祥云高邀请码| www.996264.com-500彩票北单| www.cp8386.com-新手适合买什么彩票| www.ls91.com-微彩是什么骗局| www.h92.net-49彩票平台靠谱吗| www.33lf.com-体彩几点停售时间| www.0799.date-哪里有买足球彩票| www.7017.vip-七彩官方网-| www.17276.cc-北京福彩下载安装| www.58827.cc-中彩和体育福利彩票| www.026294.com-黑单彩票-| www.096008.com-双色球神彩福牛杀号| www.153663.com-足彩网结果-| www.260054.com-福彩2019027| www.325812.com-彩宝网3d开奖结果| www.388455.com-腾讯彩票全天计划群| www.523135.com-刷彩赚钱靠谱吗| www.599877.com-体彩能打双色球吗| www.665782.com-娱乐彩注册-| www.730692.com-竞彩必发指数| www.795982.com-甘肃的快三开奖结果| www.863557.com-彩票开奖彩宝贝| www.923086.com-彩色透水混凝土路面| www.969330.com-体彩公益金制度| www.lj31.com-中彩啦官网-| www.c90.cn-陕西百宝彩十分钟| www.26fv.com-聚星博彩赛车| www.486.xyz-彩网北单加奖12| www.3662.net-今晚彩票会出什么| www.8389.xyz-足球彩票储备分析师| www.46699.com-彩票机如何连接电视| www.87721.cc-太阳彩票平台是骗局| www.033840.com-凤凰彩世界-| www.129846.com-南国七星体彩论坛| www.194967.com-吉林快三半顺啥意思| www.257105.com-快三app下载苹果| www.318832.com-江西福利彩票推荐号| www.378446.com-c58彩票com-| www.529636.com-台湾今彩539开奖| www.603833.com-足彩怎么玩球详解| www.666177.com-大乐彩怎么回事| www.729406.com-彩票开奖大乐透开了|