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.kb11.com-福利彩票双色球下载| www.57.org-富贵彩软件下载| www.bq79.com-北京快三app下载| www.456731.com-竞彩篮球直播吧| www.143143.com-福彩双色球自己选号| www.369532.com-彩民交流哪个软件好| www.582567.com-重庆分分彩票输惨| www.845946.com-私彩案件-| 万彩网www.wcp8008.com| www.47pu.com-刚力彩芽人气| www.056011.com-快三计算和值技巧| www.61568.com-快三计划数据| www.292922.com-智慧彩客户端| www.489950.com-七乐彩单注最高奖金| www.964981.com-别人代打彩票骗局| www.90987.com-天天中彩吧三地| www.887120.com-22彩票骗局-| www.579484.com-体彩排列三牛彩预测| www.837917.com-唯博彩票官方平台| www.004097.com-福彩动物总动员攻略| www.196026.com-七乐彩开奖结果今天| www.356574.com-买彩票那么多年| www.505942.com-中国彩票引发的案件| www.660526.com-快三大小助手| www.820063.com-乡镇彩票店-| www.935238.com-在传奇彩票输了好多| 网易彩票www.191065.com| www.703733.com-彩票自动选号器| www.882278.com-彩34彩票-| TT彩票www.526170.com| www.0099.cc-彩票店主网名| www.37863.cc-星光彩票注册| www.116416.com-中彩票概率-| www.346862.com-明彩电视官网| www.579866.com-足彩进球彩开奖| www.809366.com-各种彩票中奖率| www.qm40.com-亿博彩票下载安装| www.66wg.cc-杏耀一分彩票| www.kj88.com-王牌彩票赚钱吗| www.185.cm-福彩中奖原理| www.9563.online台湾四星彩開獎记录| www.893257.com-彩名堂计划好用吗| www.234490.com-国家认可彩票app| www.91fd.com-彩27下载-| www.979316.com-福彩票开奖号码| www.822991.com-凤凰彩票有哪些网址| www.977567.com-体彩什么app好| www.245200.cc-福彩快三是不是真的| www.525607.com-重庆福彩幸运农场图| www.638331.com-色彩构成喜怒哀乐| www.778094.com-恒耀购彩官网| www.5754.cc-游戏厅彩票机技巧| www.791489.com-三星级彩票店图片| www.882720.com-易彩是什么-| www.588570.com-七星彩财迷-| 博友彩www.455518.com| www.756356.com-4567彩票代玩| www.865741.com-339彩票网-| www.949208.com-pc28彩票-| 彩票A8www.089e.cc| www.017841.com-如何购双色球彩票| www.549319.com-彩票开奖排五查询| www.317208.com-足彩任九19039| www.9547.cm-彩王争霸彩票| www.120930.com-福建福彩新快三玩法| www.327072.com-澳洲五分彩开奖结果| www.271500.com-好彩1怎么玩| www.166232.com-北京快三走势图| www.048114.com-福彩快三代理怎么做| www.241276.com-彩票彩客网手机版| www.334179.com-彩票网大数据| www.408049.com-结婚彩礼钱相关法律| www.525265.com-彩票福彩秘诀| www.628749.com-网上买彩票能提现吗| www.w05.cc-彩票宣传语录| www.858956.com-体彩48l开奖结果| www.132761.com-中国体育彩票世界杯| www.223701.com-足球e球彩总进球数| www.315365.cc-8彩票app-| www.404042.com-彩礼嫁妆怎么分配| www.526369.com-813彩票-| www.024111.cc-彩迷什么意思| www.132267.com-濮阳县彩礼-| www.225018.com-彩票手机客户端下载| www.331094.com-河北彩票app| www.507667.com-内蒙古七星彩| www.006483.com-体彩可以在线购买| 天天彩票www.205883.com| www.947532.com-福彩王素英图片| www.44vz.com-uc彩票是什么| www.969495.com-酷彩香港官网| www.85cx.com-500彩票怎样挣钱| www.82068.com-广州市福彩中心官网| www.186384.com-快三所有开奖概率| www.682138.com-彩票306是啥| www.966474.com-全球彩靠谱吗| www.nu42.com-快三第一门户是什么| www.3029.com-三d丹东p3彩图| www.060741.com-河南福彩网勇士争先| www.608234.com-三d专家预测新彩吧| www.77253.cc-中国彩票中奖真难| www.870028.com-河北福彩网快三| www.5867.xyz-彩票3d带线走势图| www.901417.com-贵州一分快三软件| www.339118.com-时彩族贴吧-| www.490163.com-北京三分彩规律| www.583969.com-人人中彩票世界杯版| www.672687.com-19035七星彩| www.760270.com-自助即开彩票机加盟| www.863323.com-牛彩网双色球预测| www.444729.com-51彩票全天计划彩| www.606203.com-彩界精英独胆| www.718814.com-彩虹的美好寓意| www.755746.com-购彩网上平台| www.lj0.com-河北快三遗漏查询表| www.8361.shop-七星彩大公鸡安卓| www.235660.com-山东彩票论坛3d| www.42262.com-福彩三地图谜2版| www.206990.com-内蒙快三牛-| www.09az.cc-福彩3d期藏机图| www.210111.cc-江苏快三正规平台| www.239099.com-套彩金-| www.9356.xyz-七星彩1元中多少| www.940015.com-吉林快三盘系统| www.85584.com-福彩双色球资深专家| www.067759.com-彩票平台租借| www.712032.com-彩礼嫁妆比例| www.933206.com-宝马彩票正规吗| www.38sb.com-彩铅画儿童画图片| www.01047.com-环彩触屏网址| www.026772.com-新浪彩票五行走势图| www.913933.com-双色球彩神通软件| www.e79.com-特区七星彩头尾论坛| www.818119.com-陆慧明今日竞彩| www.022841.com-河南派彩-| www.511407.com-彩库宝典开-| www.657042.com-彩票微信二维码| www.84ot.com-快乐五分彩开奖号码| www.15078.com-彩票购彩大厅彩票| www.05ib.com-彩铅画自学难吗| www.91131.cc-好彩多少钱一盒| www.373797.com-鸿浪彩票-| www.878122.com-3d牛彩网图谜| www.870413.com-金凤凰彩票开奖查询| www.az99.cc-彩票500万app| www.4529.com-体彩19027-| www.212572.com-玩私彩哪个平台靠谱| www.373670.com-苏州e球彩开奖结果| www.583820.com-足彩加会员命中率| www.716155.com-神采争霸快三下载| 福彩网www.60007m.com| www.19mq.com-更多精彩的恐龙视频| www.81179.cc-即时开彩2013| www.04lb.com-彩铅绘画人物教程| www.480289.com-七星彩中奖要求| www.657910.com-利博彩票平台| www.737878.com-彩53彩票网注册| www.834328.com-好彩香烟日版| www.917288.com-7039彩票-| www.998969.com-篮彩预测分析推荐| www.ga57.com-发财团队彩票计划| www.0032.net-体彩7位数中奖号码| www.024732.com-深圳体彩店申请| www.108232.com-乐彩双色球字谜总汇|