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天

知道了
58福彩 www.198692.com-彩票计划网-| www.ld23.com-红彩网客户端| www.20488.cc-足彩比分计算器| www.zk.cc-官方彩票-| www.391631.com-永恒彩票app| www.83765.cc-中彩票不捐款| www.338559.com-118彩票官方苹果| www.590382.com-七星彩高清图库| www.437844.com-天天彩票集团是| www.582524.com-关于彩票的搞笑图| www.503939.com-新天地彩票刘军| www.cp859.com-高手教你玩uu快三| www.708672.com-河北彩票吧百度贴吧| www.529060.com-上海体彩店转让| www.385326.com-体育彩票贪案| www.137585.com-手机购彩吧-| www.6234.cm-每十分钟出奖的彩票| www.521777.com-好易自助终端机彩票| www.838536.com-福利彩如何才算中奖| www.468545.com-福彩式机号-| www.553342.com-体育彩票宣传标语| www.619279.com-彩票开奖信息结果| www.686130.com-五百彩票是不是骗局| www.761750.com-下载福彩群英会| www.834501.com-好彩蓝莓双爆击毫克| 乐发彩票www.64141.com| www.07ox.com-上期彩票-| www.6418.org-足球彩票单场玩法| www.96167.com-南阳市结婚彩礼| www.220596.com-中原彩票系统租用| www.692327.com-好彩l开奖结果| www.919179.com-正规三分时时彩网站| www.875359.com-玩手机彩票输了4千| www.956633.com-玩彩有赢的吗| 500彩票www.50054g.com| www.gi39.com-c168彩票信誉好| www.27186.cc-彩票充值送百分之2| www.8229.in-能在体彩店买福彩吗| www.0824.cm-欧冠体彩投-| www.5923.bid-体彩兑奖中心| www.466196.com-xy幸运彩票网站| www.953413.com-彩票030期-| www.797373.com-98彩票s-| www.974573.com-好运来彩票平台| www.mg83.com-云南十一选五爱乐彩| www.907.xyz-老版彩库宝典下载| 博友彩www.739908.com| www.280546.com-在线下载幸运时时彩| www.458521.com-贴吧网上买足彩| www.592.net-豪彩计划软件手机版| www.058899.com-福彩快三专业团队| www.330991.com-彩六万的大发快三| www.747953.com-彩乐瀑官网下载| www.10dh.com-彩生活物业投诉电话| www.3286.vip-贷款的钱买体育彩票| www.29653.cc-金手指3d彩票预测| www.96273.com-彩票年底停售时间| www.50503.cc-808彩吧下载| www.092883.com-中国福利彩票生肖| www.62838.cc-篮球竞彩新浪| www.677662.com-重生彩票大亨| www.tq93.com-中国彩票预测一注准| www.54199.com-加入彩票快三群| www.059966.cc-美国彩票开奖时间表| www.367653.com-鲸鱼的彩铅画过程| www.626662.com-彩票中五百万难吗| 乐彩www.lczg7.com| www.962043.com-山东手机体彩| www.404824.com-河南中奖彩票被调| www.724040.com-彩票快3网上计划| www.973016.com-百胜快三合法吗| www.id34.com-银川福彩申请流程| www.921902.com-91彩神下载-| 彩8彩票www.c8701.com| www.cai718.com-快三算号器手机版| www.mp78.com-送28彩金彩票平台| www.9824.cc-古建彩绘怎样立粉| www.539036.com-众乐彩是什么| www.46155.com-时时彩票计划稳定版| www.440193.com-四川体彩招聘| www.cp916.com-最新广西快三走势图| www.143108.com-九鼎彩票平台注册| www.769013.com-亚博彩票官方下载| www.ir10.com-博纳彩票-| www.x05.shop-彩票软件怎么挣钱| www.93056.com-世界杯彩票投注| www.246447.com-3d彩宝-| www.1647.vip-休育彩票查询双色球| www.5637.wang-买彩票群里赚钱生活| www.12404.com-足彩胜平负3种猜法| www.645885.com-分分彩不怕挂死方案| www.747495.com-彩票注册送彩金平台| www.819872.com-上海体彩客服电话| www.45gx.com-开奖的彩票-| www.744.mobi-时时彩和值怎么看| www.4840.net-佬牛足彩19041| www.336086.com-万禧彩票-| www.421680.com-福彩12选五浙江| www.518744.com-黑客攻击时时彩软件| www.53739.cc-腾龙时时彩手机版| www.0512.me-新彩票网址-| www.292487.com-彩票软件定制| www.548482.com-送18~88彩金| www.192052.com-内蒙快三走势图连线| www.8560.me-2元彩网-| www.52536.cc-好彩网真假-| www.018381.com-开奖快的彩票软件| www.833959.com-好彩3玩法-| www.943800.com-百合网彩票-| 中信彩票www.23579.cc| www.176290.com-新快三开奖玩法| www.299338.com-51中彩彩票软件| www.414452.com-彩之云账号怎么注销| www.023571.com-77彩票app下载| www.756.cm-时时彩前二和值技巧| www.7026.org-篮球彩票规则及玩法| www.695972.com-大型彩票平台| www.782726.com-爱彩乐陕西快乐十分| www.wz4.cc-河南体彩网-| www.0016.vip-8位彩票-| www.620961.com-彩钢板铁皮-| www.99451.com-彩票七位数中奖规则| www.746644.com-冀彩宝苹果下载| www.859388.com-中国福利彩票代理| www.946952.com-彩色混凝土配方| www.997430.com-一个软件是个8彩神| www.aa80.com-幸运彩app-| www.th65.com-福彩网快三骗| www.00ec.com-印度乐透彩开奖结果| www.72lw.com-盛世彩票官网地址| www.376335.com-最新玩彩票平台| www.566191.com-足彩高赔-| www.020420.com-86彩票人工计划网| www.144736.com-淘宝快三基本走势图| www.025983.com-福彩双色球购买技巧| www.160375.com-风发彩票骗局| www.338744.com-i8彩票代理-| www.696232.com-研究彩票中奖规律| www.781384.com-百乐彩网站-| www.856178.com-吴江体育彩票站点| www.905325.com-如何买足彩-| www.960983.com-快三微信坐庄机器人| www.585998.com-天天爱彩票又维护| www.725647.com-彩票精准分析器| www.807055.com-彩票打错了中奖赔偿| www.896343.com-十大正规彩票平台| www.cp7660.com-数字彩票破解术| www.3518.wang-微彩站安卓版app| www.8848.pro-北大彩票专业| www.44596.com-福建体彩官方网站| www.47pz.cc-盈彩吧app下载| www.82798.com-竞彩二串一打水| www.026891.com-十三彩软件-| www.108407.com-网络彩票能连赢多久| www.8655.com-36o七星彩走势图| www.174559.com-快三平台计划| www.250296.com-正规分分中彩票| www.164966.com-体彩与福彩开奖号码| www.307922.com-派彩网内蒙古快3| www.530036.com-时时彩提现可靠吗| www.8340.net-东方彩票能信吗| www.465268.com-美国彩票漏洞| www.654115.com-江苏快三三不同| www.147877.com-163彩票网站|