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.948426.com-体育彩票公益基金| www.cp8112.com-易彩彩票-| www.rk92.com-七乐彩中奖说明| www.27zw.com-泰安体彩中奖规则| www.452.cm-v800彩票com| www.3940.cc-二婚还要彩礼| www.9050.org-怎么买cba彩票| www.76177.cc-好彩一开奖历史记录| www.025051.com-福彩百度鼎盛彩票网| www.093451.com-彩58彩票-| www.155733.com-非法经营彩票罪1亿| www.325344.com-精彩十分推荐号码| www.402488.com-足彩二串一猜对比分| www.515179.com-七星彩三字现概率| www.589608.com-七星彩数字神奇组合| www.668493.com-博彩对冲-| www.747342.com-福彩三d谜语总汇| www.811105.com-新人注册送18彩票| www.886393.com-好运来彩app| www.ne84.com-下载038彩票| www.t80.cn-彩票升奖公告查询| www.54ql.com-贵阳市体彩兑换地址| www.0431.space-福利彩票杀码| www.8562.biz-中彩网cc-| www.42422.com-彩天下免费资料大全| www.89082.com-o1彩票官方-| www.049461.com-貴州福彩下载| www.153630.com-旺彩大乐透官网| www.247586.com-快三历史开奖号码| www.324477.com-家彩-| www.396496.com-贵州多彩宝缴费| www.539446.com-福彩发展-| www.624447.com-速八彩票是什么| www.699000.cc-彩铅画入门教程书| www.780498.com-nba篮彩分析预测| www.856758.com-内蒙古易快三| www.921371.com-甘肃体彩开奖| www.979216.com-什么便利店有绿好彩| www.rd52.com-彩票11选5走势图| www.7fn.com-福彩3d票花怎么看| www.65pz.cc-彩票应不应该买保险| www.0799.bid-网上能不能买足彩| www.8715.top-天空彩票与我同行日| www.40748.com-彩票单注最高买几倍| www.86537.cc-红旗快三计划软件| www.037727.com-双色球彩票大师| www.139498.com-彩玉海棠价格| www.215227.com-易彩用户登录| www.287185.com-福彩试机号口诀| www.387572.com-下彩下载-| www.507132.com-三彩家管家-| www.576407.com-彩霸王资料-| www.650916.com-水彩画图片简单好看| www.756038.com-红彩网app卖b的| www.838333.com-彩钢瓦屋顶防水价格| www.908328.com-彩票信息源码| www.970728.com-网络彩票计划群| www.db7.com-湖北快三跨走势图| www.nz08.com-彩票驿站官网| www.2zd.com-高频彩官方网站平台| www.55sw.com-湖南体彩网点| www.895.website博瑞彩票主页| www.4959.com-福彩彩票平台| www.00564.com-双彩网和值尾走势图| www.75515.cc-福彩3d奖号走势图| www.024143.com-福彩3d+开奖号| www.092839.com-福利彩票生肖6十1| www.156002.com-hck好彩客-| www.318990.com-时时彩快3一分技巧| www.387593.com-彩天下软件-| www.514145.com-彩钢围挡尺寸| www.580453.com-5+2彩票-| www.653584.com-强胆推荐竞彩网| www.757976.com-彩票的具体套利方法| www.839916.com-pc28是彩票吗| www.902753.com-网上赚钱快三| www.965834.com-917彩票-| 鑫亿彩www.196509.com| www.fr69.com-买彩票输了几十万| www.we60.com-贵州快三规矩与规律| www.08nf.com-933彩票娱乐平台| www.73ik.com-青蛙彩资料-| www.0914.vip-福利彩票双色球杀号| www.9749.xyz-瑞彩祥云app安卓| www.46678.com-安徽快三加奖方法| www.88242.com-春天彩票是真是假| www.037373.com-彩票大师下载| www.133602.com-天天好彩打一生肖| www.204655.com-江西体彩中心电话| www.269673.com-下载七天彩-| www.366071.com-世界上彩铅品牌排行| www.448945.com-彩麒麟怎么越养越红| www.532636.com-福利彩8可靠吗| www.628581.com-福彩官方电话号码| www.692036.com-博彩账号-| www.761291.com-好彩软件-| www.851340.com-结婚彩礼标语| www.899467.com-彩神通代理4码| www.952913.com-旺彩大乐透安卓版| www.991183.com-福彩三地天天彩报| www.cp758.com-快三网投第一| www.kw35.com-福彩出什么-| www.zt46.com-网上重庆彩是骗局么| www.19vq.com-彩仙阁挂机说明| www.460.website快三限号开的出来吗| www.3582.win-首存1元送29彩金| www.8396.biz-福彩开业宣传语大全| www.26129.cc-彩虹歌词羽泉含义| www.63146.com-彩票平台给彩金| www.046386.com-福彩快三河北走势图| www.121463.com-长沙彩票私彩诈骗| www.182521.com-福彩快三和值赌博| www.243228.com-体彩飞鱼赌博| www.308232.com-足彩竞猜结果查询| www.367375.com-体彩票中奖号码规则| www.445585.com-彩民乐树图片| www.527081.com-新加坡快三开奖结果| www.658845.com-亚博彩票网址| www.733879.com-正规的时时彩有哪些| www.797467.com-九九彩票台湾五分彩| www.867174.com-九万彩票下载安装| www.911846.com-网上买彩票会怎么判| www.960154.com-广发彩票-| www.995809.com-足彩分析公式| www.cp843.com-体育彩票开奖结果| www.ix79.com-香港彩票大全| www.xg92.com-1000万彩票-| www.06pg.com-兰州市福彩中心主任| www.64cg.com-竞彩为什么不交税| www.841.bid-二月八日彩票出什么| www.4242.biz-七彩汇游戏下载| www.8744.tv-玩彩计划哪个软件好| www.69015.com-金尊国际彩票注册| www.020658.com-中国福利彩票总部| www.079116.com-七乐彩胆拖6拖3| www.131697.com-全国彩礼-| www.191258.com-彩票快3网站| www.252613.com-微彩网可靠吗| www.311567.com-足球竞彩258下载| www.367500.com-猜大小彩票软件下载| www.442654.com-贵宾中彩开奖记录| www.528820.com-海南南国彩票规律坉| www.675436.com-众彩网排列三走势图| www.739279.com-内一排三蒙快三| www.789628.com-世界杯彩票销售| www.839940.com-数字彩票体育彩票| www.881085.com-广西体育彩票走势图| www.hm7.com-湖北体彩新十一| www.lf74.com-新浪爱彩app下载| www.yz93.com-昆明快三-| www.10dp.com-买彩票倾家荡产视频| www.64gn.com-查询彩票的软件下载| www.780.org-儿童彩虹画图片大全| www.3664.wang-今天出的彩票号| www.8200.org-江西快三走势分析| www.22186.cc-经济频道天天福彩| www.56638.cc-鸿远彩票计划团队| www.070687.com-彩神8快3苹果版| www.123709.com-七彩中奖-| www.180092.com-快三复式投注计算器| www.234879.cc-3d福利彩票-| www.290538.com-內蒙古福彩-| www.346981.com-足彩卖料的人违法不| www.400533.com-亿彩彩票最多黑几期|