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.83255.com-彩票加注和加倍| www.841311.com-彩妆蛋使用方法| www.706670.com-幸运5分彩计划| www.805078.com-彩票121首页| www.331016.com-福彩排列七开奖号码| www.428255.com-金手指足彩缩水公式| www.525518.com-时时彩后三组六组三| www.247115.com-快三怎么算和值| www.331090.com-大发彩彩票注册| www.401343.com-七星彩走势表| www.509851.com-上一次彩票中奖号| www.579662.com-彩13官网下载| www.653024.com-大富彩票网全天计划| www.723455.com-官方彩票平台软件| www.798914.com-竞彩足球胜平澳客网| www.875896.com-2彩票网-| www.93ph.com-白底的照片算彩色吗| www.136076.com-太子彩票网站| www.436611.com-巴西安伯快三| www.617501.com-大发快三投诉电话| www.37zw.cc-下载七星彩或规律| www.3553.in-人人中彩票网手机版| www.94051.com-彩色耐磨地坪涂料| www.089211.com-彩票166是官网吗| www.888581.com-大发快三买大出小| www.533225.com-体育七星彩中奖规则| www.770639.com-快3福彩-| www.23tv.com-彩软之家部落| www.954371.com-c59彩票四不像| www.94mi.com-新浪网篮彩-| www.580060.com-云购彩票官网怎玩| www.zz12.com-竞彩多久申请下来| www.525916.com-世界杯买彩票规则| www.741836.com-国彩3串1技巧| www.977689.com-世界杯竞彩推荐| www.vg56.com-重庆时时彩暂停了吗| www.34680.com-众彩网址-| www.032357.com-彩票137网站| www.166013.com-68彩票网是否合法| www.522166.com-分分彩诈骗-| www.675997.com-温州彩礼一般多少钱| www.867111.com-多彩宝app下载| 彩世界www.99788q.com| www.sx0.com-乐彩论坛17500| www.rk63.com-彩之源彩票靠谱吗| www.22jo.com-178彩票可靠吗| www.97al.com-湖北福彩微信二维码| www.830410.com-彩票店主版-| www.906192.com-彩票出租平台| www.981194.com-七彩雪糕-| www.cp8522.com-内蒙古快三百位| www.mh25.com-福彩、快3app| www.p24.me-私彩怎么玩-| www.68xp.com-全球博彩十大| www.1025.org-张小若白映彩| www.6138.bid-淘金彩票聊天室| www.12515.com-彩票票面-| www.34947.com-彩53彩票领跑者| www.98455.cc-三分彩公式-| www.100145.com-8炫彩彩票-| 大赢家彩票www.799243.com| www.94469.com-500w彩票网址| www.057250.com-台湾六星彩-| www.11867.com-6678彩票违法吗| www.js34.cc-王者彩票以什么盈利| www.n88.cc-竞彩交税吗-| www.951124.com-足彩500触屏版| 大富豪www.268177.com| www.jt59.com-福彩河北快三一定牛| www.980734.com-火箭彩票网合法吗| www.kg5.com-江苏快三今日推荐| www.73pd.com-彩票现场开奖直播| www.506303.com-北京体彩申请条件| www.6957.com-时彩玩法技巧之稳赚| www.973904.com-万彩吧更新升级| www.233441.com-福彩3d对子走势图| www.331907.com-大发快三刷流水收益| www.436455.com-云南福彩开奖结果| www.551989.com-星期一有些什么彩票| www.905448.com-彩客体彩任九推荐| www.cai3055.com安徽快三玩法技巧| www.187271.com-新疆福利彩票网| www.356468.com-竞彩分分彩-| www.510194.com-请播放彩虹的约定| www.775125.com-重庆时彩讨论群| www.949660.com-互联网彩票何时解禁| www.lw3.com-大发时时彩预测计划| www.949979.com-豪门娱乐彩票| www.ll.cc-大发快三计划官网| www.095291.com-彩票投注怎么玩| www.090371.com-彩票经常中五块| www.342424.com-好彩频道app| www.945199.com-福建福彩3d的中奖| www.609125.com-七星彩解梦码大全| www.sy69.cc-吉林快三微信群骗局| www.04ci.com-彩库宝典安装不了| www.72dy.cc-足彩容错什么意思| www.1230.top-福利彩票数学3单式| www.8540.vip-时时彩算法软件| www.38792.com-有兼职叫注册中彩网| www.ce79.com-彩票代理怎么拉人| www.89et.com-澳彩鹦鹉-| www.030277.com-快购彩票网会员| www.70kb.com-欢迎来到旺彩游戏| www.6241.cm-三d彩票三毛58期| www.71592.com-不懂彩票怎么买| 大赢家彩票平台www.903212.com| www.tn02.com-彩报第四版-| www.381645.com-35彩票开奖-| www.489008.com-中彩网首页排三| www.190745.com-彩票开奖查询大全| www.729600.com-体彩排列三推荐| www.857091.com-百盈快三的技巧| www.954260.com-大红鹰彩票网站| 500彩票www.904859.com| www.ro66.com-盈彩网ccom-| www.38vn.com-甘肃彩礼-| www.875622.com-猪年彩票顺口溜| 亚投彩票www.ya022.com| www.118.cx-体彩中奖后怎么兑奖| www.5750.cc-体彩七位数投注技巧| www.184088.com-北京快三开到几点钟| www.227752.com-众彩平台网址| www.9607.top-北京赛车是国彩吗| www.34727.com-永盛彩票网靠不靠谱| www.539694.com-中彩票手机客户端| www.32474.com-爱彩彩网app下载| www.531822.com-买彩票第一次会中吗| www.696117.com-足彩计算方法| www.841134.com-买体育彩票-| www.0878.net-买彩票中了1千万| www.60028.cc-u9彩票怎么样| www.676682.com-酷彩吧a-| www.814829.com-中国福利3d彩| www.xo04.com-福彩3d2元网杀号| www.6909.cn-顺丰彩票游戏| www.79361.com-福彩十二选五开奖表| www.118123.cc-海南福彩网-| www.166662.com-快三手机投注平台| www.233966.com-大乐透中彩彩民村| www.21637.cc-彩彩大咖直播| www.162139.com-汇彩网一主页| www.291295.com-快三最佳规律| www.503971.com-福利彩票兑奖查询| www.568073.com-买体彩输了十四万| www.9013.vip-今天竞彩稳胆推介| www.228126.com-江苏快三有规律吗| www.05ky.com-江苏快三显示图| www.24ou.com-手机彩膜制作| www.2870.vip-幸运赛车体彩| www.7764.cm-九度彩票是骗局吗| www.71yg.com-海南七星彩私彩投注| www.818034.com-足彩十四比分直播| www.1951.com-99彩吧开奖结果| www.9080.net-网易体育彩票频道| www.246768.com-凤彩网双色球| www.368777.com-728彩票手机测试| www.480474.com-和彩印是什么| www.94bo.cc-易彩云彩票下载安装| www.7604.xyz-新浪彩票爱彩| www.330780.com-彩票试玩app| www.91ck.com-体彩最新开奖情况| www.920945.com-99彩票总代-| www.454590.com-下截新浪彩票软件|