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天

知道了
北京福彩网 www.496884.com-彩票二等奖奖多少税| www.709110.com-1305彩票安全吗| www.802185.com-云南福利彩票双色球| www.893034.com-重庆时时彩过滤工具| 易盈彩票www.7793h.com| www.ng28.com-乐迎彩票app| www.48re.com-三国杀张星彩收益| www.0601.cm-香港小财神彩票网| www.hg80.com-彩票51中彩下载| www.77qp.cc-彩票的五行属性| www.9098.loan-中国便民懂你彩吧| www.7111.com-建盏七彩原因| www.90399.com-七星彩排列五走势图| www.096866.com-排五走势彩宝网| www.206829.com-彩71快三-| www.033881.cc-老凤凰旗舰版彩票| www.145336.com-彩神网页版登录入口| www.239278.com-五分彩私网-| www.313231.com-大发彩票坑人| www.382871.com-新浪排列三数学彩票| www.491918.com-体彩大透开奖| www.562789.com-网络博彩推广| www.446997.com-七星彩票论坛808| www.723.win-19028期胜负彩| www.8295.top-福彩全国排名| www.230335.com-鼎盛彩运8-| www.326120.com-体彩彩宝网-| www.225669.com-马云把彩票全买了| www.326297.com-网易彩票开奖号号| www.416155.com-网络彩票骗局处理| www.518375.com-赢彩专家官网手机版| www.592989.com-彩虹六号苹果版| www.675973.com-北京聘礼彩礼怎么给| www.741186.com-江苏快三数据| www.809405.com-955彩票ios-| www.878932.cc-彩票挂机能赚吗| www.951969.com-快开彩是什么意思| 818合彩www.www.9889hc.com| www.jf97.com-网上福彩快三| www.1oo.com-彩票对压是什么意思| www.17641.com-体彩足彩竞猜app| www.026284.com-人人植树彩字谜| www.127619.com-彩虹岛为什么不火了| www.242355.com-立体彩铅画图片大全| www.322236.com-宝岛彩票-| www.379707.com-神秘彩票88倍| www.549544.com-足球彩票在哪里能买| www.ay2.cc-腾讯分分彩高手赌法| www.uk11.com-澳门大赢家彩票| www.131445.com-烟台彩礼-| www.265729.com-时时彩倍投计算工具| www.416896.com-天下彩民彩图诗句| www.42co.com-体彩和福彩开奖日期| www.5905.cc-彩礼超过三万犯法吗| www.28526.cc-全球官方彩票| www.620301.com-彩票如何买才会中奖| www.705358.com-体育彩票兑奖平台| www.799968.com-杀号定胆360彩票| www.875106.com-网易彩票app真假| www.950685.com-网上快三可靠吗| 网易彩票www.076wy.com| www.hl02.com-7彩辅助免费版| www.c25.space-多赢彩票官方网站| www.41vd.com-鸿发彩票幸运快3| www.776960.com-锋彩直播如何添加源| www.870642.com-彩票投注软件可靠吗| www.947936.com-正规的购彩平台| 13e彩票www.810872.com| www.oh63.com-富民彩票app| www.30on.com-彩虹正版易支付源码| www.863.hk-时时彩五星玩法| www.5905.vip-榆次福彩中心| www.35366.com-福彩交流服务平台| www.20ef.com-胜负彩中奖图片| www.3014.cm-彩的谜面-| www.49951.com-体彩兑奖银行| www.048282.com-3d天天彩图-| www.24.mobi-福建龙岩长汀彩票站| www.2146.shop-劲爆体育足彩推荐| www.813328.com-339彩票下载安装| www.908252.com-深圳七星彩去哪领奖| www.979094.com-旋子彩画教程| www.54oi.com-福彩销售点的销售额| www.984.mobi-游戏机里面的彩票| www.5115.in-谁有直播平台彩播| www.9950.online今晚彩票图纸| www.41765.com-福彩三地图谜总汇| www.813606.com-宁夏彩票中奖人| www.888491.com-下载第一彩票| www.69ml.com-手机刮奖彩票| www.4335.vip-彩票中奖符制作方法| www.11397.com-周六足彩对阵表| www.73315.com-天涯高人能算彩票吗| www.036981.com-彩票01下载安装| www.110547.com-福彩3d两胆规律| www.132715.com-世界杯竞彩分析| www.243544.com-福彩中奖查询| www.342701.com-掌上彩票新平台| www.414565.com-竞彩m串n一场延期| www.444.net-福利彩票最早的大奖| www.5403.vip-邢台安装彩钢板厂家| www.15101.com-温州体彩官网首页| www.63039.cc-胜天半子足彩| www.994388.com-数字彩票技巧| www.fz44.com-买彩票的技巧| www.u00.top-时时彩最快开奖平台| www.62dz.com-猎豹团队时时彩计划| www.ld70.com-中彩在线骗局| www.44sq.com-彩票魔图-| www.1691.wang-天下彩008-| www.52995.com-彩46是正规网站吗| www.029974.com-好运来彩票网网址| www.147002.com-爱购彩登录密码| www.260420.com-中福快三网站| www.326390.com-哪种彩票星期六开奖| www.390528.com-博都彩票-| www.491451.com-手机万能彩膜批发| www.558680.com-彩博888怎么样| www.8209.top-分钟彩票-| www.949531.com-百盈彩票_购彩大厅| www.fp71.com-甘肃快三高手| www.26sg.com-东莞福利彩票查询| www.3576.cc-微彩吧是什么软件呢| www.21852.cc-彩票稳赢他套现| www.83033.com-买彩票怎么翻倍| www.088350.com-中彩网压大小| www.186094.com-今日广西快三走势图| www.58935.com-大同福彩中心| www.045239.com-博发网彩票-| www.128284.com-体彩七彩乐玩法| www.198637.com-大发彩票app安卓| www.265944.com-买快三有赚钱的吗| www.333088.com-百度乐彩网首页| www.203809.com-体彩5d开奖结果| www.260345.com-彩票平台算是赌博吗| www.98959.com-结婚彩礼标语| www.117728.com-天下彩开奖在线直播| www.237300.cc-彩票倍投有成功的吗| www.311381.com-甘肃福利彩票陇彩宝| www.81658.com-吉林快三怎么能赢钱| www.132823.com-生产彩色纸箱| www.199555.cc-上海快三遗漏号码| www.255520.com-福彩12选5开奖号| www.323711.com-金7乐彩票走势图| www.388737.com-天天彩选4中奖金额| www.550337.com-彩客化学公告| www.613236.com-彩票程序源码出售| www.887616.com-福彩快三邀请码| www.957332.com-杏彩平台手机网页版| 688彩票www.688dl.com| www.da83.com-彩神1准吗-| www.xk38.com-甘肃省福利彩票兑奖| www.9719.biz-彩客骗局揭秘| www.229510.com-快三彩票玩法| www.320738.com-河南体彩网电脑扳| www.6803.me-新浪彩票佬牛| www.76727.cc-竞彩专家推荐预测号| www.670577.com-彩票开奖通知| www.783608.com-三d彩经网-| www.079621.com-足彩合法吗-| www.192005.com-河南快三任意俩码和| www.310111.com-延吉福利彩票双色球| www.96tx.com-山东体育彩票115| www.6595.in-彩票幸运选号数字|