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.796110.com-买福彩有技巧吗| www.179629.com-湖湖北快三走势| www.175626.com-快三免费计划推荐码| www.3656.pw-奥客竞彩手机版| www.091998.com-体彩手游彩官方网站| www.182132.com-038彩票骗局| www.567895.cc-体彩几个号码| www.223616.com-福彩网是骗局吗| www.200912.com-福彩3d谜语-| www.186538.com-十分钟彩票-| www.568062.com-时时彩广告语大全集| www.41qw.com-冠军彩票手机版下载| www.417543.com-彩虹太阳能无人机| www.2308.cm-好彩娱乐时时彩| www.105.in-越南河内五分彩| www.080812.com-奇门测彩取消法| www.175706.com-大发快三彩票走势图| www.266191.com-安徽快三输了| www.31948.com-易彩堂是真的彩票吗| www.99793.com-体育彩票北京单场| www.333500.com-体育彩票7位数说明| www.0846.top-双色球彩票手机端| www.399138.com-306彩票注册网址| www.639689.com-520彩金项链| www.758669.com-长春彩益-| www.05129.com-彩经网缩水过滤工具| www.7050.biz-分分彩后三独胆| www.184409.com-全天北京快三计划网| www.291888.com-快三豹子一注多少钱| www.383156.com-16号彩票开奖结果| www.968373.com-体彩公益金分配| www.tm76.com-玩彩老头独胆| www.145678.cc-彩神500官网| www.0085.loan-福利彩票都有啥| www.556547.com-最牛七乐彩选号汇总| www.669603.com-福彩体彩都有什么| www.403369.com-体彩大乐透主任是谁| www.55809.com-七乐彩2胆11拖| www.833560.com-足彩官方app| www.970816.com-福利彩票上海快三| www.e35.cm-机选彩票中奖率高吗| www.18158.com-完整版足球竞彩比分| www.70633.com-一品彩票网app| www.884424.com-五行数字和彩票| www.547953.com-金沙时时彩-| www.055859.com-体育彩票有四位数字| www.502111.cc-093彩票安全吗| www.592180.com-最好的彩票软件| www.676969.com-万彩国际彩票可靠吗| www.122805.com-天天彩票是合法的吗| www.598839.com-福彩3d怎么买中| www.703338.com-正版福利彩票| www.020420.com-86彩票人工计划网| www.va86.com-幸运彩幸运二任选| www.221008.com-手机中彩网试机号| www.401928.com-内蒙古的快三开奖号| www.311015.com-釉中彩餐具的危害| www.420073.com-体育彩票门店装修| www.4504.win-竞彩任九玩法| www.373367.com-红星彩票平台| www.491090.com-凤彩网170-| www.006828.com-彩金宏辉游戏机厂家| www.122990.com-福彩公益金项目调整| www.435448.com-中国体育彩票打电话| www.66989.cc-福利彩票领取流程| www.128435.com-广西福彩开奖号码表| 天天彩票www.1035e.com| www.276332.com-快三骗局怎么举报| www.853798.com-分分彩倍投计划表| www.363185.com-羽泉彩虹歌曲mv| www.119751.com-开彩传媒是骗局| www.216851.com-内蒙古快三遗漏号码| www.315499.com-八面通七彩国际影城| www.394491.com-福利彩票么时候开奖| www.520125.com-爱投彩票网投可靠吗| www.618906.com-足彩培训师报名条件| www.714342.com-中彩网福彩3d跨度| www.860157.com-时时中彩票登录| www.6491.com-彩票怎么扫码中宝马| www.900706.com-中国福利彩票排列五| www.30qe.com-分分彩在哪里开奖| www.62.win-官方高频彩开奖号码| www.82sx.com-竞彩之家注册吧| www.226801.com-创彩网是合法的吗| www.755363.com-七星彩专家小凤仙| www.941868.com-彩票通彩票-| 凤凰彩票www.3479s.com| www.363819.com-快三解锁计划软件| www.507953.com-久久彩票登录不上| www.593322.com-体彩数字遗漏| www.682892.com-彩票上的x-| www.76568.com-陈赫包贝尔中彩票| www.166164.com-时时彩胆拖投注规则| www.579322.com-燕照风采福利彩票| www.716228.com-超级七星彩助手| www.789948.com-炫彩摄影沙龙| www.876874.com-七乐彩所有开史历史| www.949166.com-福彩3d和值图走势| 幸运彩票www.73166a.com| www.90iq.com-福彩3d复式如何买| www.5017.vip-k8彩票在线-| www.41329.com-竞彩发布平台| www.04ut.com-中国足球500竞彩| www.98yj.com-彩票买合平台| www.324802.com-游客在国外买彩票| www.444368.com-台湾福彩-| www.020105.com-特彩吧天下彩费资料| www.808089.com-万优彩票安全吗| www.21tg.com-福利彩票的口号是| www.1804.cm-无需本金的彩票| www.9232.online500百姓彩票网| www.51700.com-天津时时彩开奖号码| www.1756.com-鸿彩江苏快3| www.396551.com-漫画彩虹-| www.526735.com-时时彩五星追号方法| www.77ev.com-彩票软件一分钱彩票| www.3789.in-3d预测彩经网| www.560578.com-澳洲三分彩全天计划| www.890554.com-中彩网统计图表| www.cp818.com-快彩下载安装| www.m48.top-福彩网圈套-| www.0337.net-福州福彩领奖地址| www.28111.com-福彩1d中了多少钱| www.7687.top-彩票中头奖怎么办| www.91659.cc-好彩中免香烟| www.073199.com-全民快三网址谁知道| www.181653.com-北京快三推荐号一定| www.nu31.com-福彩快三算赌博吗| www.9qt.com-怎么买体育彩票流程| www.84qw.com-中彩在线贺文简历| www.051813.com-安徽快三有多少组| www.018439.com-彩票高賠率平台| www.199966.com-甘肃快三遗漏官方| www.272779.com-今日新鲜事彩票3d| www.345673.com-彩漫福利本子| 500彩票www.330892.com| www.sj21.com-最新彩票中奖号码| www.87io.com-买福彩有什么技巧| www.497857.com-金利彩票手机版官网| www.555781.com-星宇购彩能玩吗| www.612009.com-福彩投注站末位淘汰| www.681100.com-网络彩票怎么戒掉| www.760411.com-最稳定的时时彩网址| www.823012.com-日本彩票兑奖流程| www.890564.com-7彩网怎么下载| www.958399.com-鸿运彩票网计划| 500彩票www.602434.com| www.677876.com-湖北福利彩票公众号| www.2116.org-彩票对打套利技巧| www.877307.com-微信凤凰彩票骗局| www.947100.com-百度彩票开奖时间| 幸运彩票网www.33598k.com| 彩天下www.c1336.com| www.hw91.com-彩票组三什么意思| www.c64.com-百宝彩官-| www.29vz.com-昨天福彩开奖情况| www.97zx.cc-3d彩界九哥赌一胆| www.1899.com-中彩在线会员汪册| www.30un.com-周五那个彩票开奖| www.968.date-七乐彩顺序出号| www.7760.top-体彩专家预测号码| www.859246.com-福彩6加1中奖规则| www.913596.com-彩客竞彩彩票安卓| www.965543.com-彩八彩票苹果版|