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.87rh.com-淘宝上买彩票合法吗| www.891696.com-腾讯五分彩走势图| www.973152.com-彩虹玫瑰种子| www.rw8.com-河北福彩三d走势图| www.750498.com-中彩在线办公系统| www.936876.com-四季彩票登录一| www.aj68.com-更早彩票开奖结果| www.07eq.com-梦幻彩铅画手绘| www.0731.la-刷彩赚佣金客服| www.17170.com-福彩3天天彩图| www.98sa.com-盛彩网站-| www.806488.com-竞彩足球模拟| www.929195.com-什么是网上打彩| 亚投彩票www.ya115.com| www.033791.com-彩票排五-| www.4ll.com-一分彩票怎么玩| www.053.xyz-下载好运彩-| www.6819.me-体彩投注码-| www.33571.com-喜鹊彩票-| www.001474.com-金冠彩票软件下载| www.6670.org-体彩数字云平台| www.268446.com-彩票2元网走势| www.32pr.com-彩票会员中心| www.0580.pro-3d彩报第三版图| www.7445.top-上海体育彩票店| www.832110.com-七彩彩票软件| www.915009.com-大发快三优信彩票| www.997591.com-开心网七星彩手机版| www.em71.com-快三出豹子的跨度| www.315682.com-上海体彩兑奖中心| www.cp4799.cc-uu快三-| www.679131.com-什么网站有彩金送| www.803848.com-体彩19054-| www.005918.com-彩16在线登录| www.345432.com-大无限捷豹彩票| www.ek65.com-彩票投注模式| www.121885.com-双色球走势图易彩网| www.7509.pw-体彩店老板怎么兑奖| www.286969.com-中国福利快3彩票| www.962323.com-网上买彩票哪个靠谱| www.369751.com-三分时彩app| www.yw95.com-甘肃快三选号技巧| www.202530.com-彩之星江苏快3| www.0681.org-彩八仙pk手机版| www.5918.cm-吉林快三赔付| www.13066.com-什么购彩平台好| www.69743.com-山东11选5彩票| www.719293.com-澳门十分彩官网下载| 188彩票www.188932.com| www.699195.com-福彩七乐彩单式玩法| www.039895.com-网投彩票赚钱靠谱吗| www.c8.net-彩票开奖查询七星彩| www.297879.com-河北福彩试机号| www.287230.com-彩票代理佣金| www.412410.com-福彩的秘密通道| www.121845.com-澳洲时时彩历史开奖| www.439930.com-鼎盛国际时时彩| www.572609.com-天天时时彩计划网站| www.x27.com-网易彩票电脑版网页| www.118619.com-福彩快三窍门| www.216828.com-快三平台都有什么| www.034932.com-彩票71是什么意思| www.529392.com-彩票开奖是录播| www.52376.com-天猫彩票提款失败| www.00963.com-吉林快三下一期预测| www.932205.com-大发快三哪个平台稳| www.133813.com-皮得欢好彩1预测| www.773482.com-微彩吧能不能提现| www.082870.com-快三有多少个号码| www.887744.com-靠谱彩票平台| www.972643.com-彩铅意境画-| www.ha93.com-518彩票网正规吗| www.037363.com-高手网彩票资料大全| www.390381.com-极速时时彩的规律| www.271907.com-862彩票-| www.396098.com-星期天开什么彩票| www.50dy.cc-玩快三有什么平台| www.sk48.com-3d中彩网论坛| www.684374.com-福彩3d中国龙| www.682705.com-中国彩票软件| www.785293.com-吉快三遗漏-| www.762849.com-特彩吧高手网齐中彩| www.844488.com-福彩体彩合营| www.903259.com-福彩3d和值谜语| www.962737.com-3d彩吧牛彩图库| 彩世界www.99788f.com| www.406234.com-描写彩虹的唯美句子| www.971254.com-彩迷葫芦弟双色球| www.64uf.com-新浪分分彩app| www.7938.com-色彩雫最热门颜色| www.53733.com-向日葵时时彩| www.040067.com-福彩数据统计| www.55265.cc-吉林省快三推荐号码| www.011292.com-广西福彩快3开奖| www.iv08.com-福建即乐彩走势图| www.v16.shop-彩吧论天气网| www.741724.com-南京快三走势图| www.860891.com-辽宁体彩票11选5| www.947921.com-彩经网双色球推荐| www.nb5.cc-福彩3d和值表图| www.08zj.com-掌上彩票手机版下载| www.190993.com-内蒙古快三玩技巧| www.581076.com-快乐彩票平台可靠吗| www.705125.com-网易彩票推荐人| www.773532.com-彩票平台手机版| www.845856.com-体彩类型-| www.255091.com-彩500快三-| www.990178.com-彩乐汇-| www.289239.com-福建即时彩开奖| www.31932.cc-天天好彩开奖时间| www.r66.online-快三会上瘾-| www.6298.top-彩涂卷板-| www.8897.net-旺彩买彩票安全么| www.853622.com-北京快三两期计划图| www.2613.cc-如意彩免费资料大传| www.9443.org-二分彩怎么玩| www.105027.com-好彩双爆珠新加坡| www.13067.com-中国福利彩3d| www.920328.com-支付宝可以买彩票吗| 凤凰彩票www.88266c.com| www.758844.com-福利彩票微信代理| www.827068.com-珠江彩票幸运飞艇| www.297401.com-什么是快三游戏| www.00261.com-下载好彩网-| www.33304.com-网易彩票走势图下载| www.631240.com-博彩刷流水的好方法| www.731724.com-8k彩票登录-| www.822929.com-彩铝板装饰-| www.20793.com-竞彩误差值怎么看| www.038607.com-爱彩乐电脑版下载| www.121868.com-作弊彩票-| www.232939.com-海南快三开奖| www.57cy.com-福彩中心加盟电话| www.9308.vip-乐彩实战擂台论坛| www.685618.com-799彩票官方网站| www.673072.com-微信彩票竞猜作弊| www.886676.com-福利彩票奖金分配表| www.r87.net-福彩3d777彩报| 七星彩票www.22qxc.com| www.636089.com-彩虹糖小豆机| www.786086.com-北京福彩快乐3开奖| www.969883.com-为什么不关闭彩票| www.li45.com-共赢团队彩票计划| www.465269.com-竞彩足球官方版下载| www.521274.com-有专门破解黑彩平台| www.397797.com-彩票店主互联网售彩| www.93731.cc-彩70彩票可靠吗| www.417584.com-彩绘龙鸟纹漆盘| www.532808.com-彩吧图库第三板| www.596031.com-甘肃省体育彩票网| www.653929.com-竞彩提点多少| www.386293.com-南充市福彩中心站| www.753462.com-彩票12网址-| www.861380.com-中国体育彩票任选3| www.914838.com-新浪网首页体彩| www.970105.com-网上售彩票合法吗| 500彩票www.51515y.com| www.iy03.com-连中彩票和全民彩票| www.196020.com-百宝彩票走势图| www.255836.com-速彩网大发快3| www.317290.com-玩时彩输了六十万| www.369217.com-新疆体彩兑奖地点| www.430141.com-重庆竞彩分析师招聘| www.511884.com-写实彩铅人物|