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天

知道了
TT快3 www.223949.com-中国体彩网开奖结果| www.40664.com-一宵中彩-| www.001431.com-七星彩预测开门彩| www.733912.com-爱彩快三-| www.710907.com-彩票刷子是怎么赚钱| www.9401.cn-华人彩票网是真的吗| www.87735.cc-盛兴彩票改数据| www.080099.cc-彩票3d怎么分析| www.171551.com-精彩十分玩法| www.262294.com-上海彩票快三官网| www.333325.com-彩票技巧论坛| www.420442.com-招彩票员的吗| www.516923.com-色彩纯度画-| www.588941.com-爱购彩网址可信吗| www.834509.com-好彩蓝莓爆好抽吗| www.949328.com-招彩票代玩靠谱吗| www.280380.com-乐8彩下载安装| www.385899.com-精彩音乐汇相关歌曲| www.514311.com-怎样下载七星彩票| www.586670.com-存10送88彩金| www.617519.com-彩票平台主管号| www.81780.com-天天中彩票中奖截图| www.102565.com-中利彩票下载| www.394040.com-设计色彩头像| www.029044.com-宇宙彩票app下载| www.ix06.com-内蒙快三5月11号| www.38zi.com-头彩发饰加盟连锁| www.1296.org-体彩刮刮乐新票图片| www.9020.top-怎样中彩票-| www.ey13.com-世界杯足彩玩法| www.nn46.com-竞彩篮球投注app| www.389.la-好乐多彩票官网| www.8222.top-苏州体育彩票竞彩店| www.52634.com-看彩票开奖结果| www.56434.com-彩富网香港-| www.363581.com-港彩图库大全| www.542233.com-购彩平台信誉好的| www.648569.com-彩票到底多少种| www.773537.com-台湾时时彩官方首页| www.898694.com-福彩正版真精华布衣| 大赢家彩票平台www.810531.com| www.ee05.com-彩神邀请码在哪里| www.zr30.com-足彩胜负平-| www.068717.com-湖北快三彩票下载| www.339241.com-天天中彩票买不成| www.213906.com-足彩分析师-| www.434361.com-彩票销售发言稿| www.596052.com-2016年福彩和值| www.824503.com-有app博彩软件| www.1781.top-豪彩app安卓版| www.80484.com-河北盗金库买彩票| www.129533.com-下载中奖彩票被调| www.345521.com-怎样选福利彩票号码| www.550202.com-淮安体彩网-| www.768707.com-常州彩票店转让| www.78209.com-找一下彩票开奖结果| www.422558.com-爱彩网app真实吗| www.954268.com-香港皇家彩宝典网址| www.01mr.com-七星彩数据图表| www.47163.com-彩礼钱应该给父母吗| www.pv85.com-高频彩网赌会作假吗| www.120.biz-体彩办投诉电话| www.06357.com-最棒的彩票投注网站| www.3540.xyz-彩票偏态-| www.006356.com-冀彩宝站主管理平台| www.j31.me-福彩30选五走势图| www.771.pw-微彩店下载-| www.00025.cc-福彩3d矩形宝典| www.214536.com-41彩票网首页| www.460078.com-炫彩背包解锁颜色| www.75168.com-彩票品种-| www.1647.cm-休育彩票开结果| www.27528.com-彩票走试图-| www.036201.com-下载3d福彩-| www.268923.com-彩王争霸下载地址| www.449999.cc-快乐中彩票官网| www.092712.com-注册送彩金彩票平台| www.244593.com-安徽快三投注网| www.476588.com-全民福彩智投| www.54sq.com-昆山体彩中心位置| www.35194.com-快购彩票软件| www.733486.com-安徽快三和值计划好| www.9020.biz-上海彩票电话投注| www.87dn.com-圣美娱乐时时彩| www.544414.com-易彩娱乐不给提现| www.888009.cc-全彩助手app下载| www.880178.com-福彩3d杀号彩宝贝| 乐彩网www.lcw997.com| www.07044.com-好运来彩票网下载| www.665945.com-河南福彩幸运走势| www.782693.cc-nba彩票下载安装| www.950943.com-福利彩票足球| www.je29.com-福彩快3和值表奖金| www.96725.cc-彩票内定-| www.330511.com-yab亚博彩票| www.435879.com-福星七星彩开奖下载| www.594199.com-优乐彩合法吗| www.63657.com-竞彩足球唯彩| www.cp8058.com-街机新快三叫啥| www.163850.com-忘想买彩票翻身| www.963894.com-买彩票的走势图| www.076791.com-韩国五分彩走势图| www.225710.com-福彩公益金使用宗旨| www.355299.com-昆山体育彩票| www.517156.com-体彩中心地址| www.654501.com-台州福彩官方网| www.3082.me-台湾福星彩资料大全| www.48234.com-福彩之家下载安装| www.152631.com-彩之-| www.326253.com-晴予七星彩-| www.515060.com-七星彩其实最好中| www.666650.com-套彩在中国犯法| www.775035.com-福彩大乐透开奖时间| www.893899.com-喜盈门彩票有谁在玩| www.64352.com-彩妆加盟店-| www.194318.com-江苏快3彩票| www.615796.com-手机即时开彩app| www.87602.com-网购彩票注册| www.130456.com-黑马团队时时彩| www.298286.com-福利彩票历史开奖| www.501226.com-彩吧论坛3d专栏| www.691760.com-江苏快三网易和值| www.0377.love-手机端下载彩乐汇| www.391523.com-108官网彩票下载| www.976486.com-云南省福利彩票中奖| www.3314.vip-河南幸运彩技巧| www.306675.com-彩票靠谱平台| www.wm44.com-彩8下载安装| www.858956.com-体彩48l开奖结果| www.n85.com-高频彩不要倍投| www.820.org-彩虹糖的梦歌词| www.22679.cc-互联网彩票吃票| www.89678.cc-中港彩票投注计划| www.097581.com-旺彩高手预测| www.556366.cc-彩票中奖兑奖地点| www.735400.com-彩票本金方案图片| www.rg02.com-快三重一个好有钱吗| www.593232.com-蓝光乐彩城-| www.322387.com-黑彩平台流水怎么刷| www.444805.com-彩票过滤器怎么回事| www.3389.org-苏宁彩票怎么办理| www.11350.com-泰国彩票怎么兑奖| www.560903.com-彩票双色球选号投注| www.3528.cm-天天中彩票在升级| www.276521.com-彩票反水啥意思| www.724701.com-彩票股票-| www.856252.com-彩票开发极云| www.851.cc-百度彩票公告开奖| www.12010.cc-微信口袋彩票店| www.579440.com-彩吧55128-| www.732290.com-春秋彩票app| www.65fu.com-心率快三最大遗漏值| www.6014.cc-山东省体彩中心地图| www.27125.com-彩票2元网怎么下载| www.95701.com-中国最早彩票| www.110883.com-彩票年后啥时候开始| www.231129.com-彩票作弊插件| www.315356.com-重庆时时彩免费计划| www.701799.com-彩票系统漏洞黑客| www.833364.com-a彩app-| www.989339.com-万彩吧下载安装苹果| www.031845.com-手机彩票五选一| www.114599.cc-精英彩票是真的吗| www.311913.com-甘肃省福彩领奖地址|