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.32679.cc-福彩七乐彩兑奖期限| www.030158.com-彩票合买网站骗局| www.456663.com-彩易网福彩3d预测| www.04ci.com-彩库宝典安装不了| www.2062.me-最新彩虹台直播源| www.11851.cc-代理平台彩票| www.96927.cc-竞彩足球预测大神吧| www.089368.com-台北天地快三真假| www.6342.shop-乐享彩票靠谱吗| www.37465.com-旧板彩经网走势图| www.201205.com-七星彩前四位| www.851310.com-买彩网8721-| www.970322.com-天天乐彩地址在哪里| www.7506.cn-小型体彩机-| www.88654.cc-人人中彩票手机下载| www.148152.com-黑龙江福彩20分| www.316658.com-手机下载新浪爱彩| www.98kw.com-黑彩返点-| www.5743.cm-体彩6十1选号方法| www.57671.com-全球彩手机版下载| www.023986.com-田林县韦彩迷| www.116028.com-风雨彩虹是什么意思| www.51265.cc-福彩三地试机号今天| www.179849.com-易彩快3下载| www.267921.com-竞彩500足球| www.355771.com-竞彩中奖交多少税| www.475980.com-甘肃北控国彩| www.799760.com-送彩金的彩票手机版| www.880693.com-大师彩票安全吗| www.jv09.com-3d彩乐乐预测| www.052844.com-500万足彩比分| www.179610.com-新吉林快三开奖结果| www.261164.com-众博彩票怎样| www.344480.com-专业彩票网-| www.422767.com-合买彩票中奖的例子| www.521120.com-登录时时彩网站| www.602301.com-游戏厅里玩游戏彩票| www.695670.com-足彩混合投注| www.1581.com-彩票收藏目录| www.12356.com-体彩足球竞彩预测| www.77345.cc-手机玩彩票违法吗| www.028760.com-体彩七位数历史开奖| www.107528.com-专业彩票改单| www.176552.com-百盈快三怎么买稳赢| www.672573.com-彩八仙在线网页版| www.761881.com-足彩竞彩购彩app| www.cai9844.com彩票5d-| www.sa23.com-彩票今日幸运号码| www.5262.top-彩票站营业时间时间| www.12590.com-体育彩票正规app| www.004116.com-彩票怎么玩儿不输| www.111156.com-易彩网快三-| www.66801.com-体育彩票好卖吗| www.036564.com-竞彩中国-| www.148099.com-中彩票后的小说| www.236135.com-互娱彩票注册码| www.313853.com-幸运彩票提款被拒绝| www.074757.com-彩富内莫资料大全| www.928916.com-网上的福彩计划师| 快彩www.81678y.com| www.mw69.com-66微彩票下载安装| www.4474.cn-88彩票十一选5| www.92wt.com-彩票下单助手正规吗| www.38297.com-河北福彩中心地址| www.012384.com-七星彩什么时候开奖| www.161054.com-那个彩票平台送彩金| www.11317.cc-纵横3d彩票一一| www.88178.cc-彩票2019035| www.089284.com-快中彩北京体彩网| www.175103.com-幸运快三有什么猫腻| www.622022.cc-01彩票欢迎你| www.737653.com-澳门买的意大利彩金| www.690671.com-足彩19045推荐| www.58dm.cc-彩8提现不了怎么办| www.2809.vip-趣彩网投注可信吗| www.9328.pw-统一彩票靠谱吗| www.54324.com-彩68送28-| www.025405.com-重庆时间时彩| www.765523.com-千禧彩票网-| www.cp0512.com-鸿运快三是骗人的吗| www.c63.cm-休肓彩票7位数| www.555.cx-a9彩票骗局-| www.7951.loan-五彩椒有毒吗| www.45577.com-彩薇花化妆品怎么样| www.88425.com-英国彩票税-| www.cp863.com-参与网络福彩快三| www.247300.com-网易新快三在哪里买| www.363306.com-工笔重彩-| www.466792.com-七星彩截止购买时间| www.553976.com-彩蛋连连看-| www.621611.com-怎样买快三分分彩| www.687330.com-湖南体彩网排三预测| www.106650.com-世界杯买足彩赔死了| www.267549.com-彩票翻倍模式| www.51639.cc-广东彩票软件| www.050222.com-黑彩坐庄也能输吗| www.176179.com-彩票计划网页| www.258928.com-彩票概率计算软件| www.339612.com-足彩怎么买冷门| www.410255.com-福彩三十六选期开奖| www.509599.com-交友网拉人买彩票| www.574210.cc-守信彩票跟导师| www.661241.com-彩票中奖指南最新版| www.731876.com-彩色纸箱图片大全| www.801694.com-彩云自然酒店佛山| www.872833.com-遵义彩票中心在哪里| www.981734.com-排列三新彩预测| www.tw1.com-全民彩票下载| www.h85.com-福彩3d攻略书籍| www.62fe.com-黔东南体彩中心| www.19251.com-福利彩票能买大乐透| www.66420.com-京东彩票游戏赚钱吗| www.019490.com-福彩快乐十分输钱了| www.541210.cc-江苏吴江福彩快三| www.931335.com-大吉彩票下载| www.976364.com-彩票开奖号是多少| www.jq53.com-五百彩票网官方端口| www.a37.xyz-吉林快三跨服| www.19al.com-c更多精彩视频| www.068.cm-腾讯彩票游戏| www.3458.in-易博国际时时彩| www.8950.org-盛兴彩票v3官网| www.363601.com-生涯彩虹图理解| www.504068.com-体彩中奖代码怎么看| www.576614.com-御彩轩时时计划| www.638797.com-体彩店生意好不好| www.778437.com-深圳体彩大奖兑奖| www.852810.com-大同彩票平台登录| www.937329.com-福中彩票-| www.984464.com-爱乐彩票官方下载| www.gt43.com-福彩图谜总汇| www.z43.net-金彩网正规吗| www.74hv.com-久久彩票举报| www.2254.biz-福彩要改正式工了吗| www.180070.com-街机新快三叫啥| www.598161.com-分分时时彩一码技巧| www.966136.com-福彩中奖信息| 500彩票www.50051o.com| www.ml35.com-好彩堂论坛-| www.131365.com-河南郑州彩礼多少| www.7737.top-体彩大乐透人工计划| www.49811.com-摩羯竞彩足球app| www.015822.com-中国彩票十分钟| www.270777.com-093彩票违法| www.929342.com-盈彩在线下载安装| www.979168.com-欧盟好彩好不好抽| www.10iu.com-租彩票网站-| www.98lz.com-博彩交流网-| www.040507.com-9购彩下载-| www.09lg.com-福建体彩音乐聊天空| www.059292.com-时时彩开奖号码记录| www.153646.com-七星彩中奖城市查询| www.236432.com-乐乐彩票网是真的吗| www.303014.com-福彩三d走势图表图| www.365965.cc-现场更精彩怎么说| www.469755.com-网易福粉快三| www.388146.com-北京回华彩置集团| www.589998.com-福彩3d进宝图| www.669122.com-彩票客户数据购买| www.741881.com-湖北快三论坛群| www.650702.com-打地鼠游戏教案彩虹| www.847887.com-最好的彩票助赢软件| www.930879.com-198彩官网-| www.974804.com-体彩大乐透购买截止|