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天

知道了
彩01彩票 www.25fe.com-骰子和值大小彩票| www.21601.com-5亿彩网址-| www.319365.cc-福彩三d和值走试图| www.973472.com-雨后彩虹图片大全| www.ky81.com-内蒙古快3爱彩乐| www.v18.hk-19036足彩分析| www.52az.com-江苏利彩玩法| www.947.in-体彩玩法中奖金多少| www.786455.com-大赢家快三-| www.885405.com-利彩彩票手机app| www.962731.com-福彩投注大厅| 大赢家彩票平台www.609710.com| www.ot72.com-2019彩票新规| www.18rz.com-七乐彩啥时开奖| www.616369.com-吉林体育彩票网| www.010887.com-昨天彩票是多少号| www.089814.com-凤凰彩票刷流水| www.448380.com-怎样微信购彩票| www.av49.com-福彩3d开奖走式图| www.01gf.com-福彩3d万能二码表| www.596.cc-亚彩会银彩-| www.06336.com-亚投计划彩神| www.96nv.com-中超足彩竞猜软件| www.333010.com-天天爱彩票官网| www.758894.com-微彩排列5下载| www.866398.com-中国体彩投注| www.f15.me-今日福彩三d新彩吧| www.159311.com-海南海口快三| www.cp3775.com-幸运快三是什么彩票| www.mj25.com-正规时时彩官网平台| www.167068.com-快三是什么彩票| www.ly97.com-彩票举报电话| www.50373.com-彩票网站制作有哪些| www.029880.com-体彩电话客服中心| www.yg73.com-倍投快三-| www.30mq.com-四季型人色彩测试| www.0244.net-众乐彩票是什么| www.19847.com-黑龙江十一选五私彩| www.6561.xyz-彩168手机网站| www.22851.cc-快三可提现-| www.228276.com-河南平顶山结婚彩礼| www.367162.com-彩铅星空狼画法| www.483692.com-福彩3d牛牛网字迷| www.64938.com-竞彩返点合作| www.319258.com-爱彩乐十一选五预测| www.740012.com-怎样购买福彩彩票| www.6249.vip-什么彩一分钟开一次| www.45484.com-bbin彩票刷水| www.455778.com-七星南国彩票社区| www.6369.pw-体彩二等奖| www.49754.com-江苏福彩15选5| www.021213.com-杭州福彩-| www.527673.cc-重生时时彩二星走势| www.633332.com-篮彩单场-| www.554717.com-七天彩票可靠吗| www.656557.com-易彩网大发时时彩| www.734004.com-贵阳竞彩快三| www.823907.com-三彩加盟电话| www.910321.com-百度乐和彩网| www.973098.com-七彩玫瑰永生花| www.pr59.com-快三什么是全骰| www.15hq.com-全民赢彩票提现| www.483.xyz-怎么玩黑彩赢钱| www.140095.com-彩票店兑奖有返点么| www.254715.com-甘肃快三技巧与规律| www.81121.com-全民彩票用户注册| www.054005.com-mc彩票-| www.731090.com-我想买彩票如何申请| www.37xy.com-买七星彩用什么软件| www.804126.com-会员登录王者彩票| www.901005.com-体福彩-| www.984181.com-糖果彩快3-| www.ef32.com-惠民彩票app| www.r08.in-大乐透彩票指南报纸| www.64cb.com-奥克足彩网-| www.123261.com-精彩音乐-| www.222415.com-854彩票-| www.318005.com-免费永利彩票源码| www.447283.com-360彩票对比| www.04214.com-如何用手机买彩票| www.99350.com-时时彩任二组选| www.288863.com-彩票123网址导航| www.486355.com-陕西福彩开奖时间| www.121849.com-易彩网双色球预测| www.022601.com-福彩3d推荐断组| www.112841.com-竟彩网计算器胜平负| www.221387.com-牛彩票开奖直播现场| www.308291.com-彩票群倍投技巧| www.233741.com-上海快三遗漏| 500万彩票www.96386x.com| www.lr30.com-重庆老时时彩360| www.z22.top-云购彩票最新邀请码| www.150909.com-彩店818app-| www.183499.com-山西福彩快三走势图| www.320689.com-彩站专用电视走势图| www.521120.com-登录时时彩网站| www.769599.com-好彩无嘴烟-| www.903740.com-那个彩票合买平台好| www.979418.com-铁盒好彩烟-| www.cp5341.com-北京快三开奖时间| www.mn45.com-利用时时彩漏洞赚钱| www.1de.cc-天福彩票可靠吗| www.05an.com-足球竟彩网比分直播| www.976053.com-为什么重庆不要彩礼| www.bu1.cc-彩民彩票app| www.wz86.com-七星彩查询号码查询| www.13hh.com-微彩排列五微彩论坛| www.021080.com-拉菲时时彩平台下载| www.040833.com-玩体育博彩能赚钱吗| www.637572.com-学校彩票公益金| www.705389.com-彩发发软件免费下载| www.773138.com-用概率学计算时时彩| www.853867.com-365彩票能提现吗| www.903751.com-万豪彩票可靠吗| www.962031.com-河南彩涂铝板生产商| 红旗彩票www.39957c.com| www.ff18.com-查询彩票开奖软件| www.wz79.cc-七星彩网易开奖时间| www.15su.com-彩虹六号电脑配置| www.908.tv-买彩票会赚钱吗| www.5048.org-福彩三d毒胆计划| www.044480.com-彩票开奖api| www.133172.com-彩钢围挡厂家石家庄| www.895753.com-福利彩票怎么合买| www.975365.com-下载博牛彩票| www.631291.com-七星彩对奖表| www.728949.com-新浪爱彩双色走势图| www.809101.com-新彩民中奖-| www.877221.com-113彩票app-| www.967480.com-彩票计划导师微信| 68彩票www.68689n.com| www.gf42.com-鸿运5分彩走势图| www.xp07.com-彩票机选中奖| www.19mm.cc-体彩中了三个亿| www.3970.net-男方不给彩礼钱| www.sr.cc-快三游戏叫什么名字| www.099259.com-五福彩821cc| www.948856.com-辽宁福彩好运4开奖| 幸运众彩www.108095.com| www.on08.com-管家婆彩图-| www.138747.com-新彩票走势网页| www.303756.com-甘肃省福利彩票中心| www.310026.com-体育彩票怕列三论坛| www.477477.com-3d福彩今天排例五| www.568810.com-买彩票中20万| www.8614.cc-599彩票合法吗| www.071163.com-体彩代销证到期了| www.265031.com-快三网上有人带着买| www.n55.cn-879彩票三分快三| www.583.me-彩票套彩方法大全| www.8177.cc-2019高频彩-| www.29522.cc-福迠体彩-| www.f94.pw-彩票11选五北京| www.77yk.com-买足彩靠谱吗| www.122418.com-微信群有人带时时彩| www.207722.com-11选5购彩平台| www.562312.com-中福快三哪儿的| www.623555.com-竞彩猫推荐-| www.679751.com-正规官网彩票网站| www.739471.com-彩宝彩票ios版| www.790488.com-好彩丨预测-| www.860728.com-幸运快三第一户| www.901884.com-免费下载内蒙古福彩| www.951072.com-章鱼足球彩票推荐|