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天

知道了
彩票256平台 www.040064.com-快三大发qq群| www.49fm.com-四川体彩网开奖结果| www.4577.cm-易彩堂登陆-| www.65vo.com-乐彩直播-| www.120217.com-澳门五分彩怎么提现| www.246644.com-彩票高频游戏禁售| www.365028.com-套彩是什么-| www.507363.com-亿彩江苏快三真的吗| www.609358.com-彩票11选5玩法| www.686089.com-大众彩票下载| www.781042.com-福彩天下无敌2| www.873843.com-黔东南体育彩票中心| www.964867.com-彩票数学原理| www.ay85.com-去国外做私彩| www.44dz.com-七彩建设集团背景| www.004677.com-查体彩排列五中奖号| www.115847.com-足球彩票胜负比分| www.234161.com-揭秘网赌彩票| www.354022.com-潮信玩彩票的软件| www.240996.com-彩铅画鲸鱼-| www.814224.com-安徽快三官方网站| www.30444.com-大连市体彩中心| www.032533.com-假彩票店-| www.133031.com-足彩角球在哪里买| www.238791.com-5亿彩票app下载| www.336613.com-中国体彩中心电话| www.049949.com-体彩试机号30| www.192650.com-中国3d福利彩票| www.334233.com-福彩通app注册码| www.126540.com-彩com31彩票| www.129521.com-七星彩票论坛社区| www.441139.com-派彩甘肃快三走势图| www.45006.com-彩票01是正规的吗| www.016590.com-体彩大乐透能中吗| www.057526.com-彩吧三d图谜| www.182881.com-大发快三官方开奖| www.254681.com-uu直播彩票破解| www.363355.com-彩虹桥作文-| www.465746.com-大众彩票网址| www.559786.com-内蒙时彩开奖号| 网易彩票www.095wy.com| www.lw48.com-五分快三怎么玩稳赚| www.298916.com-甘肃逸彩快三走势图| www.4559.biz-彩票买什么号中奖| www.37898.cc-彩票顶呱刮下载| www.017184.com-吉林市彩票站出兑| www.xg40.com-977彩票网站| www.588680.com-七星彩今晚的头尾| www.678380.com-大发快三算诈骗吗| www.781452.com-九龙彩票网-| www.877298.com-买彩票几点结束| www.974006.com-福彩有几种刮刮卡| www.jn99.com-下载五亿彩app| www.768168.com-淘彩app怎么下载| www.569535.com-3d彩吧图库今天| www.22fy.com-大乐彩票开奖查| www.1024.pro-赢彩彩票应用合法吗| www.8737.xyz-高频彩开奖视频| www.53117.cc-汇彩国际平台手机版| www.70ho.com-福彩大乐透玩法| www.9602.xyz-神马彩票网页| www.158157.com-彩通彩票-| www.303778.com-陇南福彩中心| www.4602.top-彩票要不要守号| www.968401.com-时时彩暂停开奖| www.ba71.com-江西体彩网官方网站| www.13pz.com-福彩3一定牛走势图| www.5566.space-马来分分彩是真的吗| www.74063.com-同志彩虹旗高清壁纸| www.523091.com-谐彩纺织旗舰店| www.749363.com-上市彩票公司| www.826119.com-体彩2元网走势图| www.917203.com-彩票88有谁受骗吗| www.980896.com-开个彩票店赚钱吗| www.ei82.com-8年玩彩经验| www.a92.cn-彩虹伞配那些音乐| www.671650.com-排列五中奖彩票图片| www.794909.com-新彩网3d字-| www.916186.com-彩票站什么时候淡季| www.cai96.com-今天广西快三开奖| www.vw17.com-网购彩票-| www.55dd.com-点彩票二维码扫描| www.3881.vip-体彩兑奖中心在哪里| www.51456.com-好运彩彩票可靠吗| www.854557.com-彩乐乐安徽快三走势| www.25az.com-周傅峰华彩| www.1475.pw-彩票中奖保密| www.619505.com-体育彩票怎么过户| www.826755.com-玩98彩安全吗| www.101871.com-红彩网络直播平台| www.387768.com-彩一万官网-| www.583860.com-足彩加软件vip| www.523303.com-喜乐彩票下载安装| www.599229.com-欢乐彩手机版下载| www.672279.com-免费领取彩金| www.770508.com-时时彩停止2019| www.881574.com-13彩下载-| 万利www.32123n.com| www.730659.com-足彩竞彩新浪体育| www.85958.com-纳米彩铝板-| www.111601.com-彩票兼职赚佣金| www.244392.com-京东彩票客服| www.080031.com-3d彩票九码规律| www.219043.com-百姓彩票网介绍| www.wy00.com-中彩网是官网吗| www.618382.com-足彩北京单场| www.800876.com-精英彩票-| www.ga87.com-内蒙福彩快三走势| www.330268.com-体育彩票开奖七星彩| www.526932.com-百信彩票下载安装| www.629975.com-彩票65期-| www.727631.com-天天好彩949cc| www.788971.com-足彩推单-| www.850569.com-家庭成员生日彩票| www.900458.com-网络彩票能赢钱吗| www.955868.com-手机买彩票能开挂吗| www.998284.com-中国正规彩票有哪些| www.ar36.com-体彩吧-| www.782923.com-彩票中奖者自述| www.870009.com-河北快三的玩法介绍| www.936236.com-买彩票能赚钱吗| www.994348.com-彩票投注网站排行榜| www.nc7.cc-人人中彩票维护公告| www.of43.com-福彩开奖双色球直播| www.0ph.com-流文溢彩开头| www.69ma.com-七星彩社区论坛| www.5604.cc-体育博彩论-| www.047699.com-3d彩报第三版图迷| 福彩www.2109p.com| www.723766.com-智博微彩网-| www.813193.com-乐透型彩票-| www.889182.com-福彩3d胆码预测王| www.28lo.com-国家体育彩票官方网| www.472.win-福彩快三限号规定| www.4129.cm-沙特评价彩虹无人机| www.8658.com-名爵国际博彩| www.23129.cc-彩乐乐湖北快三推荐| www.175500.cc-全部快三下载| www.264133.com-老彩民app-| www.00059.cc-今天的彩报图第一版| www.70158.com-数据最全的足彩网站| www.053513.com-彩票网计划-| www.131726.com-彩礼最低的省份| www.207229.com-彩票大厅-| www.269289.com-518彩票9218| www.329641.com-福彩体彩谜语藏机图| www.387836.com-永盛彩票走势| www.75870.com-福彩彩涂-| www.34896.com-重庆时时彩骗局微信| www.69088.com-澳客竞彩足球电脑版| www.80yh.cc-彩票代投骗局| www.70465.com-好彩票提现-| www.27iv.com-新加坡鸿乐彩开奖| www.1986.pro-智慧彩票ios| www.32pr.com-彩票会员中心| www.1098.cm-中国竞彩研究团队| www.74345.cc-彩38网站源码| www.173108.com-快三老平台-| www.682922.com-彩票app正规的| www.003894.com-梦想彩票站下载| www.895292.com-京东彩票软件app| www.969465.com-欢乐彩app网址| 中国福利彩票www.08588g.com| www.fp34.com-中国体彩大乐透玩法|