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.jo01.com-5亿彩合法吗| www.30hk.cc-91彩虹网-| www.1668.pw-五行预测彩票3d| www.9410.in-非凡网彩票走势图| www.56685.com-速彩网邀请码| www.024175.com-彩票历史开奖大全| www.109958.com-足彩任九开奖| www.191919.cc-福彩三d走势图综合| www.276852.com-青海快三技巧| www.431368.com-凯利方差算足彩概率| www.540470.com-彩票预测有成功的吗| www.662066.com-射阳县城西竞彩足球| www.762459.com-极速时时彩官方下载| www.853296.com-黄鹤楼大彩真假| www.926938.com-红旗彩票手机app| www.990597.com-南京体彩网-| www.ld4.cc-体彩e球彩玩法| www.088357.com-北京市体育彩票网站| www.614587.com-三彩正品羽绒服| www.54dk.com-彩吧助手违法吗| www.281757.com-双色球预测新彩网| www.409407.com-万福彩票官网| www.523130.com-网网易彩票网| www.626597.com-江苏快三杀一码| www.694904.com-官网最大彩票平台| www.778737.com-彩票负盈利投注方法| www.865910.com-熊猫彩票是真是假| www.930825.com-体彩竞彩比分规则| www.986139.com-杨震最新足彩推荐| www.wz.com-北京快三专家推荐| www.pz89.com-18125体彩-| www.10yz.com-隔热彩钢瓦价格| www.87no.com-天猫彩票下载安装| www.2852.bid-今晚有七星彩吗| www.9209.loan-刷彩票返佣金| www.69751.com-拉萨全民体彩公园| www.033745.com-如意彩票登陆| www.127213.com-彩客网手机旧版| www.208619.com-彩票砍龙是啥意思| www.287742.com-足彩合买平台| www.484977.com-福州彩票中奖人多吗| www.568531.com-洛阳七彩云南| www.646991.com-足彩十四场投注技巧| www.785355.com-七星彩跨度振幅度| www.857129.com-彩票通论坛-| www.916688.com-海南私彩老板| www.972951.com-好运来彩票诈骗| www.qr04.com-中国体育彩票理念| www.9cn.com-美国金额最大的彩票| www.72ko.com-新淘彩怎么样| www.1444.net-姐妹彩票-| www.9697.online赢彩网3d开机号| www.53787.com-正彩化妆品-| www.002339.com-梦见七星彩号码中奖| www.075377.com-中山体彩-| www.141214.com-杨哥说彩今天| www.221258.com-助赢彩票-| www.297238.com-怎么看彩票是否中奖| www.370109.com-彩神计划可靠吗| www.470511.com-足彩买不中-| www.555933.com-红彩会登录888| www.629223.com-3d福彩技巧大全| www.702293.com-甘肃快三信用玩法| www.781374.com-微彩吧举报-| www.859277.com-体彩6十l-| www.926243.com-购彩lll软件| www.984182.com-双色球杀号凤彩网| www.zu61.com-汇彩国际平台| www.30ho.com-福彩手机软件正规吗| www.638.tv-天气网首页福彩| www.4745.top-彩票售票员好做吗| www.01283.com-足球500竞彩| www.63731.com-湖北彩票预测网| www.031386.com-迅盈彩票网-| www.109687.com-腾讯分分彩挂机论坛| www.178484.com-中国体育彩票竞彩网| www.253802.com-中国福彩网走势图| www.327722.com-七星彩走势图带联线| www.399051.com-彩视通彩票网| www.583856.com-鼎丰彩票网址| www.657844.com-情人节送彩票| www.757569.com-福建体彩36+选7| www.844228.com-足彩深盘什么意思| www.913228.com-彩客网怎样-| www.974011.com-百年灵黑鸟每天快三| www.vc8.com-七乐彩中奖规则| www.re59.com-中国体育彩票怎么买| www.05oq.com-体彩排列三跨度遗漏| www.75lw.com-被黑彩票坑了| www.1394.in-福利彩票真能中奖吗| www.9253.org-足球彩票的四大优势| www.46520.cc-万豪福利彩票苹果版| www.90636.com-赔率最高彩票平台| www.046169.com-彩51彩票靠谱吗| www.208295.com-快三二同号最大遗漏| www.280234.com-如何戒掉时时彩| www.375447.com-海南福利彩票开奖| www.495317.com-体彩顶呱刮图片| www.566680.com-聚丰彩票电脑版| www.635624.com-有分分彩的论坛吗| www.744040.com-中彩网彩票走势图| www.813584.com-重庆时寸彩开奖| www.883555.com-系统彩票是啥意思| www.975842.com-河南彩礼标准限制| www.cp420.cc-一分快三正规平台| www.lb89.com-下载购彩注册| www.d55.com-彩票11码聪明组合| www.29sk.com-今晚彩票是什么| www.0415.cn-彩乐园彩票怎么样| www.6584.biz-038彩票如何| www.15050.com-香港网站天下彩资料| www.55358.com-返利高的彩票| www.97802.com-时时彩后二做号软件| www.058885.com-nba篮彩竞猜分析| www.181082.com-好彩票app下载| www.246862.com-五百万彩票网手机版| www.315361.com-老建盏有七彩光吗| www.378498.com-时时彩平台大全| www.526183.com-福彩双色球新玩法| www.603571.com-河南省福彩官方网站| www.669826.com-海南定位彩票缩水| www.739500.com-快彩数据专家注册| www.805915.com-江苏体彩排列三| www.875080.com-手机打彩票是什么| www.984189.com-福彩3d凤彩网| www.ae1.com-中国福彩开奖查询| www.mf54.com-好彩官方下载| www.s24.biz-彩票d-| www.41rw.com-福利彩票截止时间| www.160.com-体彩今天出奖结果| www.3203.org-签到送彩金的彩票网| www.8237.org-t27cc开奖彩票| www.26278.com-买大发快三骗局| www.66035.com-时时彩机器人价格| www.083356.com-七乐彩13-| www.137712.com-福彩3d计算神器| www.206109.com-韩国快三哪里开奖| www.269633.com-世界彩票大奖排行榜| www.379238.com-河南福彩网3d| www.491471.com-彩裙鱼寿命-| www.558222.com-简笔画彩铅画风景图| www.619073.com-山东体彩兑奖在哪里| www.680670.com-彩中彩怎样才中奖| www.750074.com-彩票app分分彩| www.808375.com-中国体育彩票投注| www.874855.com-拉菲装饰彩票| www.992797.com-足彩推荐论坛哪个好| www.cp784.com-玩快三的app全部| www.jn03.com-腾讯分分彩太可怕了| www.yl32.com-长春彩逸-| www.11je.com-体彩和值最大遗漏值| www.71fg.com-恒彩网址-| www.0335.cc-福利彩票2月8号| www.9070.loan-头彩网手机版| www.37981.cc-体彩app购彩厅| www.77436.com-e乐彩手机登录版| www.021893.com-福彩快三是否合法| www.083046.com-彩票多少钱以上到省| www.134557.com-广西福彩票开奖| www.199642.com-五分彩开奖官方| www.260326.com-彩票赌博输钱| www.319770.com-在51中彩中奖| www.379179.com-nba体彩网站| www.623552.com-宏发快三下载|