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.ap9.com-3d走势图百度乐彩| www.990403.com-梦见买彩票数字| www.jh18.com-重庆时时彩回血上岸| www.15iv.com-河北福彩快三中奖| www.574280.cc-大星彩票综合走势| www.366727.com-众彩极速赛车破解版| www.936321.com-福彩双色球客服电话| www.16223.cc-快三必中两码组合| www.zy.cc-中国体育彩票中彩网| www.118809.com-购彩网邀请码是什么| www.487700.com-佛山福利彩票加盟| www.793071.com-忻州福彩中心地址| www.aw01.com-上海快三爱乐彩| www.132376.com-河南彩礼钱多少合适| www.608255.com-3d新彩吧字迷总汇| www.65615.com-彩票中奖在线生成| www.092995.com-彩色沥青砼价格| www.261395.com-官方九九彩票| www.957.date-彩票如何玩法| www.254471.com-快三两不同号技巧| www.rw5.cc-福彩三d全图| www.105216.com-足球竞彩官网| www.225853.com-浙江12选5快乐彩| www.884830.com-高频彩票经验| www.2151.win-中国有哪些彩票| www.767015.com-快三方案-| www.xr24.com-彩票35期开奖结果| www.zb52.com-快3送彩金-| www.993690.com-彩票靠谱计划| www.8500.pro-彩票平台bug破解| www.jg63.com-8亿彩票登录| www.62892.cc-500万彩票网合买| www.98ld.com-彩票套利会被风控吗| www.695107.com-金誉彩票网pk10| www.943009.com-手机众彩网app| 彩票宝www.6cpb.com| www.8457.cn-为内蒙古喝彩| 网易彩票www.080wy.com| www.333818.com-体彩怎么玩法介绍| www.886380.com-好运来时时彩网页版| www.24bq.com-50彩票平台-| www.2003.hk-4567彩票首页| www.223040.com-快三计划群骗局| www.00sl.com-易赢彩票平台可靠吗| www.626448.com-盱眙中彩票一等奖| www.710859.com-新浪篮彩-| www.785889.com-彩票数据专业分析| www.873184.com-彩票胆拖好吗| www.948011.com-双色球中彩网一擂台| 亿万彩票www.508869.com| www.ho49.com-网上彩票怎么赚钱| www.zs83.com-七彩视界官网| www.213845.com-彩神苹果版-| www.345528.com-彩票真能中奖吗| www.222386.com-福彩十分钟开奖规则| www.913344.com-彩客网彩票下载| www.995064.com-彩部首-| www.ek16.com-布衣彩吧图库| www.ty85.cc-彩票如何追长龙| www.10jf.com-时时彩独胆高手| www.74ky.com-时时彩后三包胆买法| www.0837.bid-网易彩票不能买了| www.21ll.com-足彩软件推荐| www.96pi.com-彩排拼音和近义词| www.3310.cc-春秋彩票官网登陆| www.9632.cn-排列三预测彩宝贝| www.36581.cc-香港澳门彩票叫什么| www.593155.com-彩虹无人机重量| www.689658.com-九亿彩票网站| www.769224.com-好彩跟老师翻倍投| www.30235.com-网友高频彩骗局| www.360934.com-怎么戒掉时时彩| www.955344.com-85彩票app下载| www.io8.com-江苏体彩e球彩开奖| www.963357.com-七乐彩31有奖吗| www.cp061.com-福彩快3app-| www.1998.love-福彩出的什么号码| www.095652.com-足球竞猜彩票| www.210998.com-合肥福彩快三| www.330772.com-买时时彩哪个平台好| www.410649.com-体彩怎样算中奖| www.92448.com-727精彩彩票首页| www.086835.com-彩福软件-| www.150508.com-彩票开奖机器多少钱| www.258544.com-大发快三计划免费版| www.5ou.com-足彩奖金扣税| www.794700.com-浙江福彩快乐十三| www.892452.com-雅玛彩票游戏| www.962414.com-福利彩票怎样选号| www.qh.cc-快三一直赚钱| www.pp22.com-668彩票网app| www.339771.com-彩吧图库一版一彩| 500彩票www.942677.com| www.2682.vip-福彩15选5彩宝网| www.399622.com-京彩e账户怎么激活| www.500138.com-彩票能打100倍吗| www.567220.com-彩票网站维护骗术| 易彩网www.12455z.com| www.pt20.com-佳缘网全是彩票托| www.34883.com-快三守号-| www.91884.com-一举成名赢彩知| www.173203.com-江苏快三下载| www.237297.com-嘉兴体彩网络申请| www.308750.com-众彩网唐儿-| www.906920.com-极速快三稳赢技巧| www.962888.com-中彩娱乐应用下载| 福彩网www.055t.cc| www.17983.com-竞彩足球彩票兑奖| www.50053.com-易中快三安卓版| www.033501.com-乐彩网3d之佳首页| www.zh36.com-双彩论坛官网手机版| www.204242.com-买国外足彩算赌博吗| www.fq50.com-兼职玩快三-| www.96136.com-十堰彩票中奖| www.69sc.com-彩票至尊宝典破解版| www.376723.com-iso七星彩软件| www.372260.com-中彩网3d跨度| www.470289.com-买足彩属于赌博吗| www.93393.cc-安徽快三走势图一| www.058521.com-全民彩票网页版| www.135178.com-香港版挂牌牛蛙彩票| www.229413.com-大发快三彩票合法吗| www.421907.com-博友彩有规律吗| www.505978.com-彩票杀人-| www.568908.com-诺亚国际彩票| www.623666.cc-彩票挂机方案是什么| www.683583.com-手机体育彩票app| www.187.net-唯美古风手绘彩铅画| www.3607.cn-福彩3d原创南方网| www.9444.wang-华人平台彩票_官网| www.li57.com-中彩彩票邀请码三地| www.02vh.com-彩虹条头像同性| www.380629.com-彩票今天的开奖号| www.12ek.com-吉林快三改时间了| www.77zo.com-足彩算网赌吗| www.st5.com-上海快三推荐三号| www.249987.com-下载中彩网双色球| www.129954.com-南海七星彩特区论坛| www.311115.com-分分快三买单双技巧| www.418943.com-彩票买5个数的| www.512412.com-1000彩票网-| www.583022.com-彩票站走势图在哪买| www.640048.com-pc福彩-| www.805116.com-河内5分彩走势| www.869229.com-七星彩网上投注| www.941114.com-快乐彩票三登录| www.988515.com-中彩双色球走势图表| www.cr42.com-快三手机软件破解版| www.kh80.com-双色球易彩网| www.081.win-万城彩票合法吗| www.005274.com-go彩是合法的吗| www.52136.cc-海外彩票网站| www.658937.com-七星彩最神奇连号| www.007564.com-体育彩票排开奖结果| www.133715.com-36好彩一预测| www.9163.xyz-新加坡彩票如何买| www.41652.com-彩票2元网软件下载| www.80061.com-彩吧图迷第044期| www.wy70.com-今天七星彩现场直播| www.586914.com-正规的竞彩-| www.832333.com-七彩世界下载| www.958606.com-今天开七彩-| www.tt3.com-七彩奖开奖结果| www.6je.com-腾讯分分彩助赢分析|