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.330019.com-腾讯体育nba彩票| www.257352.com-微彩店-| www.432647.com-新浪官网首页彩票| www.110904.com-518时时彩链接| www.214319.com-老版人人红彩票| www.ve19.com-河南福彩开的什么奖| www.85sg.com-彩神卷纸uv机| www.6514.vip-天天购彩票官方网站| www.562577.com-外围彩票怎么买| www.409702.com-吉利彩票正规吗| 彩之家www.04czj.com| www.523062.com-旺旺彩票中了怎么领| www.705303.com-新任福彩主任是谁| www.9688.hk-体彩大7刮刮乐| www.713224.com-百事彩票网可信吗| www.044168.com-湖北快三走跨度| www.300800.com-体育彩票开奖结果查| www.697785.com-什么网站彩票最全| 818合彩www.www.9889hc.com| www.03op.com-彩票33安软市场| www.288162.com-优彩交流-| www.is81.com-爱乐透手机购彩| www.332082.com-鸿运彩票是骗局吗| www.378779.com-学生中体彩-| www.820862.com-广州彩钢板生产厂家| www.zs2.com-大发快三口诀| www.19212.cc-彩票平台哪个信誉好| www.83064.com-安阳中3.6亿彩票| www.047299.com-江苏快三的赚钱技巧| www.153607.com-时时彩四星万能胆| www.800088.cc-河南体育彩票48i| www.071318.com-足彩亚盘-| www.192253.com-江西多乐彩时时开| www.678323.com-乐彩论坛_手机版| www.775586.com-365彩票数据平台| www.226522.com-花田彩票托-| www.91533.cc-好彩香烟图片大全| www.71lj.com-恒大彩票官方网址| www.475303.com-福利彩票五行走势图| www.815581.com-排列五福彩还是体彩| www.170045.com-快三彩票怎么玩| www.909925.com-体彩61中奖结果| www.10363.com-重庆快乐十分彩开奖| www.131774.com-九江瑞昌彩礼| www.868806.com-七星彩的口诀| www.942088.com-凤彩下载-| www.996826.com-云南快乐十分爱乐彩| www.ac88.com-中奖查询彩票| www.472502.com-3d牛彩网图迷九| www.895722.com-高频彩票能玩吗| www.984260.com-牛彩官网登录| www.gl29.com-江苏快三是骗局揭秘| www.s26.bid-北京体彩网首页| www.70vv.com-彩易达业绩-| www.144636.com-众彩网排列三千里马| www.5706.me-三彩专柜怎么样| www.608069.com-韩国快三在哪里买| www.718269.com-博友彩是骗人的吗| www.798089.com-盛世彩票登录网址| www.891706.com-五分彩官方app| JJ彩票www.60339.cc| www.yt28.com-我要中彩app下载| www.337718.com-鸿鼎彩票会员资料| www.466896.com-七乐彩9中4个半| www.0534.vip-河北彩花吧-| www.1680.in-安徽快三和值图表| www.933768.com-做私彩app犯法吗| 五星彩票www.5xag.com| www.hi66.com-中福快三计划下载| www.505423.com-彩票精准计划app| www.716909.com-即开型彩票黑幕| www.801080.com-口袋彩票中奖给吗| www.886510.com-购彩app合法吗| www.965331.com-福彩3+1多少钱| www.cai9488.com福彩快三河北| www.592993.com-彩虹电视剧全集| www.661242.com-美狮彩票计划| www.563332.com-足球博彩开户网址| www.680973.com-佳缘男七星彩骗局| www.780311.com-福利彩票分成| www.842018.com-聚鑫彩票网站| www.959966.com-官网彩票有哪些| www.dv48.com-福彩一分快三下载| www.57sj.com-中彩票那天课文| www.33612.com-河南体彩高频玩法| www.977035.com-彩礼法律规定六万| www.ep3.cc-快三复式买四码| www.nv29.com-玩快三有人赚钱吗| www.370273.com-竞彩蓝球比分直| www.760866.com-时时彩助赢软件安卓| www.010503.com-491·彩票-| www.05fx.com-儿童雪天彩铅画| www.984796.com-彩运8压大小怎么看| www.9299.net-中国彩票没有公信力| www.131655.com-河南彩票中奖信息| www.266878.com-老版新浪足球彩票| www.393078.com-明天的福彩开奖号码| www.587969.com-佳能彩色复印机出租| www.04sv.com-有人真的中国福彩吗| www.7688.bid-无锡福利彩票| www.4943.cm-160彩票-主页| www.540680.com-520裕兴彩票网站| www.285055.com-越来越多彩票店倒闭| www.381482.com-中彩网开奖直播视频| www.076977.com-网上快三平台真吭人| www.70kx.com-蛋彩开奖-| www.8949.wang-十一彩票停售吗| www.7900.cn-彩票是什么公式| www.387269.com-手机钢化彩膜壁纸| www.615486.com-彩票二进制定位| www.679357.com-博彩送彩金可提款| www.740813.com-香港博彩股票有哪些| www.802969.com-福彩领奖需要多久| www.17714.com-上海快三和值推荐号| www.60968.com-28168彩票-| www.673750.com-中国古建筑彩绘图集| www.777966.com-中国彩票种类及玩法| www.861739.com-彩票开奖到彩宝贝| www.913011.com-彩客网是什么东西| www.973466.com-彩票选号分折器| www.yd18.com-韩国快三彩票| www.16ks.com-竞彩足球分析师招聘| www.92zn.com-云彩彩票店app| www.2827.shop-uu彩票下载链接| www.858437.com-体彩和值遗漏统计| www.945200.com-l2345彩票网| www.995139.com-福彩主任违法事件| www.gy02.com-竞彩猫属于诈骗吗| www.16ve.com-明彩丝雾散粉| www.637455.com-彩虹7隐身无人机| www.860930.com-河南福彩中心在哪| www.163725.com-体彩彩票站-| www.338141.com-梦见家人彩票中奖了| www.513101.com-口袋彩票下架| www.631337.com-好彩头国际娱乐平台| www.753841.com-搜狗彩票走势| www.63kq.com-网络上福彩授权代销| www.342341.com-好彩apk-| www.473700.com-怎样下载彩之网软件| www.571963.com-竞彩大乐透-| www.652655.com-体育博彩qq群| www.740500.com-幸运28是福彩吗| www.835583.com-手机打彩票软件下载| www.931536.com-快三网投娱乐平台| 中彩网www.2408d.com| www.733771.com-福建体彩官方网下载| www.023277.com-幸运五分彩有官网| www.83921.com-柘城天价彩礼| www.055207.com-黑彩网站怎么盈利的| www.31031.cc-彩票中奖怎么样领奖| www.408567.com-彩票清明放假通知| www.77471.com-博乐彩票骗局模式| www.630908.com-好彩欧盟-| www.227283.com-一天快三秒-| www.977.site-七星彩中四个多少钱| www.010395.com-彩票怎么中大奖呢| www.194098.com-红旗彩票快三靠谱吗| www.4008.gg-3度博彩论坛| www.130205.com-时时彩选好的方法| www.ae07.com-牛蛙彩票香港正版| www.wq52.com-好彩票网页版| www.566068.com-彩仙阁软件官网| www.652093.com-彩票是那几天开奖| www.731308.com-豪彩平台登录|