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天

知道了
彩票123现在叫什么名字 www.589335.com-体彩大乐透复式玩法| www.753170.com-中彩吧彩票下载安装| www.929137.com-福彩网是什么平台| 大赢家彩票网www.178213.com| www.mk23.com-网上时时彩提现骗局| www.40pg.com-预彩资讯-| www.7770.xyz-七彩产卵前-| www.35568.com-久久彩票客户端| www.91932.com-体彩11选5走势| www.072717.com-60cp彩票-| www.156071.com-好彩网破解-| www.307618.com-大发快三假的| www.393972.com-彩库宝典全年资料| www.544477.com-彩票挂机软-| www.644890.com-多多中彩票安全吗| www.755430.com-500彩票网社区| www.848857.com-福彩生活即开型彩票| www.931825.com-中原彩票怎么样| www.990830.com-彩票1分快3公式| www.so9.com-江西福利彩票官网| www.ug61.com-中国彩票开奖| www.26xk.com-福彩3d走势图报纸| www.1075.wang-彩票高手合作| www.8644.tv-财神彩票网骗局| www.51361.cc-快三网合法吗| www.004374.com-彩票爆仓-| www.085730.com-彩票预测算法| www.164159.com-腾讯纷纷彩计划软件| www.301229.com-苹果北京快三助手| www.386329.com-金彩网天下彩特吧| www.535175.com-黄金分割与数字彩票| www.633507.com-555彩票网合法吗| www.718785.com-中国彩虹旗事件| www.804095.com-福建体彩聊天直播室| www.880338.com-众购彩票网官方| 大赢家彩票平台www.081502.com| www.ji52.cc-五分时时彩-| www.l23.cc-棋牌彩票代理| www.54ob.com-福彩管理员工作要求| www.0818.bid-网上彩票驿站骗人| www.03988.com-重庆14彩软件| www.56331.cc-吉林快三技巧集| www.011298.com-全民彩票注册| www.092471.com-9号彩票官网| www.170156.com-江西快三走势图表| www.312290.com-大奖网触屏网彩票| www.393660.com-福彩昨天晚上出啥| www.538080.com-宝利彩票网站| www.633092.com-竟彩蓝球大小分| www.715968.com-彩票双色球软件下载| www.802005.com-彩天堂娱乐官网平台| www.884404.com-福彩3d五行和值尾| www.984620.com-奖多多酷彩吧| www.eu88.com-北京快三助手官网| www.yr55.com-足彩3场2关-| www.32dv.com-彩虹影视纯a影库| www.0757.wang-高频彩开奖平台| www.8011.net-近期南京彩票中奖| www.33068.com-福建体彩中心电话| www.83787.com-关于农村天价彩礼| www.047099.com-手机彩票能赢钱嘛| www.172798.com-广西今日快三| www.269499.com-彩民彩票怎么了| www.364879.com-360购彩中心| www.465520.com-竞彩盈利宝-| www.560456.com-江苏地方彩票开奖| www.639091.com-开体彩店咨询电话| www.821950.com-福彩手机能买吗| www.899725.com-无锡福彩机器转让| www.970912.com-迷彩兔官方下载| www.qk1.cc-广东快三开奖号码| www.sh12.com-时时彩有正规平台吗| www.18ti.com-七乐彩单式几点开奖| www.302.black-有谁玩彩票挣钱的吗| www.4413.cc-福彩3d兑奖期限| www.02803.com-宁夏福彩网点怎么开| www.72881.cc-3d的彩界小少爷| www.038610.com-北京快三一天几期| www.129646.com-七星彩坛论-| www.211357.com-彩神之首双色球三胆| www.290016.com-彩铅画简单入门图片| www.984742.com-手机模拟彩票摇奖机| www.tc9.com-抚州市福利彩票| www.051325.com-95彩票网官方网站| www.753705.com-搜狗彩票无法提现| www.0892.vip-网易彩票怎么合买| www.6922.pw-七彩阳光慢动作视频| www.22855.cc-52亿彩票-| www.68828.com-体彩选号-| www.055901.com-吉林省体彩主任| www.137943.com-2019彩票网开奖| www.219660.com-福彩3d红五星图库| www.296083.com-湖北快三有没有技巧| www.369853.com-云彩店邀请码| www.473878.com-天t空彩票与你同行| www.560064.com-天天爱彩票网页版| www.633302.com-竞彩蓝球规则| www.708603.com-深圳市体育彩票兑奖| www.791508.com-爱彩乐不能提现| www.874709.com-优游时时彩平台登录| www.ph.com-快三是什么的简称| www.ow88.com-百度福彩3d贴吧| www.01yy.com-重彩水墨画-| www.72ci.com-双色球彩票机选号码| www.1307.website鸿运乐彩靠谱么| www.9366.top-福利彩票的职责| www.50600.com-快彩票下载-| www.95706.com-竞彩官方返还率| www.060006.com-福彩新3d玩法| www.167826.com-江苏福彩快三| www.260316.com-购买私彩属于赌博吗| www.337967.com-查看福彩中奖号码| www.415279.com-红树林彩票平台官网| www.522250.com-上海体育彩票一定牛| www.592322.com-幸福彩票是真的吗| www.665825.com-送彩票活动广告词| www.739243.com-大通彩票手机板下载| www.811543.com-福彩3d对吗推算法| www.883686.com-彩票之王是谁| 聚彩网www.290282.com| www.hc03.com-淘彩票骗局揭秘| www.yc01.com-七星彩历史开奖| www.20jl.com-一生中彩票几率| www.980.org-研究彩票的书| www.9044.cn-上海银彩通合法吗| www.46108.com-老时时彩计划| www.89629.com-大乐彩开奖时间| www.047042.com-安徽快三胆拖投注表| www.151170.com-国民彩票怎么样| www.237616.com-动物总员湖南福彩网| www.312333.com-彩票推广话术开场白| www.382266.com-体彩平台诈骗| www.523457.com-绍兴市福利彩票| www.660726.com-体彩大乐透后区遗漏| www.750810.com-朋友微信叫玩中彩| www.818284.com-2013彩票网下截| www.886356.com-玩彩网app官网| www.969913.com-彩票抓了几个人| 通盈彩票www.848966.com| www.jo86.com-私售彩-| www.zy85.com-体彩店没有竞彩项目| www.25wv.com-彩票新手入门| www.0003.live-6位数的彩票叫啥| www.6162.net-81彩票全天计划| www.11961.com-口袋彩票是正规的吗| www.53231.com-快三456多少钱| www.95809.com-姜山胜负彩冷门推荐| www.053624.com-足球彩票店选址心得| www.175583.com-一分快三平台下载| www.257933.com-083彩票app-| www.326530.com-寒若冰七星彩预测| www.390255.com-向日葵团队彩票登陆| www.529455.com-彩宝贝彩票专家杀号| www.609406.com-甘肃福彩了3d| www.677052.com-感觉福彩3d很假| www.749488.com-全中彩票打不开| www.813781.com-海南东方快三骗人| www.881420.com-58彩票下载-| www.985459.com-每日首充彩票| www.cai353.com-全网最大快三520| www.it51.com-竞彩足球比分比| www.yu98.com-山东省体彩兑奖流程| www.16rd.com-足球比分360彩票| www.578.live-分分彩买大小技巧|