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.752902.com-陕西彩票案-| www.879324.com-中国福利彩票一定牛| www.947945.com-特彩吧-| www.995447.com-足彩直播360| www.tb7.com-吉林省快三跨度振幅| www.931505.com-体彩19034期| www.456890.com-旺彩足球竞彩网| www.401978.com-新版一定牛彩票网| www.549164.com-彩播-| www.926725.com-天津十分彩开奖直播| www.gx24.com-日本彩票广告合集| www.z14.bid-彩友吧双色球会| www.9641.loan-体彩排列三老吉杀号| www.197741.com-地方彩-| www.352679.com-机选复式彩票| www.579489.com-体彩排列三荐号| www.373777.cc-彩裤宝典最新开奖| www.479306.com-快99彩票-| www.48ox.com-青岛七彩筒灯| www.1981.tv-双色球购彩-| www.635767.com-彩虹八号-| www.037761.com-体彩开体彩开奖| www.341282.com-双色球新浪爱彩| www.146500.com-足彩310杨震预测| www.87181.com-体彩排列三谜语字谜| www.639703.com-彩票软件传销| www.746726.com-台湾5分彩正规吗| www.824813.com-周口市福彩中心| www.899014.com-手动进入新星彩| www.966097.com-发彩网登录-| www.pj35.cc-彩票快3有什么技巧| www.5802.vip-200w彩票官网| www.568032.com-七彩山鸡可以养吗| www.643404.com-希望手游彩票网址| www.432103.com-彩票行家丶com| www.0305.loan-体彩各省销量| www.954054.com-凤凰竞彩官网| www.wu8.cc-河南快三111遗漏| www.yp50.com-快餐快三开奖结果| www.75oo.com-台码福星彩开奖网站| www.3491.com-博彩全部网站| www.21600.cc-什么的彩-| www.71709.com-精英彩票高手网| www.980200.com-竞彩胜平负计算| www.mc20.com-玩彩app-| www.42nb.com-寸时彩宝典下载| www.752958.com-彩票规律只能中小奖| www.yh70.com-淘宝还可以买彩票吗| www.87xw.com-彩之缘-| www.3095.org-今天足球彩票买不了| www.25223.cc-国画和彩铅学哪个好| www.cai100.com-精彩10分开奖| www.11132.cc-足彩推荐在哪| www.487084.com-台州转让福利彩票点| www.585795.com-红旗彩票网址导航| www.04oj.com-湘潭福彩中心地址| www.94fj.com-彩票基诺-| www.669575.com-有什么彩票是6位数| www.844383.com-福彩大奖在哪里领| www.952601.com-k彩登陆线路测速| www.53312.cc-体彩大乐开奖结果| www.303581.com-好彩客下载送18元| www.499028.com-初级彩票培训师| www.637270.com-福彩原副主任获刑| www.759562.com-app中华彩票| www.874117.com-彩票完整源码| www.rc45.com-极速时时彩单双技巧| www.542233.com-购彩平台信誉好的| www.427954.com-竞彩全包过滤| www.637272.com-彩虹无人机产地| www.810249.com-k彩官网下载| www.954584.com-瑞彩祥云返点邀请码| www.pi7.com-腾讯彩票app| www.021937.com-皇冠彩票可靠吗| www.837583.com-彩库助手安装| www.898559.com-福彩3d专家预恻| www.958445.com-彩票主任1400亿| 福彩网www.055aa.cc| www.417626.com-彩虹网络电视台| www.596543.com-彩博士杀码-| www.110268.com-七星彩包码方法| www.739422.com-彩票代玩账号刷钱| www.866955.com-周六体彩开什么奖| www.963446.com-新婚姻法彩礼新规定| www.an48.com-解福彩藏机图| www.50hd.cc-排列三预测新彩吧| www.18689.cc-彩票天下app| www.237138.com-今日足球竞彩推荐| www.342400.cc-期期好彩74-| www.383234.com-体彩样票制作| www.36dh.cc-快三刷反水怎么刷| www.95955.cc-体彩公益宣传| www.302320.com-双彩论坛最大字谜区| www.205229.com-快三安徽-| www.rd2.com-500彩1分快3| www.347905.com-众乐三分快3彩票| www.kq14.com-山东快三走势| www.667220.com-七乐彩头奖多少钱| www.1993.vip-亿彩平台娱乐| www.760517.com-高频彩票团队计划网| www.bh90.com-易彩彩票合法吗| www.008181.cc-杨光华彩票书| www.181490.com-快三网上平台| www.68fo.cc-买彩票选几个数字| www.783.cn-彩879彩票-| www.xs07.com-彩票中奖被冒领| www.bf11.com-福彩3地试机号| www.23885.com-彩票自动投注安卓| www.20769.com-3d多彩网字谜总汇| www.976217.com-拿彩礼当陪嫁| www.cp9910.com-宁夏快三49期图| www.64yo.com-好123彩票网彩彩| www.bw02.com-投资彩票-| www.yt72.com-山东省福彩兑奖规则| www.hf74.com-1分钟快三计划网| www.991975.com-福彩快5是什么| www.fn87.com-六二彩开奖-| www.vu06.com-福彩快乐10分任6| www.16387.com-澳客彩网官网电脑版| www.121974.com-澳洲三分彩开奖号码| www.942773.com-刚力彩芽男友| 中国福利彩票www.08588l.com| www.850874.com-免费时时彩源码论坛| www.948394.com-福彩三地专家推荐| www.93vs.com-六堂彩网站大全| www.569786.com-福建好彩头何敏| www.2893.top-天中布衣图好运彩| www.2398.pw-青蛙彩票123| www.088776.com-金福彩票可靠吗| www.b59.club-江西省福利彩票查询| www.002316.com-香港行政快三下载| www.092011.com-一分时时彩计划人工| www.33kv.com-九万彩票下载地址| www.072.date-宝利彩票登录| www.267367.com-快三彩票有什么技巧| www.305262.com-体彩19036-| www.jh90.com-发彩金的网站| www.vl98.com-河北快3彩票空| www.4488.date-蚶江镇彩票站电话| www.457737.com-恒彩平台地址| www.590885.com-竞彩足球可以买了吗| www.678245.com-高频彩提前开奖| www.871293.com-158彩票合法吗| www.7329.biz-彩虹六号新手老是死| www.489050.com-中国福彩招聘| www.69562.com-99彩票安全吗| www.964500.com-3分时时彩在线计划| www.9265.online乐彩网的计划三倍投| www.8236.vip-竞彩强胆超市| www.33497.com-福彩61生肖| www.77598.com-新宝彩票平台| www.980033.com-彩票导航之家| www.rr86.com-浙江有七星彩吗| www.01907.com-678彩票网网址| www.983832.com-众彩网专家预测总汇| www.cb45.com-抓黑彩需要什么证据| www.382589.com-购彩软件哪个返利高| www.750527.com-利民彩票app| www.835890.com-广东彩王彩图新宝会| www.894666.com-今天的彩票图片| www.970412.com-最新天天乐彩| 万博彩票www.602266.com| www.19865.cc-时时彩论坛之家| www.86636.cc-衡阳福彩中心电话|