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.367182.com-彩铅画麋鹿星空| www.546011.com-体彩年轻人| www.623118.com-49倍率购彩平台| www.703389.com-京彩彩票app链接| www.173512.com-私彩买到多少违法| www.288275.com-江苏爱彩乐开奖结果| www.388600.com-广东彩友是什么意思| www.541897.com-京东进军彩票| www.774025.com-中国博彩业-| www.881384.com-足球博彩软件下载| www.993815.com-足彩是怎么个玩法| www.mj85.com-青诲快三开奖基本| www.9658.xyz-3d开奖彩宝网| www.920153.com-彩票软件定制多少钱| www.982548.com-共享彩票背后的真相| www.41ir.com-体育足彩中了一场| www.448997.com-福彩主任视频| www.567178.com-易彩国际是个什么| www.658158.com-今日足彩开奖结果| www.137071.com-美国七彩集团| www.247448.com-上海快三时间段| www.327028.com-取消快开彩票| www.393962.com-昨天的福彩开奖亏| www.531173.com-彩铅买什么牌子的好| www.668034.com-网上彩票开奖做假| www.764949.com-足球彩票网上购买| www.848025.com-时时彩电子走势图| www.922685.com-彩妆店名-| www.978528.com-福彩3d银海图| www.cp1919.com-快三稳赚技巧| www.695639.com-足彩竞彩混合投注| www.40855.cc-彩票计划导航| www.40405.com-2020cc彩票-| www.70sc.com-购物送彩票广告语| www.123873.com-风彩的意思-| www.442199.com-分分彩定位胆高手| www.637217.com-彩虹六号国内战队| www.906113.com-狗万比国彩好多了| www.4182.cm-哪个彩票平台可靠| www.2as.cc-彩晶膜多少钱| www.871.live-93彩票官网-| www.749848.com-好彩堂马会开奖记录| www.861211.com-福彩3d算号宝下载| www.962926.com-星彩票app下载| www.ai06.com-七星彩预测幸运之门| www.258493.com-中国足彩竞彩| www.435543.com-体育彩票点抽成| www.631171.com-足彩胜负平_澳客网| www.811175.com-正版福彩3d谜面| www.971503.com-厦门福彩网点查询| www.jk75.com-快三万能号-| 易彩网www.12455n.com| www.227571.com-北京市福彩快3助手| www.955031.com-凤凰彩票怎么开挂| www.37636.cc-手机彩宝网-| www.809575.com-福彩3d网冠彩彩报| www.cai3323.com快3彩票是真的吗| www.ty56.com-彩票高手论坛网| www.57kd.com-体彩大乐透后区中奖| www.2120.vip-苏州市彩票管理中心| www.08177.com-长沙体育彩票申请| www.82810.com-搜狐体彩-| www.0344.win-花式快三口令教学| www.21901.com-时时彩5星直选技巧| www.118202.com-彩七七官方-| www.208965.com-天天彩票的网址| www.027174.com-幸运五分彩开奖结果| www.44988.com-快三和值计划| www.w84.cn-体育彩票每周几开奖| www.1307.website鸿运乐彩靠谱么| www.1wv.cc-福彩10选4-| www.421779.com-联通手机彩铃网站| www.755348.com-福彩3d是什么号| www.038599.com-3d新走势图彩经网| www.233140.com-杨震新浪足彩推荐| www.017291.com-鼎盛彩票黑平台| www.117508.com-七星彩中了两个数字| www.073643.com-体彩排3彩图总汇| www.102656.com-娜彩快开怎么样| www.ph82.com-海南快三官网| www.108476.com-新彩网手机板| www.886457.com-中国体育彩票e球彩| www.968545.com-福彩6十1中奖规则| www.cp8868.com-999彩票app-| www.737398.com-福彩三d今晚开奖号| www.919052.com-福彩3d杀码王| 500彩票网www.65707v.com| www.04.cx-集彩通怎么兑换彩票| www.66uf.com-福利彩票22选5| www.2777.vip-彩88大乐透预测| www.333343.cc-彩票送人中奖| www.05216.com-彩票第一门户app| www.481813.com-福色球彩票开奖结果| www.669461.com-蓝宇彩钢围挡定做| www.690540.com-鹰彩注册-| www.771876.com-时时彩个人经验| www.444779.com-人工智能彩票app| www.543404.com-三d彩界独胆| www.610456.com-万博彩票好不好| www.692905.com-竞彩赛程-| www.780677.com-赢彩彩票有人玩吗| www.871049.com-2018新型彩票| www.939475.com-黑龙江福利彩票官网| www.989224.com-66zzcc特彩吧| www.ex65.com-什么彩票软件靠谱| www.3331.pw-彩色的中国歌曲| www.731249.com-306彩票官网| www.896646.com-吉林快三app| www.496058.com-香港的彩票开奖结果| www.590408.com-竞彩足球在哪买| www.682422.com-哪个软件还能买足彩| www.768412.com-粤淘彩票安装| www.030234.com-好运来彩票会员登录| www.3237.xyz-合法的彩票平台| www.886317.com-儿童彩铅画图片大全| 500彩票www.26299m.com| 大赢家彩票网www.595121.com| www.730603.com-玩彩技巧-| www.717874.com-大乐透黑彩-| www.882185.com-稳定的彩票平台源码| www.956323.com-28高频彩-| 91彩票网www.912454.com| www.624054.com-33彩票计划网| www.cp401.com-大发快三平台网址| www.nx46.com-竞彩任意9场奖金| www.v03.org-熊猫购彩-| www.48aj.com-彩61信誉平台登录| www.236257.com-彩乐乐官网-| www.967519.com-彩友群-| www.cp3228.com-快三一定牛彩票网| www.020314.com-网易红彩跟单靠谱吗| www.960401.com-风之彩彩票登录平台| www.842818.com-河南周口郸城彩礼| www.499403.com-鼎丰彩票真的假的| www.579804.com-老彩票开奖官方网站| www.849999.com-qq分分彩开奖网| www.951629.com-红彩网是什么网站| www.999232.com-彩之家官网-| www.bv02.com-吉林快三豹子预测| www.ts02.com-彩票开奖调用| www.575791.com-彩票是晚上几点停售| www.629936.com-福彩3d赢家-| www.682246.com-微信提现的彩票网| www.758077.com-703彩票-| www.811919.com-百度一下彩票开奖| www.870363.com-跟导师买彩票骗局| www.925375.com-彩票平台代理犯法吗| www.974438.com-好彩票手机版下载| 网易彩票www.177417.com| www.445883.com-网络上福彩授权代销| www.875921.com-彩票规律走势| www.70702.cc-宁波公司彩票中奖| www.859561.com-福建省福利彩票三d| www.917570.com-网上福彩3d投注| www.975092.com-今曰福彩开奖结果| www.cai661.com-快三中奖助手| www.527704.com-苏江苏快三-| www.00151.com-重庆体彩大乐透中奖| www.78276.com-足球彩票即使比分| www.975248.com-体彩自助终端机| www.212766.com-大奖网彩票是黑平台| www.df20.com-瑞彩网是骗局吗| www.741882.com-8亿彩票app网址| www.850925.com-网络销售彩票好做吗|