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天

知道了
新2彩是不是黑网址 www.260323.com-靠彩票一夜暴富的人| www.020436.com-快开彩票怎么玩| www.556885.com-水彩花卉装饰画| www.901927.com-黑彩当庄怎么赚钱| www.692233.com-彩乐瀑买不了了| www.828073.com-彩民网网址-| www.949080.com-高频彩开奖直播分析| www.ft99.com-福彩兼职代玩| www.26qw.com-福彩3d专家排行| www.8000.tv-博彩骗局怎么骗| www.uv24.com-大发快三投注记录| www.278153.com-快三龙的预兆| www.444257.com-福彩3d和值规律| www.849938.com-中国竞彩网官方信息| www.919620.com-充值送彩金彩票平台| www.978918.com-36选7好彩1走势| www.am29.cc-盛大彩票平台可靠吗| www.97982.com-神兽时时彩下载| www.150169.com-幸运天天中彩票| www.248686.com-新万博竞彩app| www.352888.com-v8彩票网址| www.447399.com-众彩网可信吗| www.130289.com-江苏快三有没有漏洞| www.158736.com-福彩黑龙江网| www.nc21.com-乐米彩票官方网站| www.0309.vip-彩票今后发展| www.096963.com-体育彩票篮球竞彩网| www.947085.com-体彩高频彩票| www.pn24.com-浙江省快乐彩| www.700.pw-个人能买彩票吗| www.vn80.com-上海福彩网资讥| www.508228.com-大乐透两元彩票网| www.kt39.com-买彩票赚钱的方法| www.019397.com-凯里彩票中奖历史| www.126818.com-彩票开奖结果早知道| www.222372.com-必中快三计划软件| www.552293.com-万彩吧首奖玄机图1| www.661401.com-廉江七星彩开心论坛| www.739484.com-竞彩技巧-| www.000743.com-酷彩网快三被骗了| www.076470.com-红旗彩票合法么| www.141543.com-今日太湖字谜多彩网| www.040054.com-1分快三实时计划| www.505521.com-凤凰彩票能玩吗| www.569663.com-彩吧图库山东真诀| www.635897.com-彩票打水对冲套利| 万利www.32123r.com| www.038229.com-爱彩乐软件怎么样| www.225707.com-中乐彩官网-| www.448334.com-老谢说彩2019| www.232121.com-肥强彩经app| www.479072.com-赣州市体彩管理中心| www.654853.com-福彩3d几点封机| www.59373.com-彩铅画人物图片大全| www.5625.biz-网上买福彩怎么兑奖| www.39584.com-快乐彩票余额图片| www.737.com-盈博彩票官网| www.42573.com-北京足球单场彩| www.877486.com-r8国际彩票合法吗| www.972161.com-湖北彩票换球案| www.fu69.com-迪拜28彩票骗局| www.k95.com-甘肃快三遗漏统计值| www.472020.com-香港三色彩有限司| www.89398.cc-彩票正版免-| www.921678.com-彩神争霸下载| 亿彩彩票www.588yc.com| www.127110.com-6698彩票平台| www.246681.com-成都竞彩快三查询| www.335924.com-体育彩票几个号码| www.0703.vip-喜彩网齐中网| www.8588.me-彩票点中大奖| www.217240.com-彩票指南报纸电子版| www.298751.com-幸运彩票官网| www.371190.com-澳客彩票网官方下载| www.456422.com-tt彩票平台-| www.537503.com-哪些是彩色-| www.608123.com-中彩网大乐透开奖| www.282.cc-加盟彩妆玛丽黛佳| www.7157.pw-穆棱七彩-| www.138137.com-福利彩票摇号器| www.276613.com-派彩网吉林快三| www.367823.com-上期彩票-| www.am61.cc-七星彩走势图彩经网| www.354835.com-500彩票新版| www.527600.com-黑彩平刷-| www.645953.com-足彩双选-| www.784518.com-皇马彩票-| www.899445.com-河南快三杀号技巧| 百姓彩票www.bxcp3.com| www.vf23.com-驿站彩票首页| www.30780.com-九鼎彩票-| www.365677.com-容易临摹的彩铅名画| www.494269.com-手机老收到博彩短信| www.567552.com-多彩贵州城门票| www.686559.com-梦中彩票能中大奖吗| www.762653.com-众博彩票是合法的吗| www.884931.com-彩神钱提现不了| www.952211.com-快彩电视版-| 惠民彩票www.hm5222.com| www.21974.com-网上说刷彩是什么| www.005918.com-彩16在线登录| www.131075.com-太康13万彩礼| www.221919.com-高频彩票或被叫停| www.300716.com-皇马彩票注册| www.375644.com-体彩兑奖需要哪些| www.515554.com-领航竞彩同盟| www.893503.com-彩票强制销售任务| www.101893.com-一定牛体育彩票下载| www.281181.com-时时彩二胆码技巧| www.6031.cn-彩票开奖信息结果| www.031992.com-乐彩不让提现| www.189542.com-中原快三-| www.345104.com-天天购彩app| www.494638.com-u9彩票安不安全| www.609581.com-全彩助手app| www.791429.com-湖北彩票巨奖骗局| www.908608.com-福彩快三和值图| www.295168.com-彩票数学公式大全集| 金牌彩票www.58699.cc| www.082967.com-宝马集团彩票app| www.255689.com-时时彩五星单式规律| www.488290.com-八喜彩票骗局| www.636092.com-彩虹四无人机价格| www.588451.com-彩票管家安全吗| www.365904.cc-体彩四码星星遗漏| www.560916.com-名人彩票是假的| www.690801.com-中国体育体彩公司| www.919778.com-彩票平台开发商| www.cp382.cc-兰州快三走势图软件| www.747900.com-雅彩-| www.806043.com-买彩票可以发财吗| www.870596.com-博友彩江苏快三| www.926208.com-成功彩票软件下载| www.970817.com-合江中彩票-| www.ab39.com-上海快三二码遗漏| www.vi24.com-广西快三遗漏一定牛| www.53oj.com-美国彩票多少钱一张| www.501.site-七乐彩各省中奖结果| www.6448.vip-5d工囗全彩漫画| www.601234.com-七星彩守号中奖概率| www.703258.com-六爻测彩票秘法| www.799902.com-180彩-| www.70kb.com-欢迎来到旺彩游戏| www.4587.com-名豪彩票平台正规吗| www.23237.com-瑞彩祥云网址多少| www.676893.com-晋州彩色包装印刷| www.735623.com-福利彩票一等奖概率| www.790715.com-福利彩票3d选号法| www.849355.com-三分时时彩公式技巧| www.896575.com-派彩走势图免费版| www.950856.com-掉了中彩网了d| www.997265.com-随机彩票中奖几率| www.hn38.com-红旗彩票怎么玩| www.7581.vip-大通彩票a-| www.cp1700.com-幸运快三计划单双| www.361526.com-网络彩票提现不了| www.503020.com-彩友多中奖-| www.51lj.cc-双色球新浪彩票网| www.4777.vip-福利彩票自助销彩机| www.369754.com-众博彩票网址| www.260975.com-一分快三和值技巧| www.433761.com-菜6菜彩票-| www.583155.com-看彩票下载什么软件| www.678926.com-免费送彩金游戏|