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.062701.com-时时彩送彩金25| www.055014.com-彩票平台出售出租| www.041058.com-彩票挂机计划app| www.641864.com-彩票素材-| www.337863.com-福彩今晚3d得出啥| www.989515.com-51中彩app官网| www.069755.com-神彩彩票app安装| www.455540.com-梦见老公中彩票| www.561057.com-355彩票软件下载| www.647848.com-江苏快三大小预测| www.855273.com-网上福利彩票靠谱吗| www.957778.com-七星彩668加急版| www.cai0922.com安徽福利快三| www.688234.com-竞彩2串1高手微信| www.919120.com-中国黑彩在菲律宾| www.654737.com-体彩和福彩怎么加盟| www.0471.tv-足彩即时比分dl版| www.271957.com-中原彩票能赚钱吗| www.60kn.com-网易五分彩正规吗| www.0922.xyz-怎么和别人合买彩票| www.en36.com-体育彩票购彩| www.gt14.com-7彩平台下载| www.9899.hk-彩宝网彩票开奖查询| www.966718.com-宝马彩票软件| www.mm2.com-分分快三怎么看走势| www.sd36.com-上海体彩票11选5| www.962457.com-福彩案进展-| www.cai8158.com贵州福彩中心在哪| www.x85.org-线上棋牌彩票| www.0709.com-体彩福彩要取消吗| www.11434.com-高频彩在线人工计划| www.153550.com-竟彩蓝球360| www.315148.com-怎么在手上买彩票| www.337940.com-什么软件买彩票靠谱| www.520098.com-哪国的彩票最真实| www.cp3456.cc-快三宝典-| www.31pw.com-鲜花映彩虹合唱谱| www.247398.com-网络快三和值合法吗| www.042399.com-彩票单选是什么意思| www.516.in-o38彩票软件下载| www.2089.cn-南京福彩申请条件| www.11783.cc-泰国彩票怎么看中奖| www.383005.com-福彩在线官网下载| www.25519.com-彩库助手-| www.233343.com-北京快三详情| www.369894.com-彩生活总部投诉电话| www.629488.com-吉林快三销售几年了| www.777381.com-手机彩票怎么回事| www.41bi.com-国庆节彩票站放假吗| www.0566.com-迅盈彩票是真的吗| www.8885.mobi-竞彩八串中奖交税吗| www.60378.com-爱彩乐彩票网电脑版| www.017639.com-江苏省快3彩票开奖| www.115968.com-彩票追加与加倍| www.195833.com-走吉林快三吉林快三| www.987178.com-购彩网软件-| www.zu84.com-ro分分彩开奖记录| www.619367.com-3d彩票图纸今天的| www.194988.com-福利彩票数字3玩法| 500彩票www.395477.com| www.566096.com-创彩日本料理| www.659603.com-福利彩票双色球群| www.8883.online足球竞彩太难中了| www.64727.com-竞彩足球如何看冷门| www.2847.cn-彩虹糖蓝色什么意思| www.23832.com-七星彩怎么玩法赚钱| www.019542.com-云南体彩福彩| www.355941.com-能预知彩票奇人| www.472618.com-斯洛伐克快乐彩开奖| www.558456.com-彩铅画视频古风美女| www.637852.com-周围福利彩票店| www.710929.com-彩票刷子是什么意思| www.804472.com-710彩票下载| www.877331.com-七乐彩万能15码| www.947809.com-玩幸运彩票靠谱不| 天朝彩票www.86079.cc| www.307032.com-台湾5分彩开奖查询| 500彩票www.508477.com| www.830952.com-新彩票手机登录网址| www.036510.com-快彩app有哪些| www.160040.com-全民快三是什么东西| www.870513.com-卓易彩票官方| www.539240.com-彩票出售-| www.982708.com-好彩二四六免费资料| www.iv94.com-竞彩投注平台app| www.743734.com-网易五分彩怎么投注| www.79122.com-福彩跨度和值走势图| www.965598.com-福彩8+1多少钱| www.js42.cc-玩大小单双彩票| 金彩www.981jc.com| www.569708.com-三的开奖号码福彩网| www.839911.com-为什么要做责任彩票| www.508123.com-11选5调整彩票店| www.416342.com-uc彩票网手机版| www.79058.com-3d福彩票今日开奖| www.54766.com-福彩快三数表| www.22567.com-7星彩开奖直播现场| www.274782.com-有人玩极速时时彩吗| www.275673.com-天津时时福利彩票| www.378793.com-体彩排列五第97集| www.586985.com-welcome彩票| www.089825.com-阿里彩票安全吗| www.702505.com-竞彩怎样买才稳赚| www.c82.club-百宝彩票网群英会| www.ve49.com-易彩快买单双技巧| www.4113.vip-够力七星彩查梦册| www.9300.top-新加坡49彩票开奖| www.16525.cc-五分时时彩基本走势| www.60038.cc-海南七星彩直播开奖| www.004092.com-20分钟一期的彩票| www.058925.com-怎么买彩票中奖率高| www.466497.com-龙江福彩22选五| www.033516.com-王者彩票app下载| www.284362.com-赢彩票app下载| www.890166.com-3132彩票网站| www.174959.com-快三72期开奖结果| www.22193.com-竞彩足球单关盈利| www.120801.com-彩票多少天内兑奖| www.287325.com-易彩2.0app-| 网易彩票www.508433.com| www.006684.com-体彩店装修内部图| www.120234.com-彩票店福彩快三| www.277829.com-福彩牛彩网-| www.372733.com-贵宾彩票-| www.510212.com-彩霸王三肖-| www.612526.com-3b彩票开奖号| www.726116.com-云鼎彩票-| www.859981.com-2分时时彩计划免费| www.954453.com-浙江省体彩六十一| www.cai398.com-快三倍投大忌| www.661983.com-竞彩3串1中奖图| www.62.biz-80彩票可以提现吗| www.944589.com-湖北快三1跨遗漏| www.kk22.com-中国竞彩足球比分| www.059789.cc-江苏省地方彩票| www.270392.com-有哪些老彩票app| www.3568.cm-彩票分析数据手机版| www.976580.com-河北彩礼价目表| www.mk39.com-内蒙时时彩开奖| www.691032.com-可靠的足球彩票| www.853292.com-168彩票是黑平台| www.974953.com-棒棒彩票网页版| www.aq50.com-uu直播现场购彩| www.zp72.com-手机时彩害人| www.1951.vip-徐文轩专家彩票网站| www.794306.com-吉彩全部彩种| www.cp683.com-新快三app-| www.tj49.com-做彩票-| www.6938.in-七彩云南的意思| www.3300.cm-中国足球竞彩比分网| www.13127.cc-足彩稳胆规律| www.680613.com-彩网彩吧-| www.rk12.com-e球彩具体玩法| www.67kg.com-太原福利彩票投注站| www.724852.com-快三福彩下载| www.874696.com-快三半顺图片| www.dw33.com-福彩快三手机版下载| www.239836.com-王者彩票安卓下载| www.hu84.com-快中彩北京体彩| www.45289.cc-大快发彩票-| www.302806.com-彩票天下23cc| www.545184.com-浙江福彩15选5| www.805351.com-中超竞彩-| www.910622.com-福彩时时彩多种玩法|