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.sn31.com-彩之家平台可靠吗| www.70ee.com-红菜苔彩票规则| www.2399.la-网络彩票能玩吗| www.9020.in-中国体育竞彩| www.76658.com-福彩会员直播间| www.038873.com-信彩团队计划| www.178627.com-中国福利彩票软件| www.252819.com-一分快三彩票网址| www.336568.cc-彩票3d试机号| www.440043.com-七星彩守号15年| www.547257.com-澳客赢家彩票可靠吗| www.773285.com-彩票中奖的真实秘籍| www.874036.com-中彩票的预感| www.957459.com-北京彩票站电话| 易彩网www.12455d.com| www.hp08.com-足彩玩法和中奖规则| www.e46.org-百度乐彩下载| www.46bm.com-体彩排列百度贴吧| www.0088.loan-秒秒彩长期盈利心得| www.9500.vip-福彩3d组六多少钱| www.57181.com-秒速时时彩赢钱秘诀| www.022354.com-恒彩88注册-| www.103358.com-足球体育彩票怎么买| www.182079.com-下载福彩快3彩票| www.262266.com-快三统计-| www.388720.com-福彩3d和值遗漏表| www.525308.com-今彩票开奖结果查询| www.620198.com-釉上彩茶具安全吗| www.700932.com-体育足彩竞彩网下载| www.787666.com-各省市彩票开奖结果| www.872461.com-安顺市彩票管理中心| www.974466.com-福利彩票七星彩规则| www.ep34.com-新华彩票下载| www.yx97.com-神圣彩票计划| www.32fm.com-v8彩票苹果下载| www.0733.in-网上购彩软件安全吗| www.7814.me-足彩竞彩窍门| www.30279.com-多玩彩票是真的么| www.81508.com-双色球预测彩宝贝| www.041105.com-分分彩手机能挂机吗| www.172021.com-湖北快三精彩十分| www.268338.com-彩票360-| www.361927.com-形容彩虹的优美句子| www.458300.com-周公解梦买彩票| www.553506.com-竞彩篮球推荐新浪| www.626455.com-福彩彩票图片大全| www.704044.com-万家彩票网首页导航| www.787242.com-360彩票是正规的| www.867747.com-彩票高返点代理注册| www.999139.com-汇彩宝刷卡机| www.ap02.com-体育彩票查询| www.tg70.com-第一套休闲快三教学| www.07sp.com-河北快三3号预测| www.81bm.com-财富彩票注册登录| www.2348.pw-体彩走势图排列五| www.8193.biz-七乐彩万能10码| www.31521.cc-银川千彩摸吧地址| www.79611.com-尼彩手机n5-| www.036110.com-今日彩是什么app| www.206902.com-500彩票邀请码| www.283126.com-彩票的规则是什么| www.383956.com-深圳福彩举报电话| www.513930.com-彩票什么时候上班| www.587697.com-易彩娱乐福地| www.666325.com-最新阳光探码彩民乐| www.750715.com-盛兴彩票e乐彩| www.821562.com-七星彩图库-| www.893900.com-金牛彩票平台可靠吗| www.963216.com-彩铅画花卉入门图片| 爱彩乐www.343918.com| www.ia20.com-手机验证送28彩金| www.a06.top-彩民乐吧-| www.30tg.com-福利彩票么时候开奖| www.1007.pw-爱彩乐怎么购买| www.7753.loan-足球竞彩伤停情报网| www.27092.cc-彩票二元网下载| www.71809.com-福利彩票多会儿开奖| www.112994.com-竟彩网比分直| www.184897.com-河南福利彩票| www.256977.com-国民彩票手机版| www.330718.com-财神彩票是真的吗| www.402755.com-四川福彩兑奖地址| www.512787.com-彩吧vip购彩下载| www.574200.com-360购彩助手| www.649342.com-618彩票手机版| www.835322.com-香港好彩烟哪种好| www.893363.com-七乐彩过滤缩水软件| www.953324.com-乐彩在线平台登录| www.996940.com-快3遗漏內蒙爱彩| www.og5.com-下载体彩十一选五| www.ps05.com-933cc彩票-| www.02oo.com-彩虹六号人物资料| www.71id.com-下重庆7时彩| www.1018.site-江苏11选五爱彩乐| www.9288.live-体彩超级大乐透| www.50412.com-58免费彩金平台| www.92227.cc-福彩3的图谜语总汇| www.054887.com-参与黑彩的会判刑吗| www.159147.com-下载福彩走势图| www.245822.com-老式中国体育竞彩网| www.318047.com-幸运彩票成立多久了| www.432037.com-家彩网开奖查询| www.534344.com-分分彩怎么买不会输| www.654304.com-99彩票是坑人的么| www.727307.com-快彩网是正规的吗| www.789089.com-浙江体彩模拟| www.861269.com-腾讯qq彩票合法吗| www.925544.com-旭彩可靠-| www.978895.com-快三如何倍投| www.vy75.com-大发快三图片| www.10cq.com-中国福彩123| www.77bi.cc-168彩票开奖网址| www.1490.cn-竞彩大奖历史记录| www.9424.vip-彩票冷热遗漏查询| www.47090.com-彩礼钱是给谁的| www.89790.com-下截福彩双色球软件| www.043198.com-福利彩票标识| www.144103.com-网易红彩是骗局| www.231269.com-百胜快三预测| www.301250.com-微彩店买彩票| www.367281.com-大鱼海棠彩铅素描| www.454281.com-万达彩票网-| www.539185.com-福彩分析预测| www.661424.com-北京实时彩-| www.747480.com-彩票云彩店正规吗| www.811969.com-亮彩旗舰店天猫| www.878787.cc-竞彩五千万大奖| www.970178.com-福彩3d秘密通道| 彩客网www.870300.com| www.hs52.com-贵州彩票十一选五| www.yb36.com-新彊福利彩票| www.19xy.com-博汇彩票是不是假的| www.711.xyz-彩票买大买小的软件| www.4320.cc-足彩交流-| www.9090.pw-七乐彩按顺序出球| www.89385.com-千福彩票骗局揭秘| www.041192.com-中福彩票网骗局揭秘| www.131245.com-开封定亲彩礼| www.014865.com-东北彩王的故事| www.123481.cc-福彩贪了多少钱| www.193112.com-韩国彩票开奖结果| www.267961.com-今天福彩3d图| www.439904.com-乐米彩票中大奖后| www.534674.com-2016够力七星彩| www.637032.com-彩虹5无人攻击机| www.727007.com-彩票帮投赚佣金可靠| www.801047.com-彩票到底假不假| www.875907.com-体彩走势图综合版| www.970927.com-福彩3d字谜图片| 大赢家彩票网www.615121.com| www.hj27.com-体育彩票app| www.ww95.com-湖北快三奖结果查询| www.10xd.com-彩票代买兼职| www.72zw.com-9928彩票真相| www.0683.xyz-139彩票网骗局| www.9587.loan-福彩3d冷号统计表| www.44324.com-全民彩票ios| www.83767.com-特区彩票平台| www.029008.com-鳄鱼网彩票-| www.097269.com-今天三d彩报| www.154900.com-足彩2串1入门教程| www.276362.com-七乐彩奖金分配明细| www.356006.com-漫威dc本子全彩| www.424164.com-爱心彩app下载|