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天

知道了
9彩注册 www.32882.com-下载内蒙福彩一| www.511660.com-彩铅画花朵简单| www.667382.com-免费彩票计划网站| www.831523.com-2019竞彩销量| www.973880.com-福彩3d吧图彩谜| www.ly19.com-彩票之家下载| www.89rm.com-老郑个人展示竞彩| www.7625.me-新浪彩合法吗| www.019466.com-福利彩票秘诀| www.1639.top-江苏体彩11-| www.56027.com-快三回血的有吗| www.33kv.com-九万彩票下载地址| www.2004.in-体彩排列三活动| www.01930.com-旺彩网至尊双胆| www.244259.com-竞彩完场比分| www.379971.com-彩票私盘违法| www.536759.com-快开彩票漏洞赚钱| www.639062.com-体彩去哪申请| www.727901.com-鼎盛国际时时彩平台| www.825449.com-广州鸣彩官方网站| www.907873.com-合肥体育彩票店转让| www.981019.com-凤凰彩官方网站| www.nb2.cc-5分快三开奖结果| www.ql75.com-苏州快三什么意思| www.19jm.com-彩仙阁挂机方案加密| www.479.biz-福利彩票刮刮乐玩法| www.5101.net-福利3d开门彩| www.14577.com-虚拟足彩走势图| www.883718.com-今天彩票开奖查询| 500彩票www.401276.com| www.235690.com-快三平台软件下载| www.642234.com-彩票万能码-| www.607518.com-中彩网e5刮乐| www.082883.com-5分钟开一次的彩票| www.93773.cc-五分彩机会群| www.693251.com-辽宁福彩网投注指令| www.848567.com-香港时时彩骗局模式| www.944425.com-体彩彩票骗局| 奔驰彩票www.74972.com| www.10pl.com-时时彩统计表| www.108529.com-速赢彩票是骗局揭秘| www.580217.com-体彩排列五中奖秘诀| www.739070.com-彩神通代理软件| www.857815.com-竞猜足彩比分计算器| www.54yd.com-玉溪体彩中心| www.257269.com-微彩站安卓客户端| www.436497.com-山西体育彩票中心| www.165501.com-福彩中心上班待遇| www.353648.com-彩票的尾号是什么| www.4935.vip-第一彩平台-| www.63721.cc-天价彩礼-| www.503147.com-佳彩印刷厂怎么样| www.666997.com-超级福彩七乐彩| www.813993.com-爱彩人江苏11| www.953397.com-好彩双爆珠香烟味道| www.32199.com-易彩集团会赚钱吗| www.033848.com-凤凰彩票赛车开奖| www.252502.com-体育彩票任五开奖| www.439987.com-体彩排列五小助手| www.828230.com-世界彩票记录| www.v76.tv-怎么分析河内五分彩| www.1582.me-收藏彩票有价值吗| www.108237.com-世界杯足彩网易竞猜| www.267852.com-湖北体彩十一选五| www.1538.vip-尼彩手机在哪买好| www.037518.com-金博彩票网站| www.870645.com-易旺彩票地址| www.987237.com-福利彩票站点查询| www.m02.biz-搜索彩票走势图| www.2176.cc-买彩票输了钱| www.67177.cc-阜阳市彩票兑奖中心| www.105647.com-浙江省体彩六十一| www.239983.com-凤凰生活彩票合法吗| www.363673.com-关于彩虹的说说| www.679721.com-鸿鼎彩票网站| www.879721.com-多乐彩结果查询江西| www.442256.com-结婚彩礼顺口溜五金| www.629948.com-数字三彩票中奖绝技| www.873304.com-全民快三秘籍| 500彩票www.50080y.com| www.9ia.com-体彩七位数中六位| www.45432.com-彩票赚流水钱违法吗| www.522893.com-时时彩经验心得交流| www.788546.com-体彩今天试机号码| www.909940.com-我有没有中彩票的命| 吉祥彩票www.jx68.com| www.ws93.com-微彩店买彩票| www.76ll.com-七乐彩几点-| www.dc4.com-三分快三在哪里玩| www.34717.com-有关买彩票的句子| www.028394.com-博彩彩票站-| www.237891.com-网上大发快三骗局| www.363732.com-规定彩虹几种颜色| www.776817.com-博彩球app-| www.914813.com-福彩v98-| www.990994.com-5分快三开奖查询| www.73ba.com-体彩排列三杀尾杀跨| www.02230.com-福彩复式投注价格表| www.125149.com-彩票选号能随机选吗| www.263307.com-福彩最新字谜| www.375393.com-今晚七星彩直播| www.845954.com-海南私彩合法吗| www.971561.com-网易彩票app官网| www.cp3115.com-彩票端骗局-| www.d96.org-买双色球彩票怎么买| www.919695.com-澳客彩票网官网| www.cai1110.com福彩快三走势图| www.591769.com-大中华彩票品牌| www.829157.com-彩管家5.0-| www.cai813.com-新快三下载-| www.536822.com-福彩3d是国家的吗| www.kw07.com-快三有哪些技巧| www.45620.com-重庆市时彩开奖结果| www.088199.com-福彩快三代玩骗局| www.uj6.cc-下载百宝彩票| www.8ek.com-守号中奖彩民心得| www.45736.com-澳门乐购彩-| www.029937.com-内蒙古体育彩票微信| www.246826.com-上海福彩中心官网| www.364168.com-新浪微博世界杯彩票| www.517527.com-台湾福星彩开奖直播| www.636386.com-彩虹挂在天空| www.773272.com-恒彩彩票可靠吗| www.73599.cc-彩中彩平台下载地址| www.087047.com-为内蒙古喝彩原版| www.185051.com-彩票99-| www.318432.com-快三49期江西| www.461125.com-qq时时彩机器人| www.660971.com-足球胜负彩14场| www.773934.com-彩票要几个数字| www.915899.com-彩票站怎么加盟代理| www.cai1862.com河北快三遗漏统计| www.72yf.com-贵宾室cp彩票| www.7888.pro-中发彩票官方网站| www.174808.com-快三线上平台赚钱吗| www.286320.com-彩界发大财-| www.399111.com-彩票通苹果下载软件| www.543278.com-牛彩网一句定三码| www.672277.com-环彩网是真的吗| www.787959.com-cb8彩宝-| www.930698.com-玩彩票有什么规律| 优点彩票www.139670.com| www.650359.com-好看又简单的水彩画| www.578761.com-体彩星级怎么评定| www.659143.com-体彩19042期| www.751462.com-湖北省福利彩票查询| www.884154.com-彩票攻击软件| www.977325.com-我福利彩票快餐| www.tf8.com-体彩试机号-| www.zu95.com-彩虹5无人机发动机| www.46ao.com-懂球帝可以买竞彩吗| www.411382.com-七彩云南购物陷阱| www.085097.com-彩票星空-| www.180671.com-百盈快三最近| www.274288.com-湖北省快三开| www.457299.com-福彩几号开奖时间| www.566429.com-河南福彩网百度| www.674564.com-英国都有什么彩票| www.786547.com-下载全民赢福彩| www.876592.com-中国公益彩票网预测| www.987284.com-七彩乐下载-| www.ci79.com-极速快三计划走势| www.m85.com-海口彩票网图版下载| www.5867.biz-众彩用户登录|