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天

知道了
时时彩一天赚2000技巧 www.381641.com-玩时时彩的群| www.89903.com-七彩视界ios| www.092253.com-吉林快三怎么玩| www.365.link-爱彩彩票官网首页| www.7297.pw-传统彩计划-| www.725603.com-彩票是否合法| www.203663.com-福彩5d怎么不卖了| www.065229.com-乐迎彩票正规吗| www.w93.club-试玩彩票应用软件| www.vo4.com-马来西亚彩票官网| www.155468.com-广西淘宝快三走势图| www.616697.com-扬州彩票店转让的吗| www.279109.com-福彩三的170彩票| www.ux73.com-宁夏快三49-| www.585167.com-免费彩金注册就送| www.976060.com-林州市结婚彩礼| www.596507.com-今日头彩软件| www.734394.com-凤彩网福彩3d| www.5lz.cc-和彩心得与技巧| www.9398.online在国外做彩票合法吗| www.h11.cn-安然七星彩预测| www.49ar.com-私人彩票是否合法| www.08222.cc-彩票站牛逼宣传语| www.898316.com-什么软件可以扫彩票| 博友彩www.455518.com| www.777460.cc-下载澳客网竞彩| www.985036.com-福利彩票真有人中吗| www.01vc.com-ig新传统彩靠谱吗| www.28928.cc-甘肃快三游戏规则| www.038819.com-彩票开奖查结果查询| www.gd75.com-娱乐快三开奖| www.my1.com-一分快三官网app| www.0my.com-买足球彩票软件下载| www.996.xyz-特区彩票论坛下载| www.5047.xyz-江苏体彩十五选五| www.95336.com-竞彩与外围对冲公式| www.108487.com-下载彩票开奖查询| www.199702.com-体彩481开奖查询| www.ee29.com-快开彩票-| www.2187.shop-皇城彩票网址登录| www.04999.com-高腾体育彩票终端机| www.4933.wang-彩票打码是什么| www.985509.com-彩票2元网首页官网| www.5092.cn-彩票会第二天重复吗| www.534326.com-一分彩和值的技巧| www.532379.com-彩票大乐透有规律吗| www.009900.cc-华彩平台是什么| www.577.cm-360足球竞彩投注| www.436495.com-福彩三d北京谜语| www.315377.com-500彩票客服| www.373925.com-福利彩票中几个数字| www.721126.com-福彩快三网app| www.09xh.com-www.彩八com| www.932167.com-本期七星彩结果| www.35fb.com-足彩亚盘看水位技巧| 万利www.32123f.com| www.229356.com-百盈彩票网址谁有| www.311391.com-三分彩网站-| www.378955.com-好彩网app网赚| www.708411.com-佰万彩票app下载| www.851512.com-快三大小研究| www.cai6244.com河北快三开奖爱彩乐| www.688508.com-uu彩票ios-| www.781442.com-七星彩今晚开什| www.861958.com-辽宁有快三吗| 顺丰彩票www.sfk3.com| www.94341.com-体彩足彩赔率| www.109710.com-彩票挂机投注软件| www.272540.com-五快三良好的内容| www.455980.com-网上怎么打彩票| 500彩票网www.97655d.com| www.023453.com-福彩助手l-| www.wt15.com-彩票121走势图| www.0083.cc-福利彩票地方彩开奖| www.302.site-买彩票赔多少钱| www.4046.cn-混合竞彩计算器| www.297.red-七星彩没人买| www.5187.xyz-足彩不惧亚洲杯| www.19550.cc-福利彩票兼职靠谱吗| www.cai9822.com内蒙快三连线走势图| www.s19.com-山东体彩网首页| www.5427.vip-云南省体彩网| www.092608.com-订婚四彩礼-| www.2267.vip-体彩高频开奖调整| www.5776.xyz-足球竞彩258| www.947586.com-福彩有几种-| www.cai6277.com吉林福彩快三走势| www.7156.loan-八面通七彩影院影讯| www.612525.com-幸福彩手机报付费吗| www.733779.com-下载福建体彩走势图| www.956097.com-买彩票买什么样的| www.nn23.com-彩票选号器手机版| www.11kv.com-体育彩票店转让合同| www.666392.com-七星彩三位数多少钱| www.849278.com-彩缘彩票客户端| www.984620.com-奖多多酷彩吧| www.076572.com-体彩直播室-| www.193138.com-韩国快三开奖| www.0028.site-8位数字的湖北彩票| www.538546.com-彩报图厍今天| www.610361.com-彩铅画简单的花苞头| www.678356.com-体彩牛彩涂迷总汇九| www.967353.com-彩票合买群名怎么起| www.bh24.com-官方快三彩票有哪些| www.672526.com-福州体彩购买点| www.427432.com-k彩5分快3-| www.559107.com-下载内蒙体彩| www.670746.com-七彩色是标准样板| www.902496.com-黑彩绑定的银行卡| www.960814.com-体彩排列三出奖号码| 博亿彩票www.663by.com| www.45974.com-亿彩40066登录| www.2566.me-山东体彩扑克3规律| www.9406.shop-中国彩票3d迷图| www.yf07.com-什么叫派彩-| www.ez30.com-彩90彩票信誉| www.72fg.com-彩票独赢什么意思| www.928717.com-来自旺彩社区人民钱| www.77440.cc-今日体彩试机号查询| www.020704.com-福彩3d布衣天下一| www.092699.com-商丘彩礼-| www.921928.com-彩神争vlll苹果| www.cp780.com-手机摇快三出号规律| www.631610.com-海南七星彩卖奖软件| www.752020.com-我想中彩票一等奖| www.838555.com-丹麦28彩票平台| www.905330.com-竞彩足球计算器玩法| www.961114.com-内蒙古体彩网点| 8号彩票www.81520j.com| www.799857.com-快三可以回本吗| www.047388.com-快三代理能致富吗| www.37791.com-520彩世界-| www.587308.com-鸿鑫彩票-| www.680956.com-七星彩怎么做代理| www.809729.com-今日体彩中奖号是| www.948475.com-三d彩报图今天的| www.cai7855.com快三走势图河北省的| www.039094.com-福彩怎么玩儿| www.141318.com-58彩票安卓版| www.580131.com-彩票送金网-| www.3650.org-石家庄彩票站转让| www.279359.com-三分时时彩免费计划| www.358401.com-重庆老时时彩高手群| www.428813.com-苏州福彩官网| www.509262.com-香港旺角彩妹| www.26ag.com-买快三的技巧稳赚| www.35544.cc-彩民红心水i论坛| www.678796.com-注册送168彩金| www.020035.com-中彩网幸运快三| www.46656.com-彩神uv卷材打印机| www.7719.pw-304彩票-| www.399562.cc-e赢彩官网-| www.522566.com-05oo彩票零售版| www.605833.com-云南福彩官方网站| www.689100.com-3d彩友沙龙-| www.779772.com-福利彩票福彩3d诗| www.869738.com-唯彩会老版-| www.cai8544.com快三河北今天开奖| www.ra89.com-生日号码怎么买彩票| www.490009.com-快三九宫图-| www.563917.com-官方网人人中彩票| www.391164.com-彩票胆拖样板| www.990940.com-5分快三麒麟团队| www.s03.shop-广西快三淘宝|