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天

知道了
百盈PK10 www.151600.com-彩票77是真的吗| www.312004.com-合法的彩票网有什么| www.58000.cc-旺彩双色球电脑版| www.403200.com-申国福利彩票彩吧| www.w08.cn-全民快三微信交流群| www.87sx.com-十分彩怎么样| www.2364.cc-体育彩票音乐| www.02585.com-盈易福彩受骗| www.56323.com-福铭彩票-| www.010521.com-购福彩方法-| www.090999.cc-福利彩票领奖期限| www.166149.com-快三官网下载| www.249234.com-酷彩app官网下载| www.326711.com-古建彩绘图案| www.sl30.com-中体彩网走势图| www.72qn.com-1516爱彩票-| www.6023.biz-体育足球彩票胜负彩| www.802116.com-天津十分彩技巧| www.4520.wang-体彩19065期| www.32893.cc-河南驻马店的彩礼| www.92112.cc-手机顺风彩票| www.313004.com-038彩票手机登录| www.610729.com-凤凰错阿彩-| www.820527.com-pvc彩钢板-| www.119824.com-凤凰快三下载安装| www.914953.com-优彩网苹果版| 亚洲彩www.68568y.com| www.up88.cc-福彩3d彩吧论坛| www.98br.com-福彩3d字迷图总汇| www.57fl.com-够力七星彩奖表长条| www.8186.wang-六彩票香港-| www.96331.com-发福利彩票的意义| www.133699.com-福建体彩票开奖结果| www.299245.com-中彩在线手机版| www.20nl.com-阜阳彩票冒领案| www.588899.cc-体彩七星彩那天开奖| www.675260.com-爱投彩票系统软件| www.783561.com-wj万家彩票-| www.9032.vip-香港天空彩票| www.090094.com-登录凤彩网-| www.541004.com-金多彩84384| www.759088.com-大中华彩票可靠吗| www.926173.com-500万彩票预测| www.fi6.com-时时时彩开奖器| www.tm07.com-江苏福彩双色球预测| www.3150.vip-新8彩-| www.uk94.com-内蒙古福彩网站| www.65ho.com-丫头说彩福彩体彩| www.5278.site-今天赛马派彩和结果| www.704342.com-500彩票靠谱吗| www.815739.com-开彩通下载-| www.933901.com-彩庫寶典-| www.aq77.com-遵义体福彩店转让| www.43yo.com-精彩的精是什么意思| www.3360.biz-捕鱼送彩金平台| www.620796.com-彩票协会-| www.756939.com-网上购彩团队靠谱吗| www.330273.com-国家合法的彩票| www.77335.cc-彩票30期双色球| www.167385.com-快三在线投注软件| www.512032.com-彩票万能计算器| www.122086.com-美国时时彩开奖号码| www.259295.com-中国竟彩网-| www.422400.com-中国竞彩赛果开奖| www.569078.com-两元怎样买彩票| www.880452.com-加盟时时彩代理平台| www.401929.com-彩礼谈不拢又怀孕了| www.624610.com-时时彩应用-| www.995423.com-新浪网彩票首页官网| www.499097.com-彩票日工资2| www.673318.com-古建彩画图案| www.920707.com-彩票争霸1i-| www.cp9660.com-今日中彩下载| www.35qw.com-澳门哪里可以买彩票| www.8133.cn-各种彩票开奖日| www.54120.com-足球博彩看盘| www.168603.com-快3彩票官网下载| www.329821.com-彩票跑路的平台| www.1ng.com-河北省彩票大奖得主| www.888.red-彩99苹果版-| www.9509.vip-实名制购彩票的规定| www.ha4.cc-福彩3d一句定三码| www.l15.cn-大发0234彩-| www.283.website民权彩礼多少钱| www.8060.in-欧洲百万彩玩法| www.66995.com-河南安阳福彩5亿| www.540323.com-福利彩票能买足球吗| www.pf76.com-2013彩票网-| www.671551.com-彩店宝彩票旧版| www.973904.com-万彩吧更新升级| www.625908.com-北京快三购彩| www.76550.com-彩票故事中奖| www.wz97.cc-彩77官网下载| www.do14.com-彩经网走势图大全| www.35dh.com-南海彩票社区| www.630651.com-即开型彩票中奖率高| www.771461.com-吉林快三今天一定牛| www.888177.com-爱乐彩山东11选五| 全民彩票www.175131.com| www.3ks.com-旺彩大乐透选号技巧| www.569.cm-励赢彩票是真的吗| www.7794.pw-梦见一组彩票数字| www.49329.com-快三70期开奖结果| www.022364.com-88彩票手机官网| www.671004.com-彩票历史开奖走势图| www.631413.com-七彩云南老板是谁| www.aj1.cc-北京快三遗漏走势图| www.f14.top-新加坡彩票营业时间| www.53978.com-彩票十大网站排名| www.706809.cc-时时彩分析图软件| www.898115.com-彩票店足彩怎么买| www.984062.com-下载手机购彩| www.hl28.com-旺彩双色球手机软件| www.678304.com-乐彩专家论坛下载| www.856574.com-怎么买彩票技巧| www.238906.com-网上刷彩赚钱| www.vm34.com-网络彩票计划师套路| www.9724.cc-玄机图牛彩网大乐透| www.117987.com-彩票推算法诗歌| www.872947.com-湖北快三缩水软件| 易旺彩票www.ywzuqiu.com| www.172302.com-彩票投注-| www.114246.com-福利彩票最新规定| www.69xg.com-福彩121期-| www.0432.top-爱购彩票是真的吗| 开心彩票www.ck6587.com| www.9011.xyz-足彩世界杯比分倍率| www.86600.cc-福彩3d和值跨度| www.080995.com-彩票被骗如何追回| www.5910.cc-秦皇岛体彩中心电话| www.12099.cc-聚彩手机app下载| www.61001.com-保定体彩中奖| www.554367.com-五分快三是不是官方| www.722302.com-福利彩票分析软件| www.9169.org-七星彩真实中奖故事| www.516505.com-快三彩票是不是骗局| www.684909.com-亚搏彩票-| www.782275.com-七乐彩票app下载| www.877315.com-彩票五行属什么| www.962745.com-今日3d彩圣字谜| PK彩票www.900845.com| www.mr09.com-七乐彩怎么玩法| www.03js.com-玉林茂林镇彩票店| www.79hc.com-彩钢扣顶板-| www.2097.in-南京彩票店转让信息| www.9558.live-手机在线彩票app| www.200781.com-七星彩和值走势图| www.264002.com-今日彩票开奖公告| www.31293.com-鄂尔多斯福彩网| www.98212.cc-香港分分彩计划大师| www.082991.com-福彩快三的杀号公式| www.147655.com-福星快三-| www.89zh.com-什么牌子的彩漂好用| www.vz77.com-快三跨度和值| www.13il.com-买足彩稳胜技巧威廉| www.78xt.com-爱心彩报-| www.1409.cn-好运来腾讯分分彩| www.6074.vip-彩票计划者.apk| www.237000.cc-彩票大赢家软件下载| www.313065.com-足彩冷门虎扑| www.666032.com-买彩票找我-| www.135660.com-竞彩足球数据接口| 好运彩票www.003hy.cc| www.jp12.com-河北快三形态开奖|