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.759866.com-重庆时时彩推荐计划| 鑫亿彩www.613069.com| www.me28.com-内蒙古快三跨度| www.w75.com-乐彩客app苹果版| www.560090.com-kk彩票app-| www.689901.com-66彩票登录-| www.ii21.com-福彩3d跨-| www.x50.site-九资料彩票网| www.96ys.com-奔驰彩票软件下载| www.99517.cc-时时彩中奖预测| www.vh57.com-大发时时彩中奖规律| www.82hx.com-江苏快三三二同单选| www.4475.cc-海南特区七里彩论坛| www.23837.com-500彩票计划| www.86876.com-七星彩怎么中奖法则| www.967424.com-吉林快三遗漏表| www.ma11.com-彩票平台哪个反水高| www.28pu.com-体彩七位数中三个数| www.5480.in-长春彩票开奖| www.22735.cc-广东体彩投诉电话| www.95152.com-精准彩票数据库| www.983973.com-海南七星彩彩版专区| www.xz17.com-七乐彩5期走式图| www.47bp.com-两元彩票3d走势图| www.1862.cn-快三里怎么砍龙| www.02526.com-2m2元彩票网| www.817995.com-中国网彩票-| www.923038.com-中国体育彩票店| www.995704.com-足彩能买单场吗| www.fv62.com-大发快三看和值技巧| www.z92.club-李彩潭哪部最露| www.72rg.com-彩票917app-| www.2163.wang-做彩票代购合法吗| www.7909.org-彩宝类-| www.29192.cc-手机咋买彩票| www.246576.com-福彩快3概率| www.354633.com-澳门好运彩开奖结果| www.439418.com-福彩够三网真的假的| www.025876.com-河南省体彩中心| www.131554.com-修武彩票-| www.222122.com-内蒙快三助手软件| www.800937.com-中奖彩票去领奖| www.888792.com-炫乐彩票标准版| www.988899.cc-江西快三软件下载| www.jn2.com-河北省快三一定牛| www.ys11.cc-体彩主任违法乱纪| www.21237.cc-彩神lll下载安卓| www.nw72.com-福彩头奖怎么领取| www.o18.net-买东西送彩票| www.437706.com-手机刮刮乐彩票| www.662582.com-重庆福彩中心在哪里| www.847765.com-沈阳彩票站有快三吗| www.908605.com-七星彩开什么奖| www.970516.com-河北福彩排列7玩法| 新盈彩www.xinyc8.com| www.ot54.com-竞彩足球玩法规则| www.251883.com-中彩吧正规吗| www.997009.com-彩票开奖百度一下| www.175411.com-广西风采快三走势图| www.256818.com-天天时彩助手手机版| www.331109.com-0234大发彩-| www.401778.com-竞彩足球计算机器| www.505279.com-彩票怎么样不能兑奖| www.572569.com-手机扫描彩票中奖| www.509093.com-天刀射利彩签在哪做| www.168866.com-福彩快三害死多少人| www.339466.com-11选5爱乐彩浙江| www.433127.com-51888彩票-| www.128365.cc-大发快三回本| www.219822.com-牛彩论坛-| www.024128.com-够力七彩票奖表| www.100401.com-cp533彩票网站| www.954515.com-浙江省福利彩票| www.a15.pink-新浪爱彩不能提现| www.889.space-老彩民双色球技巧| www.49574.com-开彩票店前景| www.93800.cc-快三定位走势| www.222566.com-福彩3d论坛定胆| www.585723.com-乐和彩开奖现奖| www.652903.com-乐讯圆梦七星彩早版| www.729142.com-体彩大乐透开奖信息| www.793908.com-彩票电脑版网页登陆| www.864233.com-新彩网3d字谜总汇| www.925025.com-财神8彩票网cs| www.984971.com-彩选8-| www.469903.com-彩票七天乐黑庄| www.925277.com-旭彩国际-| GO彩www.ban57.com| www.7518.org-支付宝上兑换的彩票| www.17461.com-中国足彩官网电脑版| www.75287.cc-彩c99com-| www.cp768.com-玩快三的app| www.180551.com-甘肃福彩快三走势图| www.254131.com-牛彩湖北快三开奖| www.331029.com-网上买大小彩票棋牌| www.9380.loan-tt彩票-| www.893205.com-彩吧助手彩种全走势| www.953093.com-足彩复式投注计算器| 网易彩票www.9356k.com| www.1454.cm-七星彩彩虫7| www.05301.com-彩票免费彩金| www.920650.com-福建快三一天多少期| www.986657.com-中国彩票预测咨询网| www.be28.com-喜乐彩开奖号| www.qe95.com-76c彩票app-| www.w37.top-彩溢开门了吗| www.42hw.com-竞猜足彩九月对阵表| www.038779.com-舟山福彩快2走势图| www.127854.com-彩虹歌-| 同乐彩票www.703617.com| www.ix99.com-香港彩票网址大全| www.j25.org-双色球彩摘网| www.98vu.com-博彩技术论坛| www.931314.com-8彩票app下载| www.998132.com-北京彩票官方网站| www.bq91.com-网上购买快三| www.684089.com-湖北快三杀号公式| www.766788.com-彩虹糖蓝色包装| www.859418.com-彩票山东十一选五| www.921236.com-彩票3d带线走势| www.977339.com-烟台彩礼2018| www.bh89.com-网彩app下载| www.44mk.com-江苏快三时间| www.0981.vip-福彩三d试机号查询| www.400109.com-盛世彩票官网| www.659874.com-休彩试机号和中奖号| www.727956.com-福利彩票工具| www.293600.com-体育彩票单式票| www.246373.com-江苏省体彩投诉电话| www.883785.com-博友彩官方网站| www.988008.com-彩51彩票平台好吗| www.av37.com-七彩透开奖结果查询| www.ub76.com-五分彩怎么判断长龙| www.767993.com-体彩周几开奖| www.876874.com-七乐彩所有开史历史| www.937517.com-福彩网软件靠谱吗| www.987234.com-福彩全民中奖独胆| www.cp7276.com-贵州快三一定牛预测| www.36896.cc-体彩排列三今曰预测| www.90962.com-3d天天中彩吧图库| www.069041.com-青海快三遗漏| www.119399.com-江苏快三中奖规律| www.549701.com-我要看彩红宝宝| www.937653.com-辽宁福彩客户端| www.110261.com-乐点彩-| www.254153.com-福彩快三倍投| www.19516.cc-福彩三的魔鬼图| www.4mv.cc-加拿大彩票平台| www.76tf.com-七星彩19042期| www.0846.xyz-足彩哪个网站能买| www.8464.pw-大发彩票下载官网| www.24403.com-少儿彩铅画教案| www.2254.vip-今天福彩3d太湖| www.2489.cm-福彩万能五码| www.839316.com-竞彩论坛哪个好| www.948956.com-福彩包括哪些种类| www.703629.com-福利彩票几点关门| www.548334.com-yy彩票娱乐-| www.np01.com-彩票概率计算软件| www.254939.com-五星彩票官网| www.526491.com-博盈彩票提现不了| www.621971.com-天天大奖彩票站| www.829194.com-害人彩票-| www.901817.com-福利彩票游戏机加盟|