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.118871.com-彩神8ios下载| www.03623.com-爱彩人下载| www.033726.com-七乐彩开奖往期回顾| www.455228.com-皇冠国际彩票赚钱| www.657683.com-亿彩堂是什么意思| www.976377.com-彩票开奖直播app| www.730358.com-快三彩票一等奖多少| www.998981.com-青海快三推荐今天| www.0qw.com-七乐彩票邀请码| www.021719.com-分分彩玩到跳楼| www.389679.com-福彩万彩8-| www.509808.com-68699胜彩论坛| www.585813.com-网易彩票天天中彩票| www.677477.com-什么是爱投彩票| www.766157.com-永9购彩票是真是假| www.841708.com-中国彩票公平公正性| www.751027.com-对彩票上瘾怎么办| www.823515.com-彩钢板厚度国家标准| www.895061.com-爱投彩票关闭| www.963453.com-七乐彩3l期-| www.cai4433.com河南彩票快三| www.ms44.com-中彩网可靠吗| www.v54.org-好彩网三d字谜| www.6587.top-数字彩票新浪| www.669240.com-够力七星彩老版下载| www.708809.com-时时彩5星定位胆| www.we0.com-排三彩宝网试机号| www.06kf.com-极客彩票主管qq| www.12wy.com-周大福彩票-| www.94377.cc-正规彩票有哪几种| www.080168.com-马来西亚生肖彩图| www.248168.com-彩票99客户端下载| www.332344.com-网络彩票套路| JJ彩票www.41211.cc| www.50114.cc-体彩p3试机号走势| www.984880.com-吉林福彩网快3开奖| www.035381.com-快三单式开奖| www.021892.com-手机买彩票能中奖吗| www.114033.com-快三造假-| www.189630.com-河南快三走势及预测| www.73xd.com-福彩3b天气网| www.70570.cc-彩票注册送彩金活动| www.243671.com-玩转双色球彩友沙龙| www.27xt.com-123彩票和彩6| www.57mu.com-玩彩犯法吗-| www.10807.com-彩票坚持守号靠谱吗| www.ox46.com-快三彩票人为控制| www.49fm.com-四川体彩网开奖结果| www.1516.org-体彩中心的照片| www.592653.com-秘梦解图七星彩解码| www.757899.com-中堂彩zzyz-| www.gw14.com-幸运快三骗局揭秘| www.02818.com-赌彩票家破人亡| www.86165.cc-新粤彩闲情好彩8版| www.173979.com-江苏快三开奖时间| www.399566.com-快三长牌-| www.580024.com-澳洲彩票开奖号码| www.0019.pw-世界杯购彩网万博| www.re05.com-时时彩怎么计算| www.82ec.com-竞彩5千万大奖| www.5254.vip-优彩彩票官方下载| www.121878.com-网上微信什么彩票群| www.947353.com-彩票辅助工具下载| www.892145.com-足彩2串1高手技巧| www.751492.com-中国足球彩票竞彩| www.3135.win-今日体彩排三开奖号| www.948403.com-87彩票店下载| www.230510.com-彩8彩票代理骗局| www.019045.com-利彩黑平台么| www.876911.com-一分快三提前开奖网| www.988515.com-中彩双色球走势图表| www.540290.com-环彩app苹果版| www.11521.cc-彩票中心客服电话| www.472082.com-开彩的意思-| www.554315.com-福彩3d术语-| www.627234.com-体育彩票nba| www.699107.com-网警会查私彩吗| www.769731.com-好彩香烟绿色宝珠| www.837681.com-快三和值大小怎么看| www.901760.com-最新福彩开奖| www.960994.com-杏彩注册平台官网| 福彩www.16878y.com| www.838526.com-亚盘和竞彩盘口转化| www.927837.com-⑥彩16-| www.983468.com-易发彩是真实的吗| www.lf0.cc-北京一定牛快三| www.639954.com-彩票老师一对一辅导| www.21388.cc-超级大乐透彩票圈吧| www.0678.live-网上申请彩票销售点| www.8749.vip-七星彩特区彩票| www.951070.com-足彩竞彩500| www.do2.com-快三怎么玩的| www.yl68.cc-新彩彩票计划| www.40dh.com-海南七星彩长条图| www.736.cm-华富鼎彩票诈骗| www.105672.com-排三彩票网-| www.900933.com-小妮姑玩彩独胆| www.88975.cc-l分彩票app下载| www.809243.com-乐彩体彩排列五数据| www.67ur.com-乐彩vip客户端| www.378956.com-篮球即时比分彩票| www.614982.com-球彩台无插件直播| www.773071.com-彩票预测最准的专家| www.856908.com-福彩3d独胆预测| www.50ai.com-贵州快三统计图表| www.410309.com-彩库宝典怎么看开奖| www.500399.cc-英国五分彩开彩结果| www.38cg.com-福彩双色球骗局| www.585.cn-福彩毒胆专家预测| www.958588.com-河北福彩快三推荐号| www.5176.biz-风云再起彩票| www.74268.com-七乐彩3等奖多钱| www.1738.cc-鸿发彩票平台| www.18227.cc-265彩票网站| www.60232.com-python彩票-| www.556255.com-蠃彩彩票与你同行| www.244323.com-大连体彩-| www.061091.com-5分彩怎么选号| www.186651.com-河北快3爱彩乐| www.2717.com-彩客网七星彩| www.449070.com-定蓝高手的彩票专栏| www.403677.cc-福利彩票机器摇奖| www.328344.com-甘快三一定牛预测| www.581575.com-滴滴彩票下载安装| www.03534.com-佳缘男七星彩骗局| www.580618.com-七星彩历史上的弃奖| www.675580.com-意彩注册账号| www.781984.com-福彩3d绝对布衣版| www.872992.com-支持花呗的彩票软件| www.939001.com-彩票站如何在澳客| www.980326.com-c558彩票-| www.cai6605.com快三技巧稳赚| www.412313.com-竞彩篮球新浪爱彩票| www.951876.com-加拿大快彩-| www.376716.com-中国福利彩票36期| www.789103.com-广西快三外围有假嘛| www.168111.com-宁夏快三基本走势图| www.86892.cc-拉萨快三查询| www.761982.com-nba竞彩258-| www.336108.com-香港快三玩法技巧| www.978190.com-三分彩计划网页版| www.93ch.com-黄金海岸彩票主管| www.5937.cn-体彩张弛-| www.54cj.com-福利彩票营销计划书| www.yv72.com-80彩票网站合法吗| www.40yj.com-版免费彩票资料大全| www.6058.vip-彩票破损还能兑奖吗| www.234151.cc-安徽福彩双色球| www.463332.com-3d助手彩吧走势图| www.27.net-下期福彩出什么号码| www.6135.net-玩高频彩票如何赚钱| www.697799.cc-香港天马行空彩票| www.994425.cc-北京28微彩被骗| www.875745.com-福彩3d天下无敌| www.082688.com-网上分分快三合法吗| www.277969.com-快三输了能回血吗| www.230769.com-安装728彩票| www.316432.com-网络彩票快三骗局| www.395673.com-用手机昨买3d彩票| www.543004.com-3d福彩图库90期| www.597723.com-十一选五彩票专家| www.666669.cc-福彩老年公寓隆德路| www.725032.com-阿彩呢acaine| www.782991.com-甘肃省福利彩票用途|