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.563870.com-今日彩吧水果图一板| www.687079.com-哪里的彩票销售系统| www.769646.com-姜山冷门足彩博客| www.891999.com-快三选号器-| www.955958.com-足彩胜负彩比分| 易彩网www.686pp.com| www.bm18.com-好运来时时彩安卓版| www.ro71.com-彩票输了-| www.07kx.com-彩票上的编码| www.69ob.com-玩时时彩有人稳赢吗| www.0507.cm-快三购买网站| www.7336.in-小米彩虹电量| www.16939.com-可变条码彩票厂家| www.55580.com-适合玩彩虹伞的音乐| www.95330.com-体育彩票有哪些种类| www.050061.com-玩黑彩坐庄能挣钱吗| www.151958.com-彩之网3d绕胆图| www.226717.com-广西福彩手机客户端| www.296905.com-数学教授彩票大奖| www.358445.com-时时彩网站源代码| www.432203.com-红利登陆彩票| www.519499.com-天天福彩是陷阱吗| www.582181.com-福彩门户ok58| www.646866.com-足彩14转9算法| www.769622.com-好运彩票赚钱| www.824029.com-体彩排列三缩水软件| www.886036.com-彩虹谷照片真实照片| www.962606.com-彩票网页计划| www.998643.com-摩羯足彩预测准吗| www.eq7.com-快三万能二码的部首| www.mh32.com-足球彩票论坛app| www.m36.bid-凤凰彩票有几个| www.32jw.com-印度三合乐透彩资料| www.285.red-河南商丘民权县彩礼| www.2928.site-开心彩怎么玩| www.7605.cm-彩多多下载-| www.17774.cc-好彩客官方网站下载| www.54582.com-博胜彩票网投| www.93134.com-竞彩亚盘心得| www.038894.com-福利彩票周一啥开奖| www.152757.com-旺彩网彩票-| www.223701.com-足球e球彩总进球数| www.286127.com-河南快三网络购买| www.365102.cc-风之彩团队-| www.437271.com-彩票超级赛车计划| www.517334.com-福利彩票3d迷彩图| www.576081.com-v9彩票-| www.632582.com-立彩网页快速入口| www.688125.com-广东福彩多少个中| www.760722.com-牛娃彩票生肖对照表| www.878540.com-内蒙快三开走势图| www.935237.com-台湾福星彩开奖| www.978438.com-福彩3d双福彩票网| www.qv8.cc-中国快3彩票网| www.no09.com-中国竞彩网比分直| www.o63.net-手机上买体彩| www.31ts.com-礼拜日开什么彩票| www.1548.cm-彩票网走势图首页| www.6842.vip-彩妆档次-| www.11759.com-广州彩乐乐网| www.47747.com-韩国足球彩票玩法| www.84630.com-彩色水泥价格和图片| www.026159.com-代买彩票兼职| www.088180.com-官方快三投注平台| www.137664.com-贵宾中彩网址是多少| www.201201.cc-七星彩第四位杀号| www.260418.com-赌博和彩票-| www.317757.com-快三庄家-| www.371339.com-越南内河时时彩链接| www.447445.com-福彩三d辶家| www.522808.com-网上彩票代理怎么做| www.580069.com-澳洲幸运彩官网| www.639021.com-中国福利彩票是谁管| www.813383.com-彩票巫师双色球预测| www.874196.com-彩之牙彩票查询系统| www.948287.com-多彩网彩票网d55| www.986890.com-234官网彩票| 大赢家彩票平台www.617787.com| www.fn19.com-福彩3d死规律口诀| www.tg79.com-福彩快3跨度走势图| www.w02.org-98吉林快三群| www.34cg.com-福彩3d彩报全彩| www.808.hk-七乐彩胆码汇总预测| www.3706.vip-河北快三跨服| www.8072.vip-著名水彩画-| www.18748.com-吉林快三变号| www.51977.com-彩票中大奖怎么领取| www.87351.com-933彩票版-| www.025924.com-百胜彩票app| www.083805.com-福彩动物总动员诀窍| www.131151.com-2019年农村彩礼| www.190120.com-安徽快三下载免费| www.247771.com-七天彩登录入口| www.302061.com-海南体彩41论坛| www.358874.com-中国4d彩票-| www.420883.com-彩票2元网3d杀号| www.504346.com-易发彩票是骗人的吗| www.563488.com-易悠710彩票计划| www.618643.com-怎么下载酷彩| www.676532.com-客哥说彩-| www.736822.com-上海市福利彩票官网| www.796396.com-博乐彩票骗局| www.858985.com-查一下彩票中奖| www.906833.com-彩票类型有几种| www.960108.com-手机彩票3d图片| www.988226.com-幸运中彩票天天中奖| 大赢家彩票平台www.976921.com| www.fk06.com-所有快三精准计划| www.tk33.com-彩神有个8网址多少| www.x73.club-彩票投诉平台| www.36dh.cc-快三刷反水怎么刷| www.78em.com-银川彩票659万| www.0516.com-江苏快三豹子2| www.8787.vip-人工智能扫描彩票| www.37844.com-c8万彩吧cn买马| www.70862.com-体彩送彩金-| www.029911.com-快三如何选好| www.075713.com-社区数字达人彩票| www.115073.cc-彩乐乐专家杀号推荐| www.167506.com-江苏快三是骗局吗| www.272132.com-广西快三输了怎么办| www.353444.com-下载掌上京彩app| www.392117.com-体彩开奖36选7| www.506202.com-竞彩平均优化| www.547685.com-彩票开奖采集源码| www.622779.com-福彩3d双胆软件| www.663931.com-福利彩票电话投注| www.703662.com-香港牛蛙彩票资料i| www.761174.com-口袋彩票电脑版| www.901440.com-下载湖北精彩十分| www.944670.com-福建福州体彩| www.980195.com-淘宝怎样买彩票| www.ce56.com-快三可以赚钱吗| www.of24.com-河北27号快三开奖| www.l30.cn-彩票免费网址大传| www.21dw.com-彩票接口商是啥东西| www.86yj.com-三号彩票安卓| www.0878.vip-冠军白菜博彩论坛| www.5911.pro-铜陵福彩申请| www.9821.loan-七星彩开奖更多期次| www.42596.com-彩票挂机讨论群| www.77444.cc-彩票丹东谜语图| www.010063.com-人人中彩票双色球| www.055390.com-江西快三合法吗| www.132467.com-彩妆加盟-| www.185575.com-北京福彩快三爱彩乐| www.233676.com-彩乐汇兼职是真的吗| www.282558.com-时时彩五星稳定条件| www.365119.cc-网罗爱彩双色球| www.420900.com-西湾娱乐娱城时时彩| www.501978.com-微信中国彩里面有托| www.552930.com-今日福彩字谜新彩网| www.631872.com-七彩虹官网商城| www.679091.com-彩虹六号刘醒的毒| www.732234.com-彩礼退还比例| www.780749.com-彩虹图片小清新| www.829557.com-彩678首页-| www.877330.com-福彩三d乐彩网摘| www.964384.com-体彩app停售多久| 彩客网www.ck8299.com| www.qt.com-彩票选号-| www.hv80.com-众彩网火烈鸟| www.tf18.com-休闲快三第二套分解| www.p53.top-彩票大数据网站|