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天

知道了
大发快3 www.525679.com-新重庆时时彩开奖| www.650270.com-彩虹伞打地鼠规则| www.749107.com-彩虹e台网络直播| www.832038.com-接到境外博彩的电话| www.919398.com-玩彩票去什么平台好| www.981486.com-中国足彩在线| www.rw6.com-河北福彩好运2玩法| www.617676.cc-结婚彩礼现金图片| www.619763.com-3d彩票杀号方法| www.076326.com-赼彩天下-| www.538095.com-中国福彩有几种彩种| www.oj27.com-吉林省福彩中心主任| www.50ow.com-国外竞彩篮球| www.222692.com-湖北快三专家推荐| www.073310.com-销售彩票软件话术| www.10958.com-胜负彩19048| www.hu49.com-中国体育彩票有哪种| www.24045.cc-彩票平台程序妙招| www.388062.com-华彩咨询有多少人| www.529744.com-如意彩票专家计划| www.378521.com-七彩蓝田投资返利| www.564450.com-时时彩五码怎么选| www.674696.com-中彩网走式图| www.857280.com-怎样可以网上买彩票| www.999998.com-彩票帮投是什么意思| www.fg16.com-快三对子投注技巧| www.l35.cm-9118彩票下载| www.968503.com-足彩庄家操盘全揭秘| www.74ux.com-甘肃快三统计表| www.9658.loan-万彩动漫大师| www.715520.com-快三单跳双跳| www.825183.com-彩鸿酒店-| www.935781.com-248彩票网可靠吗| www.083226.com-老9乐购彩票app| www.if17.com-快三大小倍投技巧| www.253955.com-快三作弊器-| www.095600.com-吉林体彩网11| www.255579.com-彩票的规律怎么算| www.626787.com-姓名选号彩票| www.692057.com-彩乐汇app下载| www.772399.com-时时彩骗了多少人| www.853130.com-金福彩票app| www.873.live-网上彩票那个软件好| www.oe54.com-福彩快三输了| www.151582.com-官方网时时彩被骗| www.276677.com-菲律宾彩票客服| www.111120.com-3d新彩网字谜总汇| www.974938.com-彩票查询结果排列五| www.tx4.com-易彩娱乐彩民登录| www.rm64.com-福利彩票吉林快3| www.04uj.com-彩铅怎么上色| www.912925.com-体彩三d排列五| www.0261.cn-时时彩杂六有哪些| www.029027.com-全球彩票官网| www.130404.com-天天爱彩票官方网站| www.251675.com-彩中彩是什么平台| www.369453.com-三色球彩票-| www.930952.com-压大小的快三app| www.1451.tv-彩铅画初学者简单| www.029926.com-重庆时时彩计划稳| www.156789.cc-蓝球比分新浪爱彩| www.290707.com-我发现彩票有规律| www.31738.com-易彩网首页-| www.031380.com-万彩彩票是否真实| www.432584.com-凤凰微彩关闭了| www.628532.com-浙江福彩积分扫一扫| www.804689.com-3d杀码一家彩网| www.936871.com-七乐彩的奖金| www.71uj.com-恒彩可靠么-| www.871587.com-福彩双色球安卓下载| www.948520.com-中国福利彩票官网| 爱彩www.00ac.com| www.gt01.com-快三追豹子倾家荡产| www.ye38.com-湖南体彩网-| www.20cg.com-福利彩票5进3诀窍| www.639479.com-竞猜彩专家推荐| www.597843.com-竞彩14场任九投注| www.4053.win-分分彩刷流水思路| www.17674.com-菠菜网注册送彩金| www.88284.com-手机彩票红包聊天室| www.7266.in-彩虹六号小车原型| www.430188.com-足球竞彩凯利| www.523457.com-绍兴市福利彩票| www.088534.com-快三怎么投注有盈利| www.200702.com-彩票最新481开奖| www.886796.com-福彩快开彩赛马| www.247999.com-掌聊彩票-| www.959429.com-官崎彩-| www.175163.com-福彩快三网站合作| www.309999.com-体彩网排列五| www.389893.com-西安彩票店转让| www.594947.com-三彩的衣服质量好吗| www.85052.com-福彩主任被判死刑| www.751206.com-彩票巴土-| www.380808.com-找回我的彩票| www.365801.cc-国外彩票开奖| www.92ow.com-能下九码的彩票平台| www.941237.com-彩票漏洞套利| www.wk6.cc-澳洲5分彩开奖结果| www.617531.com-快三输钱怎么办| www.712018.com-足彩预测专家| www.799911.cc-33cc彩票的四肖| www.605104.com-玩彩票的软件100| www.693395.com-体彩手机在线客户端| www.905306.com-江西快三84期开奖| www.969446.com-彩票计划员违法吗| 大赢家彩票www.346911.com| www.ee05.com-彩神邀请码在哪里| www.tz08.com-彩神1app-| www.872044.com-福利彩票多少钱一张| www.44ry.com-分分彩投注正规平台| www.0777.pw-宏图科技玩五分彩| www.075532.com-开福彩店赚钱吗| www.667715.com-球彩vicki-| www.666537.com-百事乐彩票官方网站| www.749302.com-中国彩票猫腻| www.808369.com-e乐彩登录平台| www.871449.com-3d福彩彩票开奖| www.934009.com-专家福利彩票预测| www.999039.com-彩乐汇彩票合法| www.fp86.com-快三必中技巧443| www.d18.hk-全国开奖安全购彩票| www.755778.com-快三开奖助手官网| www.54zw.cc-重庆福彩走势图| www.0435.com-香港时时开彩| www.071551.com-rrz彩票-| www.152223.com-澳客足彩必发交易量| www.968478.com-77彩票靠谱吗| www.47fv.com-3d杀号彩票2元网| www.jw4.cc-快三投注顺口溜| www.vw36.com-v8彩票苹果版| www.21533.cc-七天彩票网址| www.48513.com-竞彩足球app安卓| www.171183.com-昨天江苏快三走势图| www.143316.com-苹果乐8彩首页| www.hm49.com-体育彩票分析| www.871120.com-彩票缩水专家安卓版| www.948783.com-万彩平台下载| www.994382.com-彩票生成器代码| www.ba37.com-大发彩网是骗人的么| www.oi73.com-牛彩总汇3d藏机图| www.11299.com-足彩对阵表新浪| www.18775.cc-彩票33软件-| www.210880.com-快彩vip-| www.272557.com-易彩快三是不是骗局| www.341696.com-彩票自动提醒功能| www.393475.com-彩客网双色球推荐号| www.480030.com-七星彩开奖今晚结果| www.551099.com-高频彩追号计划| www.629892.com-彩65彩票-| www.683155.com-彩票预测推荐下载| www.744744.com-彩票庄家的思维| www.808182.com-彩金神龙游戏机程序| www.872285.com-云南体彩开奖查询| www.922486.com-白菜彩票大全| www.981805.com-手机qq彩票怎么买| www.7421.cn-色彩构成图片简单| www.474120.com-分分彩挂机会赔钱吗| www.560187.com-3d与体彩试机号| www.5376.top-777彩票网靠谱吗| www.12738.com-体育彩票交流吧| www.278516.com-彩票害人输了八十万| www.366831.com-qq赠送彩票-| www.459927.com-体育彩票足球胜负彩|