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.pk10.com www.cp576.com-福彩快三走势图河北| www.ym72.com-新加坡乐和彩资料| www.21sj.com-彩票的倍率-| www.0123.win-绚丽多彩造句二年级| www.4899.cc-d9彩票登陆-| www.9075.vip-福彩3谜语总汇| www.50046.com-华宇时时彩下载| www.88973.cc-ok彩票下载官网| www.037634.com-快三看走势如何分析| www.127695.com-598彩票网-| www.195051.com-体育彩票怎么看中奖| www.259735.com-大乐透彩票选号器| www.326665.com-七星彩安然-| www.388963.com-华彩人生一点通新版| www.533654.com-彩票遗漏概率极限| www.607895.com-韩国快三多少期| www.673318.com-古建彩画图案| www.739938.com-中国福彩双包球| www.811403.com-阳光开奖中国福彩网| www.876962.com-七乐彩4个号多少钱| www.970464.com-彩票团队彩金| 126彩票网www.126309.com| www.ei35.com-新彩吧论坛首页| www.uf71.com-106.彩票下载| www.8rq.com-彩票站用的键盘| www.56sy.com-下载七星彩直播开奖| www.793.vip-新3d彩票开奖| www.3980.biz-澳门博彩体育彩票| www.8912.loan-竞彩中5800万| www.64108.com-竞彩什么情况出平局| www.016295.com-彩票开奖查询助手| www.078118.com-顺盈彩票是骗局| www.132681.com-快三能赢钱-| www.198038.com-湖北快三形势走势图| www.259916.com-中国人人快三怎么玩| www.320738.com-河南体彩网电脑扳| www.380240.com-网上竞彩足球在哪买| www.528700.com-阳光彩虹小白马图片| www.597229.com-彩票19027-| www.658212.com-带走势图的彩票软件| www.737528.com-软件玩快三是犯法| www.800390.com-新3d福彩吧-| www.867139.com-彩经网河北快三开奖| www.920839.com-彩票双色球中奖条件| www.972784.com-用彩铅画星空的方法| www.af4.com-河北体彩开奖| www.lu26.com-彩票有一分快三吗| www.c27.club-福利快三下载安装| www.21ek.com-网上买彩票成了网赌| www.1570.org-免费送彩金的白菜网| www.7087.org-智能彩票摇号器摇奖| www.15467.com-嘉兴体彩阳光征召| www.50899.cc-博发彩票合法吗| www.86344.com-利彩彩票走势图| www.028125.com-铜雀台彩票手机版| www.090265.com-三分快三计划怎么做| www.142555.com-下载彩运网-| www.207722.com-11选5购彩平台| www.267908.com-广西快三一定牛网| www.399698.com-南海彩票社区| www.506011.com-彩票dna-| www.566096.com-创彩日本料理| www.626025.com-神赞快三计划| www.684103.com-竞彩比分三串一牛人| www.751269.com-彩票巴巴官方| www.804846.com-彩票追加和翻倍| www.868208.com-南国论坛七星彩| www.967502.com-彩票双色球开奖查询| 500彩票www.50051vip.com| www.ak10.com-网上彩票骗局揭秘| www.nx67.com-人人快三投注| www.v28.top-足彩14胜负奥客网| www.38by.com-七星彩预测规律图| www.494.mobi-快三注册就送体验金| www.3098.vip-下一次彩票开奖日期| www.7662.top-福彩彩票标志图片| www.18066.cc-足彩亚盘走势图| www.53165.cc-福彩排列五开奖直播| www.86923.cc-太原快三开奖结果| www.026117.com-爱彩人彩票网注册| www.087475.com-开门彩专家杀号定胆| www.133814.com-彩票投注站彩| www.196060.com-江西快三技巧| www.256350.com-彩票159官方版| www.313973.com-首页竞彩网-| www.369487.com-闽南体彩聊天室| www.445933.com-彩票提现被风控| www.522628.com-彩票龙虎和技巧| www.579358.com-今晚六禾彩开奖结果| www.637166.com-小米彩虹电池电量| www.808661.com-竞彩任选九玩法| www.870167.com-福彩高频彩是真是假| www.936923.com-查3d彩票怎么玩| www.979859.com-体彩终端机说明书| www.cai248.com-一分快三开奖号码| www.ja20.com-福彩双色球开奖直播| www.wy78.com-广东福彩3d走势图| www.00jt.com-合乐彩票怎么样| www.52hf.com-我的利彩-| www.179.website彩c788网站-| www.1453.xyz-富贵彩app下载| www.9542.xyz-海南地方彩票种类| www.36319.cc-爱彩乐快3一分钟| www.69733.com-金凤凰福彩3d| www.020327.com-手机彩35-| www.077114.com-俄罗斯28彩票玩法| www.126156.com-融彩网下载-| www.181232.com-微彩网-| www.233516.com-快三精准计划软件| www.289256.com-彩神网推荐火爆四肖| www.453479.com-怪字怪帖会员版福彩| www.526198.com-足彩必中秘诀| www.593335.com-假彩票机购买| www.651245.com-彩百万娱乐下载| www.718528.com-彩虹的七种正确颜色| www.776013.com-福利体育彩票大乐透| www.850198.com-qq分彩全天计划| www.897756.com-中国福彩口号| www.951684.com-足彩2串1全包买法| www.988049.com-555五百万彩票| 500彩票www.547577.com| www.db76.com-四亿彩票登录| www.qh90.cc-广东彩票官网| www.0jx.com-彩神预测-| www.36ez.com-七星彩本期局网图纸| www.069.website排列五走势图彩宝| www.2010.org-和彩放题爆光| www.6123.me-郑州彩票站转让信息| www.9931.xyz-彩票三d走试图| www.53913.cc-时时彩混选技术论坛| www.85282.com-彩票中奖万能码| www.022294.com-重庆时彩时彩软件| www.071809.com-投资体育彩票前景| www.120507.com-中国福彩3d双彩图| www.171895.com-江西快三投注| www.268369.com-中国彩吧首页牛彩| www.328502.com-福彩3d双彩图| www.377375.com-17彩票安全吗| www.470088.com-境外彩票公司| www.530640.cc-天下彩票免费科大全| www.594319.com-三思彩玄机-| www.646515.com-排列3彩民分析| www.712888.cc-分分彩为什么输钱| www.766785.com-彩虹糖酸味粉没了| www.821078.com-彩色混凝土单价| www.874185.com-北北京快三走势图| www.947280.com-1688彩吧官方群| www.982415.com-浙江省体彩官方网站| www.cp8598.com-上海福彩网官网| www.ib37.com-江苏快三手机平台| www.uc88.com-高频彩票叫停吗| www.s30.top-申请就送彩金的平台| www.25je.com-十一选五体彩辽宁| www.093.cm-爱心彩网址是多少| www.1835.net-正彩是牌子吗| www.7150.in-八面通七彩影城| www.03544.com-七星彩怎么做代理| www.33582.com-607彩票-| www.65443.com-哪个软件能买福彩| www.023324.com-彩票规定-| www.066660.com-网络彩票危害| www.114778.com-旺旺彩票登陆| www.159213.com-彩八仙安卓版| www.238094.com-皇元彩票是真是假|