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天

知道了
江苏11选5 www.295931.com-湖北快三杀号技巧| www.523417.com-希腊五分彩开奖号码| www.902966.com-时时采彩全天计划| 福利彩票www.99677h.com| www.277831.com-90彩票平台的网址| www.278051.com-上海快3开奖爱彩乐| www.53ie.com-彩66彩票登录官网| www.84jv.com-百乐门彩票官方平台| www.21455.cc-借钱买彩票算诈骗吗| www.984518.com-福彩双色球自选号码| www.42eq.com-足彩赔率怎么算奖金| www.323381.com-海南七星彩头尾码王| www.rj5.com-红牛彩票快三| www.57471.com-分分彩必赚方法网站| www.081038.com-彩运8优惠大厅| www.216669.com-念买彩票中大奖咒语| www.359639.com-七星彩一注多少| www.523673.com-香港天下彩-| www.1604.org-拉霸游戏注册送彩金| www.46qr.com-广东省福彩总部| www.ph67.com-福彩3d试机号后| www.26jo.com-彩票大管家站长版| www.027546.com-信誉可靠的高频彩种| www.3456.online天然彩宝饰品| www.67.cx-快三开奖改时间了| www.088992.com-时时彩幸运农场| www.675981.com-彩票开奖查询一一| www.750588.com-中彩大神推荐群| www.824776.com-周口市福彩中心地址| www.895649.com-玩高频彩票的后果| www.579647.com-逸彩庭园-| www.49066.com-分分彩害死多少人| www.21228.com-亿彩堂是不是真的| www.486585.com-今日竞彩单关场次| www.227151.com-彩吧中国彩吧| www.504122.com-彩排的彩的意思| www.192806.com-快三河北开奖结果| www.997153.com-北京快三单双走势图| www.ev81.com-手机中彩网直播| www.249244.com-中国福利彩票开奖| www.801694.com-彩云自然酒店佛山| www.58101.com-体彩手机购买| www.f90.me-福利彩票三地字谜| www.334427.com-快钱彩票有人赢钱吗| www.505208.com-哪个新平台送彩金| www.632096.com-福彩双色球推荐号| www.781100.com-彩虹岛2手游中文版| www.893110.com-乐彩站app怎么样| 500彩票www.66653s.com| www.dy20.com-奥客彩网-| www.680.tv-七天彩app二维码| www.34259.com-彩客网触屏版请打开| www.99518.com-博弈310足彩博客| www.fy99.com-福彩作弊事件视频| www.i56.net-微彩彩票官网| www.6033.pw-五一彩票开奖查询| www.28787.com-彩快三娱乐网址| www.0454.me-怎么自己做彩票平台| www.133307.com-小型彩钢厂房图片| www.706015.com-福彩复式奖金计算图| www.781005.com-好盈彩票app下载| www.848496.com-加州时时彩走势图| www.913238.com-浙讧体彩6十1开奖| www.971053.com-特区彩票论坛开| 500彩票www.607315.com| www.514811.com-加盟彩妆品牌排行榜| www.583090.com-五分彩个位规律公式| www.651705.com-棋牌彩票源码| www.578753.com-体彩店五星网点| www.660940.com-永利彩世界网站| www.729888.com-彩票小助手官网| www.800067.cc-彩票多少位数| www.881463.com-22彩票合法吗| www.948342.com-福彩发行时间| 同乐彩票www.tlcp4.com| www.9302.loan-精选论坛特区彩票网| www.750679.com-快三彩票手机版| www.9048.cc-体彩七彩开奖号码| www.192162.com-河北省彩票开奖查询| www.265957.com-快三哪个比较容易中| www.338255.com-大家乐彩票机怎么样| www.54790.com-体彩复式中奖计算器| www.020169.com-彩票限售-| www.087083.com-乐福彩票真的假的| www.gp36.com-新疆喜乐彩开奖号码| www.6104.cc-淘之家彩票预测网| www.365152.cc-彩库宝典视频现场开| www.493706.com-时时彩平台建设| www.14500.cc-七星彩复式玩法价格| www.546453.com-易彩堂彩票正规| www.119446.com-体彩六码遗漏统计| www.275259.com-哪个彩票软件最好用| www.021222.com-山西福彩中心电话| www.645.me-凯利公式彩票| www.6376.org-足球胜负彩下载| www.870047.com-体育彩票店几点关门| www.933207.com-私彩平台制作| www.982779.com-重庆福彩网官方首页| www.cp9679.com-彩票1分快3怎么玩| www.664883.com-彩民之家图片| www.176.in-彩客让球胜平| www.51219.cc-神州乐彩重庆时时彩| www.024528.com-体彩快3规则| www.106037.com-温州体彩网阳光征召| www.2327.cm-时时彩半顺与顺子| www.842121.com-彩票未来发展方向| www.17378.com-福彩3d杀尾-| www.357559.com-彩票中奖周围人| www.504050.com-多彩网彩票提现| www.611588.com-双彩i论坛-| www.950681.com-彩票开奖器傲然| www.78bb.com-博彩和体彩区别| www.04216.com-竞彩微信-| www.5329.cm-彩11-| www.018786.com-福利彩票快乐彩玩法| www.222807.com-大奖彩票网-| www.139974.cc-彩16苹果版-| www.272828.com-pc彩票是什么| www.402441.com-七乐彩杀号图迷| www.3967.cm-832彩票下载| www.775453.com-彩票一般买几注| www.74cp.cc-黑彩有没有赚钱的| www.039050.com-投资彩票怎么赚钱| www.170265.com-上海快三500期| www.in67.com-手机上能买彩票吗| www.09wb.com-八手巴购彩票真假| www.088434.com-手机足彩比分直播| www.208099.com-福彩快三投注技巧| www.315028.com-体彩超级大乐透规则| www.1704.com-数字型彩票特点| www.670830.com-众彩网双色球推荐号| www.750177.com-公牛彩票app下载| www.812664.com-华彩咨询集团| www.875334.com-与彩票有关的故事| www.947081.com-高频彩为什么合法| www.983401.com-c彩16手机官网| www.cai5766.com吉林快三跨度走势图| www.813943.com-江苏快三胆码| www.869572.com-澳洲3分彩玩法| www.zf.com-大发快三账号注册| www.vm50.com-福彩10选5怎么玩| www.23bv.com-天津时时彩计划| www.653231.com-澳门星星彩官方网| www.153952.com-中彩国际是不是骗局| www.570088.com-七彩云南第壹城电话| www.762715.com-福利彩票中奖人| www.448221.com-体彩大乐透扫码查询| www.ai06.com-七星彩预测幸运之门| www.46098.com-9090彩票-| www.5836.xyz-深圳彩票黑客案判了| www.342277.com-全民汇彩票下裁| www.508221.com-头彩网官网-| www.551383.com-彩票跟单的平台| www.67gs.com-分分彩龙虎技巧稳赢| www.969346.com-彩票计划平台| www.uq57.com-快乐12爱彩乐| www.71ia.com-重庆市彩时开彩记录| www.590628.com-福彩3d高级走势图| www.680109.com-福彩吧是真的假的| www.752708.com-彩票直通车可信| www.815366.com-3d彩票票样-| www.y37.net-重庆时时彩易记彩票| www.1243.me-贵州福彩站-| www.632292.com-中国体育彩玩法说明|