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.507339.com-c29彩票官方首页| www.700617.com-彩票撕坏了还能兑奖| www.826061.com-今日福利彩票中奖号| www.955566.com-正规的彩票网站排行| www.c99.la-福利彩票开奖大厅| www.828726.com-彩票808-| www.967283.com-福彩开奖3d结果| www.gh00.com-彩虹歌词-| www.141331.com-山东福彩网官方首页| www.11621.com-大发彩票快三| www.50189.com-信博彩票几年了| www.139054.com-有盈彩票可靠吗| www.267591.com-双色球彩票分析预测| www.708940.com-下载时时彩开奖视频| www.817600.com-彩票与你同行| www.899582.com-彩c81平台app| www.976383.com-长春体彩中奖率高| www.pm77.com-湖北快三走势图| www.04sk.com-人人竞彩足球| www.84iz.com-好彩客手机版下载| www.2426.xyz-本港台中彩网| www.204597.com-5分快三-| www.552293.com-万彩吧首奖玄机图1| www.158705.com-网易福彩双色球机选| www.541667.com-河南省福彩兑奖地点| www.687083.com-湖南体彩支票| www.837148.com-大乐透一定牛彩票| www.273811.com-福彩3d30期开奖| www.200311.com-123高手彩票| www.022642.com-新启航分分彩| www.266937.com-快三邀请码-| www.382502.com-一元彩票app| www.622683.cc-甘肃彩票兑奖地点| www.549611.com-网上可以购买足彩| www.030062.com-福利彩吧app| www.279637.com-时时彩免费分析软件| www.489033.com-包头福彩698万| www.191856.com-传统一分快三走势图| www.0127.loan-095彩票是真是假| www.7868.cm-足彩胜负彩心得| www.36789.com-福彩体彩什么区别| www.80101.cc-福彩快开调整影响| www.055369.com-极速快三有走势图| www.33854.com-7星彩中奖概率| www.105453.com-彩票字谜汇总大全| www.1344.cc-我要登录七乐彩票| www.33502.com-3d凤彩网预测| www.032105.com-足彩精算师必看书籍| www.199155.cc-福利彩票3d试机号| www.444828.com-彩票送免费彩金| www.nu44.com-手机上怎么买彩票| www.588624.com-彩票3d千禧试机号| www.712287.com-体彩竞彩网500| www.874197.com-彩票手机怎么提现| www.355569.com-福彩主任冯亚平微博| www.699833.com-今天福彩开奖号码是| www.866296.com-体彩481任选一| www.961391.com-七乐彩胆拖中奖查询| www.oo46.com-3d新彩吧布衣天下| www.38mr.com-东北彩礼多少| www.1425.vip-买福彩快三开奖结果| www.55193.com-福彩三地试机号金马| www.020897.com-大连福彩网-| www.132973.com-澳门世界杯足彩盘口| www.gj13.com-快3彩票正规| www.bt14.com-七星彩开奖公告| www.262113.com-体彩足球竞猜比分| www.ba81.com-⊙江西快三和值| www.3768.cm-贵厅室彩票app| www.15747.com-浙江体彩6十l开奖| www.108357.com-彩影制作下载| www.625338.com-乐彩北京快乐8| www.381276.com-足彩投注计算器| www.1952.live-福彩3d预测詹天佑| www.ys93.com-重庆体彩兑奖流程| www.19gc.com-彩仙阁挂机论坛| www.98vg.com-乐盈彩票提现不了| www.10755.cc-足彩波胆推荐| www.517633.com-彩票快乐十分钟| www.63po.com-手机彩票软件安全不| www.637365.cc-彩虹5无人机尺寸| www.71349.com-天禧彩票-| www.418455.com-广西快乐双彩走势阁| www.836183.cc-顺丰彩票安卓版| www.ue35.com-七乐彩历史开奖结果| www.ch75.com-福建省福彩网| www.30yr.com-彩虹秒赞授权查询| www.3473.com-红旗彩票网址导航| www.51044.com-投彩彩票下载| www.pe58.com-福彩3d图表-| www.op62.com-彩票作废-| www.481372.com-东方卫视喝彩中国| www.730802.com-彩票走势网页首页| www.35978.com-福彩7加2多少钱| www.00ni.com-快三十大技巧| www.727923.com-亿彩网手机平台登录| www.2160.tv-除了福利彩票广告语| www.35763.cc-八彩桌球-| www.1999.love-手机腾龙时时彩做号| www.27197.com-88爱彩是真的吗| www.6836.in-3d彩吧彩报第三版| www.31626.cc-双色球易彩网机选号| 88彩票www.8839e.com| www.717888.com-手机彩客网足彩| www.89fd.com-浙江快乐彩票总汇| www.057318.com-人人中彩票骗局揭秘| www.156837.com-五分彩官网平台| www.945479.com-3分彩-| www.ge7.com-vr十分彩开奖结果| www.sw04.com-中国福彩积分网| www.45ef.com-竞彩足什么时间开奖| www.842880.com-彩票不蒙面领奖| www.578948.com-pk彩吧平台黑钱| www.89827.cc-日本彩票中大奖| www.498342.com-购彩平台注册邀请码| www.938737.com-亿彩首页-| 世彩堂www.5854s.cc| www.977885.com-张路足彩预测世界杯| www.0602.org-500彩票有规律吗| www.05716.com-万购彩app下载| www.118313.com-体彩排列三彩吧预测| www.4159.cc-成都七彩云和| www.566378.com-彩虹6号加速器节点| www.663844.com-竞彩篮球专家天道| www.024396.com-网彩网站哪个好| www.979976.com-福彩网站资讯搜索| www.dg6.cc-快三有人玩吗| www.351435.com-国家彩票一年的利润| www.502915.com-玩私彩赢钱被黑| www.636980.com-彩虹表情符号怎么打| www.839363.com-彩票开奘询-| www.926841.com-彩票10选6-| www.977263.com-彩礼相关法律| www.cai1277.com福彩精彩十分走势图| www.04ko.com-彩铅画玫瑰绘画教程| www.53227.cc-重庆时时彩老后局| www.378654.com-彩票中奖情况app| www.530143.com-小鹿时时彩号码测算| www.707358.com-彩票是人为控制的吗| www.773201.com-微彩网址-| www.834860.com-乐米炫彩是什么| www.908827.com-安徽福彩网站| www.964103.com-快三长龙助手app| 500彩票www.52072d.com| www.ez21.com-快三上海-| www.26fq.com-福彩7码遗漏组六| www.119045.com-亚博彩票是合法的吗| www.8491.cc-彩贝棋牌客服| www.059588.com-吉林快三推荐| www.389578.com-体育彩票19032| www.202829.com-精彩十分玩法图| www.321814.com-大数据可以预测彩票| www.614547.com-福利彩票是正规的吗| www.711161.com-彩票平台赢了20万| www.064102.com-十分彩平台怎么赚钱| www.317345.com-重庆时时彩高手经验| www.463446.com-福彩本期形态| www.2175.wang-体彩加盟费与利润| www.9288.in-国乐彩邀请码| www.80268.cc-福彩国际可靠么| www.782488.com-彩票163开奖结果| www.887944.com-彩票网站如何推广| www.947374.com-福彩计划公式| www.997314.com-仙彩登录入口|