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.78700l.com| www.306.in-足彩卖料骗局| www.58679.cc-3d银海彩报-| www.37887.com-体彩金孔雀连出吗| www.910836.com-京彩_首页-| www.cai120.com-吉林省快三开奖号| www.6340.com-亚洲彩导航-| www.22219.cc-双色球唯彩看球杀蓝| www.83210.cc-彩票翻倍追号| www.073256.com-全民快三聊天室| www.8592.biz-体彩龙彩给胆| www.655033.com-局王七星彩图纸| www.089411.com-全国快三最多的网站| www.271869.cc-福彩和值表-| www.487868.com-趋势王彩票分析下载| www.73rc.com-福彩开奖排五玩法| www.10884.com-竞彩网足球比分直播| www.888874.cc-中信彩票是不是真滴| www.237563.com-中国体彩网比分直播| www.47651.com-好彩妹仙藤咒语| www.7bw.cc-买彩票如何入账| www.61681.com-彩票守号10期| www.860232.com-河内时时彩计划全天| www.395181.com-安徽11选5彩票| www.657002.com-竞彩足球微信公众号| www.45ra.com-盛大彩票正规吗| www.255437.com-五星时时彩做号技巧| www.637600.com-体彩公益金工作总结| www.2853.biz-网上禁止买彩票了吗| www.339461.com-深圳福彩中心网| www.57160.com-锋彩直播去升级版| www.52371.cc-天猫国际城彩票| www.174222.com-三分快三平台登录| www.402079.com-竞彩足球九场奖金| www.yw50.com-北京11选五爱彩乐| www.4159.biz-七彩赚钱是真的吗| www.276357.com-分分快三是假的吗| www.949395.com-陕西体彩11选5| www.381433.com-彩彩大咖是什么意思| www.cai0077.com快三中奖规则和奖金| www.012773.com-手机摇彩票-| www.49yl.com-彩票中奖查询结| www.38802.com-淘彩网是正规的吗| www.110940.com-湖北福利彩票新彩种| www.380488.com-好彩网双色球走势图| www.652706.com-重庆20分彩-| www.fi85.com-福彩3d论坛乐彩网| www.30743.com-福彩3d开奖回查| www.xz03.com-福彩3d图迷总汇九| www.69066.com-亚洲购彩网能提现吗| www.554876.com-彩神争争霸一| www.880414.com-3d新彩网免费预测| www.8811.ren-南方彩票手机| www.020012.com-彩彩票导航-| www.798624.com-545彩票导航| www.18655.cc-福利彩票三地开奖号| www.5775.net-体彩排列五中奖图片| www.663115.com-牛彩一句定三码9| www.6318.biz-双色球福彩走势| www.74853.com-重庆时时彩害了我| www.086018.com-幸运星彩票是骗局么| www.835633.com-今天好彩一-| www.963654.com-彩乐乐双色球专家杀| www.iq08.com-网易快三是骗局揭秘| www.64ld.com-众彩网怎么提现| www.17185.cc-体彩退机申请| www.080145.com-体彩七星彩中奖玩法| www.284884.com-体彩排三和值对照表| www.856793.com-菲律宾体彩公司工作| www.220022.cc-快三内蒙预测| www.218889.com-凤彩app-| www.97yf.com-网上黑彩怎么举报| www.596435.com-中国福彩安卓版下载| www.804656.com-幸运之门彩票大全| www.69580.cc-爱乐透彩票安全吗| www.356426.com-单位发彩票中奖| www.974547.com-江苏福彩快三奖金表| www.12372.com-大乐透彩乐乐| www.025117.com-五亿彩app-| www.486785.com-榆林福利彩票店转让| www.948341.com-牛彩彩摘网-| www.91087.com-福利彩3d分析软件| www.nh48.com-旧版彩票365| www.85922.cc-58福彩官网-| 盛大彩票www.c6823.com| www.2371.org-七彩幸福菊真的假的| www.950061.com-禁止出售彩-| www.31163.cc-快三复式万能5码| www.978895.com-快三如何倍投| www.09089.com-怎么购彩票-| www.059663.com-福利彩票中心主任| www.287897.com-彩票中奖装b神器| www.ey99.com-123采彩票网| www.69858.cc-彩运8.首页-| www.56373.com-彩富网高手-| www.207133.com-彩71是真的吗| www.410815.com-本金2000玩彩票| www.580489.com-快彩票下载安装| www.948779.com-福彩3的d走势图| www.847839.com-58同城彩票邀请码| www.kw12.com-体彩排三近十试机号| www.254679.com-好彩店彩票官方网站| www.897606.com-竞彩足球全部赛程| www.108706.com-福利彩票三d开奖号| www.09om.com-旺旺时时彩安卓版| www.298305.com-冀彩宝站主平台| www.853369.com-连中彩票和易宝支付| www.039510.com-南京华彩赢家合法吗| www.655010.com-七星彩福星长条| www.21bu.com-今天晚是几点开彩票| www.7636.cn-彩票标识牌-| www.89534.com-新彩网手机版的吗| www.782135.com-风凰竞彩下载| www.050338.com-网络黑彩案例| www.536933.com-彩票起名字的好吗| www.080105.com-福彩中彩网走势| www.199457.com-福彩专家预测| www.206068.com-福彩3地全图总汇| www.bb22.cc-江西快三怎么投注| www.115307.com-彩铅落日的风景画| www.057133.com-奥门六星彩-| www.241884.com-天天彩票-| www.919983.com-福彩3d和值奖金表| www.090630.com-彩票直通车彩票网| www.224166.com-辽宁体彩官网| www.376476.com-qq彩票金豆怎么刷| www.721157.com-我要数字彩-| www.30ec.com-彩虹网站-| www.06722.com-福彩3d两码和查表| www.11647.com-泰国彩票要怎么查询| www.440148.com-河内5分彩网址查询| 新盈彩www.xinyc3.com| www.fh8.com-新彊时时彩走势图| www.036954.com-709彩票官方版| www.974691.com-南国彩票七彩论坛| www.124083.com-凤凰彩票赚钱可靠吗| www.944843.com-三分钟彩票-| www.34859.com-福彩三d彩报三版| www.881341.com-高频彩怎么突破概率| www.fz65.com-彩世界app-| www.5156.cc-多乐时时彩平台| www.418417.com-苏州足球彩票店| www.692958.com-国家正规彩种| www.42vb.com-手机彩票开奖号码| www.081773.com-众赢刷彩团队| www.wi00.cc-澳彩开奖结果| www.264822.com-大发快三1分钟一期| www.712977.com-广东省福彩网| www.845326.com-体彩公益口号| www.370525.com-怎样弄彩票的走势图| www.165965.com-快三河北-| www.367108.com-怎样用彩铅画星空图| www.906023.com-黑彩快三有没有漏洞| www.013928.com-彩杀号-| www.qg74.com-好彩蓝莓爆珠| www.216363.com-彩票九宫图选号技巧| www.919816.com-彩票十大危害| www.60304.com-开发黑彩-| www.407156.com-足球竞彩胜平负结果| www.605212.com-孕妇梦到买彩票中奖| www.134012.cc-安微快三一定牛| www.535039.com-1号彩票下载| www.216852.com-重庆有快三吗| www.713537.com-语文课文中彩那天|