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.133274.com-富民彩票-| www.3805.cm-福彩预测号-| www.851934.com-体育彩票7位数玩法| www.665668.com-大联盟彩票是啥意思| www.188464.com-合买彩票安卓版| www.382302.com-创银彩票合不合法的| www.654546.com-足球胜负彩开奖规则| www.820097.com-粤海彩票论坛| www.hf75.com-71彩票登录-| www.042.date-彩票止损止盈| www.919928.com-融创宝彩票输了几万| www.dn15.com-什么软件可以玩快三| www.736422.com-中国彩票更懂彩民| www.672588.com-彩56下载平台| www.281160.com-竞彩比分直播500| www.851293.com-上期福彩3d-| 金彩www.986jc.com| www.343808.com-78彩票推荐人id| www.303679.com-甘肃福彩下载| www.397417.com-钓鱼彩票网站搭建| www.531367.com-玩网络时时彩违法吗| www.738384.com-买黑彩被骗能报警吗| www.956130.com-新版本众彩网下载| www.739023.com-福彩3d作假-| www.ae98.com-福彩快三上海开奖| www.7ua.com-年会员工彩票中奖| www.924981.com-彩票计划软件赢彩| www.da31.com-彩神2合法合法不| www.265530.com-3d彩神-| www.140456.com-合法的彩票投注网站| www.596071.com-中彩票后被杀| www.796724.com-幸运五分彩开奖记录| www.906445.com-极速快三在线| www.450370.com-k8彩票和大地彩票| www.40015.com-彩票上写字能兑奖吗| www.44481.cc-选三型彩票-| www.008926.com-排列3体彩出什么号| www.673969.com-汇丰彩票手机客户端| www.804396.com-山西彩票网上买| www.04185.com-彩票怎么看中没中| www.655588.com-彩票三第开奖直播| www.783650.com-28168彩票-| www.876321.com-环球彩票app下载| www.984603.com-彩虹娱乐骗局| www.bw62.com-福彩快3技巧| www.296159.com-彩票双色球开奖时间| www.567555.cc-江苏福彩3g-| www.863128.com-彩仙阁网址-| www.964364.com-湖南省体彩中心地址| www.118859.com-97彩票app-| www.703339.cc-88彩票网登录| www.751232.com-11选五彩票预测| www.5rg.com-分分彩提前一期开奖| www.3763.wang-蓝彩开奖结果新浪| www.18908.com-中国福利彩票安装| www.68157.cc-新彩网站-| www.038258.com-财神彩票软件app| www.129421.com-彩票字谜图谜| www.220428.com-快三秒奶茶总部| www.075211.com-瑞彩祥云可靠吗| www.149755.com-副利彩票机选| www.226907.com-江西福彩快3开奖| www.302982.com-977彩票ios-| www.380060.com-名人堂彩票软件| www.54277.com-福利彩票国家挣钱吗| www.032134.com-体育彩票店利润| www.195583.com-百宝彩票快3| www.xo00.com-十一选五彩票平台| www.041353.com-彩票挂机骗局大全| www.352233.com-完美彩票官网下載| www.563209.com-大正彩翼官方网| www.747211.com-平台彩票-| www.898745.com-今日3福彩-| www.981719.com-亚洲彩票下载| www.pk.cc-买彩票算是赌博吗| www.470543.com-男朋友背着我买足彩| www.572236.com-不思议迷宫兔子彩蛋| www.660412.com-腾讯彩票平台登录| www.763704.com-6十1生肖彩票| www.888824.cc-七乐彩开奖机选号码| www.965292.com-怎么想最容易中彩票| www.cai3434.com重庆时时彩停售了吗| www.354406.com-福利彩票三亿| www.501653.com-体彩店和外围套利| www.615737.com-体彩七位数四等奖| www.700907.com-足球彩票下载安装| www.786604.com-极三彩票-| www.47745.com-福彩单双邀请码| www.584595.com-拼博在线彩神通| www.pz19.cc-360彩计划-| www.180421.com-网络快三合法吗| www.362079.com-乐透啦彩票下载安装| www.546682.com-澳客竞彩app| www.875.cm-少儿彩铅画作品| www.02770.com-体育彩票宁夏| www.035660.com-幸运时时彩计划在线| www.7000.cm-快三末班车几点| www.513708.com-各地彩票不一样| www.591735.com-彩票网球退赛怎么算| www.879175.com-五亿彩app-| www.949631.com-10分钟彩票害人| 惠民彩票www.hm2777.com| www.iw53.com-嘉兴福利彩票中心| www.gz72.com-合肥快三开奖查询| www.04ro.com-多肉彩铅教程| www.5307.site-分分彩三星计算方法| www.vi9.com-大马彩票下载| www.pp46.com-彩票沙龙仙泥| www.03cz.com-好特电玩城彩票机| www.32du.com-网上的时时彩靠谱吗| www.6607.xyz-彩票九苹果版下载| www.02335.com-该不该戒掉彩票| www.580153.com-七乐彩今日直播开奖| www.688049.com-玩时时彩犯法判刑吗| www.4527.com-联合买彩票中奖新闻| www.107479.com-凤凰彩票辅助器| www.186737.com-快三输了怎么回本| www.261925.com-葡京彩金38元| www.334658.com-如何用时间战胜彩票| www.425583.com-竞彩14场预测分析| www.523261.com-徐文轩彩票预测网站| www.597155.com-全球彩票app注册| www.571585.com-极速时彩开奖号码| www.769883.com-好彩店为什么搜不到| www.862518.com-彩票开奖号查询| www.940779.com-所以快三都有的平台| 惠民彩票www.hm3555.com| www.354964.com-昆山张浦镇福彩中心| www.452448.com-七乐彩和值走势图| www.538752.com-3d大花猫彩吧图库| www.615506.com-中国福利彩票| www.677664.com-今晚足彩推荐| www.759787.com-高材生彩票审判| www.825268.com-竞彩猫苹果版| www.886226.com-福彩双色球杀号定胆| www.953211.com-福彩3dapp-| 众发彩票www.316546.com| www.om31.com-sh彩票-| www.02sl.com-彩票送99彩金| www.20zv.com-实时彩代理平台出租| www.676905.com-透水路面彩色压印| www.765422.com-中国体育彩票排列5| www.844633.com-年底彩票什么时候停| www.923117.com-郑州58彩票店转让| www.976678.com-四川彩礼20万多吗| www.ep29.com-百盈快三计划预测| www.h73.club-竞彩新规定-| www.334.online-彩票讲解视频教程| www.981981.cc-彩票软件app| www.gt05.com-天天好彩开奖号码| www.8aw.com-关于彩票经典传奇| www.904722.com-500彩票资讯网| www.318.cn-中发彩票是什么意思| 中彩网www.91233t.com| www.dq21.com-哪些省份有福彩快三| www.xa48.com-五分快三技巧走势| www.05ag.com-新手彩铅画教程| www.316312.com-大通彩票下载| www.685709.com-乐彩网头条-| www.439960.com-特彩吧开奖结果直播| www.578674.com-3q彩票下载-| www.659327.com-历史福彩开奖| www.733540.com-全国农村彩礼问题| www.796241.com-彩票选号书-|