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.74we.com-台湾基诺型彩票| www.hp53.com-上海快三彩票怎么玩| www.17kq.com-彩票运营中心| www.95wg.com-福彩3d技术小条件| www.3331.pw-彩色的中国歌曲| www.00826.com-中彩网双色球擂台| www.74zf.com-福彩九宝图不离密码| www.7752.loan-足彩火线伤停| www.39333.com-红牛彩票注册| www.2081.vip-江苏省体彩开奖结果| www.21759.cc-聚乐彩是什么平台| www.xr72.com-大乐透机炫彩宝贝| www.73sa.com-福利三d彩票九宝图| www.2044.cm-福彩3d复式买法| www.934035.com-贵州快3彩票下载| www.cai2223.com彩票河北快三| www.tw61.com-爱彩乐苹果手机下载| www.10dh.cc-彩之云客服-| www.508.online-福彩3d微信大群| www.6075.vip-田伟足彩宝能赚钱吗| www.21612.cc-5亿彩票首页| www.63017.com-胜天半子的足彩| www.36138.cc-中国福利快乐彩开奖| www.65ad.com-豪彩娱乐时时彩登陆| www.6630.biz-腾讯分分彩五码公式| www.883479.com-彩排说说-| www.jz38.com-七星彩一注得多少钱| www.v19.cn-竞彩无风险投注方案| www.64sf.com-505彩票怎么玩法| www.0671.in-四川体彩网排列五| www.01242.com-天天中彩票提款冻结| www.67593.com-彩票平刷赚钱技巧| www.741700.com-好彩票官方版hpc| www.705616.com-麒麟彩票骗局手机版| www.831885.com-中源福彩-| www.936992.com-鸿彩彩票合法吗| www.992818.com-中彩国际是干什么的| www.da80.com-体育彩票跨度表| www.a55.vip-重庆时时彩玩法心得| www.40pr.com-赢钱彩票p-| www.2691.cc-彩票停售最新消息| www.8945.cc-肥城市体彩中大奖| www.nl1.com-甘肃快三推荐号推荐| www.l48.net-中国福利彩票趋势图| www.389982.com-万博竞彩软件安全吗| www.610691.com-百宝彩账号和密码| www.711516.com-人人竞彩1.0.1| www.789414.com-体育彩票常见的数字| www.874273.com-今体彩排三开奖号码| 大赢家彩票网www.83033j.com| www.812911.com-彩膜是什么-| www.953414.com-好彩论坛08599| www.cai0233.com青海快三走势图今天| www.pe48.com-河北省福彩开奖公告| www.51ju.com-足彩大富翁手机版| www.0454.in-彩票网站多少钱| www.067392.com-如何举报私彩| www.171145.com-河北省快三遗漏| www.126871.com-优信彩票网站登入| www.260798.com-广西快三人工计划群| www.462008.com-私彩受害人怎么办| www.566535.com-和彩科技-| www.653319.com-好彩客网页版| www.800057.cc-新浪微博彩票| www.78385.cc-3d彩票密码解密| www.112533.com-福利彩票6十1| www.221.cm-好运来彩票赚钱| www.sk46.com-3d中彩网北斗预测| www.56zy.cc-苏州市如何加盟福彩| www.2430.vip-陌陌好彩头直播| www.992336.com-310足彩预测| www.522705.com-5oo彩票-| www.635601.com-云南七彩麻将| www.781669.com-彩名堂苹果手机下载| www.871446.com-手机版胜负彩过滤| 众发彩票www.895465.com| www.kj26.com-易彩网的邀请码在哪| www.764011.com-天才彩女双色球成绩| www.930635.com-彩8安卓版-| 万历彩票www.77114r.com| www.53419.cc-彩虹台在线直播| www.983479.com-福利彩票二等奖领奖| www.a58.club-竞彩输钱-| www.50en.com-足彩凯利方差怎么看| www.0986.com-博友彩计划-| www.00805.com-中国彩吧更懂彩票| www.922144.com-彩礼图片-| 8816彩票www.8816z.com| www.lq53.com-第一彩票可靠吗| www.x05.org-内蒙古体育彩票官网| www.64xv.com-123图库彩图图库| www.0441.cn-彩贝壳人工客服电话| www.020989.com-大马彩多多万能成绩| www.123572.com-辽林体育彩票官网| www.224237.com-百盈快三选号技巧| www.307578.com-浙江体彩飞鱼| www.8lc.com-数字画彩油-| www.209.in-草丛彩铅画-| www.5706.me-三彩专柜怎么样| www.129196.com-彩虹旗代表什么意思| www.220152.com-彩票快三分析| www.302062.com-特区七星彩论坛| www.371785.com-赢天下彩票正规吗| www.527888.com-时时彩改码诈骗| www.838558.com-上期七星彩-| www.908792.com-湖南省福彩发行中心| www.968283.com-彩票所有的号码全麦| www.7902.cm-彩票混沌公式| www.32627.cc-福彩中奖新闻| www.930040.com-三分快三倍数多少| 福彩www.86267j.com| www.mt11.com-汇彩网快3-| www.09uf.com-老彩民高手公式论坛| www.82ol.com-彩票3d算法公式| www.1956.in-易彩网五分快三计划| www.261671.com-河南快三即时走势图| www.464155.com-深圳福彩中心领奖处| www.566759.com-创银彩票-| www.625675.com-360七乐彩-| www.695670.com-足彩混合投注| www.947230.com-1717彩票-| 500彩票www.50051o.com| www.10178.cc-91彩票官方网站| www.60455.com-快三选号口诀| www.cai9022.com七星彩今晚开奖结果| www.px23.com-下载即送体验金彩票| www.08366.com-体彩胆拖投注| www.58926.cc-彩票模拟盘多少钱| www.066692.com-鸿博彩票app| www.640509.com-环彩网手机app| www.344973.com-彩票看图解码今天| www.447605.com-微信足彩交流群| www.606244.com-福彩3d杀码定胆| www.691278.com-万彩网倍投-| www.772193.com-怎么找彩票漏洞赚钱| www.903707.com-福彩金码今天| www.986957.com-彩先知论坛-| www.kk4.cc-快乐彩牛-| www.226291.com-排三乐彩网-| www.333875.com-黑彩为什么总是输钱| www.0875.pw-竞彩大小球在哪买| www.6717.net-hk百彩网天下采网| www.16869.cc-怎样买体彩-| www.59159.com-彩铅画图片风景| www.cp27.com-快三三不同号计划| www.zv33.com-彩之家彩票代理| www.30ij.com-凤彩网杀号定胆| www.2328.in-铂金彩票怎么取款| www.3802.org-南国彩票4十1| www.037764.com-快三专业走势图| www.253738.com-博众时时彩官方网站| www.320598.com-百宝彩票全屏走势图| www.254402.com-足球彩票app排行| www.25687.com-彩民周刊编辑组小宋| www.96272.cc-千亿彩票三-| www.079225.com-分分彩每次盈利十元| www.088093.com-新浪足彩直播吧| www.026967.com-江苏快三和值奖金| www.113374.com-河南省福彩网手机网| www.ci38.com-吉林快三太赖| www.k24.xyz-彩宝网-| www.38bt.com-彩铅画动漫工具| www.552.win-7乐彩今晚开奖结果| www.4124.xyz-彩虹七号官网|