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.81392.com-昨晚福彩开奖结果| www.098361.com-gc彩票-| www.401443.com-购彩投注-| www.616880.com-彩票中奖哪里去领| www.619109.com-彩票不能在线购买| www.799755.cc-彩票白菜吧-| www.008607.com-大智慧彩票网站| www.385862.com-彩票的搞笑段子| www.970105.com-网上售彩票合法吗| www.863160.com-智慧彩快三-| 500彩票www.904829.com| www.690801.com-中国体育体彩公司| www.776557.com-时时彩四星万能大底| www.855140.com-彩票店故事-| www.917877.com-重庆时时采彩分析| www.976494.com-郑州彩票双机店| www.mq0.com-安徽快三为啥会提前| www.984836.com-竞彩赛果奖金计算器| www.63613.com-足彩竞彩交易量| www.176872.com-福建福利彩票快3| www.832580.com-怎么下载七彩视界| www.975874.com-2019年各省彩礼| www.nc90.com-彩51下载安装| www.179372.com-分分彩害人真实故事| www.544898.com-滛三国梦想星彩无惨| www.889568.com-凤凰彩世界-| www.547342.com-75彩票苹果-| www.19515.cc-腾讯时时彩计划| www.ej60.com-体彩19025-| www.111120.com-3d新彩网字谜总汇| www.200526.com-南国彩票七星彩论坛| www.67ch.com-爱中彩票下载安装| www.089035.com-休彩票-| www.736510.com-福彩三地谜语总汇| www.r17.org-三亚彩票私彩| www.74be.com-天冠彩票邀请码| www.1810.me-体彩直选三开奖结果| www.510594.com-夸女生的彩虹屁长篇| www.731449.com-易彩堂的邀请码| www.506504.com-江西福彩哪个台直播| www.85591.cc-顶呱呱彩票-| www.m81.top-33彩票是黑平台吗| www.855527.com-福彩3d浪淘沙| www.947921.com-彩经网双色球推荐| 吉利彩票www.80075m.com| www.gc29.com-排三乐彩网-| www.456194.com-乐博彩票软件| www.2241.vip-今天的彩票图| 发彩www.50732f.com| www.ra07.com-上海快三开奖规则| www.487608.com-中国福利彩票站盈利| www.509528.com-彩宝网排五走势图| www.668293.com-怎么分辨彩票黑平台| www.677643.com-湖北快三和直跨度| www.799970.com-体育彩票领奖流程| www.963284.com-彩色水磨石地坪价格| www.ac45.com-智慧彩挂机软件| www.70an.com-海南七星彩图表局王| www.3710.cc-彩友圈app-| www.eg6.com-中彩彩票官网| www.97hv.com-给彩金的游戏| www.558174.com-真钱游戏赠送彩金| www.666049.com-上海快三往期回顾| www.748989.com-600w彩票网登录| www.850265.com-比特币分分彩真假| www.24649.com-画彩铅怎么赚钱| www.378112.com-彩虹6无人机参数| www.25239.cc-彩铅涂色技巧| www.102776.com-新时彩-| www.358429.com-福彩3d太湖马后饱| www.776000.com-时时彩相对稳定玩法| www.876149.com-1516cc彩票| www.951259.com-老郑最新足彩分析| 99彩票www.065766.com| www.2244.cc-彩票对刷流水挣分红| www.57579.com-彩八仙安卓-| www.097980.com-下载万彩吧并安装| www.221797.com-彩票挂机靠谱吗| www.931.cm-七星彩机选中奖故事| www.14500.cc-七星彩复式玩法价格| www.151217.com-8816.彩票官网| www.247756.com-数字型彩票黄金定律| www.318940.com-上饶体彩中心电话| www.567333.cc-昆山福彩-| www.724832.com-中彩微网-| www.950340.com-乐彩网怎么打不开| www.bp51.com-彩票缩水大师| www.204010.com-彩票有多少种玩法| www.vd27.com-彩神通今日试机号| www.005558.com-彩9彩票下载安装| www.118262.com-海南琼崖快三| www.78658.com-竞彩店怎么赚钱的| www.116431.com-江苏快三彩乐乐遗漏| www.250231.com-中彩彩票下载网址| www.037360.com-彩民之家a版| www.92643.com-澳洲男子彩票全中| www.116212.com-彩库宝典旧版本下载| www.99ds.com-体彩36选七开奖| www.365338.cc-现金彩票app官网| www.mz28.com-河南福彩快3推荐| www.87jh.com-龙之彩娱乐-| www.513556.com-时时彩五星直选守号| www.gi18.com-江苏体彩网官网| www.69dq.com-中彩三d走势图| www.841620.com-七乐彩选号方法| www.901008.com-福彩3d体彩-| www.958902.com-3030彩票-| 500彩票www.66621h.com| www.130309.com-彩票查询结果排列三| www.132126.com-河南结婚彩礼新规定| www.604332.com-福建体彩票官网| www.995264.com-英国五分彩开奖记录| www.rl04.com-七乐彩10中5| www.078284.com-福彩网是不是假的| www.742520.com-好运来彩票全网搜| www.954835.com-七号彩票下载安装| 500彩票www.50054f.com| www.ma45.com-青海快三的研究| www.2zq.com-亿人黑彩平台怎么样| www.060065.com-瑞彩网用户注册| www.of76.com-福体彩开奖信息| www.763158.com-appcp彩票代理| www.817911.com-足彩19040结果| www.885127.com-神州彩票址-| www.946644.com-高频彩票把我害死了| www.991231.com-肥强竞彩12课堂| www.mb1.com-内蒙快三遗漏| www.tg38.com-北京快三豹子规律| www.1nz.cc-合肥最大的彩票店| www.343128.com-体育彩票一等奖金额| www.35ub.com-体彩大乐透历史数据| www.9792.xyz-快三彩票中奖神器| www.103722.com-天手彩票-| www.292219.com-为何网易还能购彩票| www.5758.me-中彩网推荐号码| www.016109.com-彩票频道唯彩会| www.856785.com-彩c6彩票-| www.528279.com-时时彩可以开挂吗| www.432422.com-135cc彩票下载| www.318483.cc-奔腾彩票怎么样| www.78268.com-北京三分彩骗了我| www.123055.com-酷彩吧彩票官网| www.889819.com-彩票排五-| www.958386.com-皇都彩票官方网址| 汇发彩票www.hf5887.com| www.115206.com-彩铅画山水画| www.13014.cc-足彩胜负彩直播比分| www.929500.com-七星彩单式怎么兑奖| www.194808.com-正规十大搏彩网站| www.5938.com-体彩排三走势图综| www.8414.cc-爱彩乐11选5旧版| www.40xg.com-体彩七星彩奖项| www.50080.cc-投彩网app下载| www.025740.com-福彩预测分析彩吧论| www.111933.com-盐城彩民-| www.190632.com-乐购彩票正规吗| www.268888.cc-933彩票娱乐| www.223171.com-3d福彩试机号| www.499126.com-彩票代打真的赚了| www.185581.com-快三有技巧规律吗| www.268218.com-随机选号福利彩票| www.395651.com-彩虹合唱团歌曲视频| www.21744.com-彩票套现怎么算| www.518656.com-乐彩短信-|