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天

知道了
彩01彩票 www.530768.com-时时彩到底怎么获利| www.679116.com-有人让我玩5分彩| www.4ic.com-优亿市场彩票| www.236890.com-彩票网上购买| www.355641.com-足彩税怎么算| www.530616.com-福彩36-| www.617182.com-彩票领奖图片| www.699290.com-玩网络彩票赢了五万| www.789826.com-银川福彩大奖无人领| www.895396.com-华彩赢家是不是传销| www.262361.com-福建体彩票-| www.375447.com-海南福利彩票开奖| www.494249.com-沈阳彩票站合作| www.580412.com-体彩排五开奖、结果| www.660964.com-中奖简单福彩3d| www.736576.com-下载体育彩票网| www.807969.com-优彩app官网| www.889792.com-七星彩机选-| www.963171.com-彩票顶呱刮软件| 天天彩票www.101363.com| 500彩票www.3126y.com| www.417944.com-附近福利彩票位置| www.544392.com-3彩是什么-| www.622622.cc-黑苍蝇3d彩报图| www.703855.cc-福利彩票3d软件| www.791203.com-晚好彩-| www.874676.com-大同彩票网站| www.947117.com-高频彩不能碰| 亿龍彩票www.67767.cc| www.254394.com-福泰娱乐快三下载| www.441595.com-众彩乐11选五| www.556280.com-彩票开奖大乐透下载| www.637312.com-大彩网七乐彩走势图| www.764707.com-彩神通关注金码和尾| www.849203.com-皇冠足彩官网| www.922931.com-彩票站的前景如何| www.981335.com-一分快三和值| www.ak00.com-全员彩票开奖查询| www.xy08.com-d9cc彩票app| www.3491.com-博彩全部网站| www.8996.loan-足彩赔率分析| www.11228.com-足球彩票软件能买| www.050297.com-彩票报纸在哪买| www.268536.com-体彩助手电脑版| www.566945.com-51中彩是真的吗| www.712050.com-关注山东福彩中心| www.464158.com-彩票4十1多少钱| www.655211.com-南国南国彩票论坛| www.873458.com-上海彩票开奖结果| 爱心彩www.axc4.com| www.589826.com-体彩排列三高手预测| www.9297.org-分分彩技巧投注方法| www.43806.com-体彩快乐10分钟| 好运彩票www.444hy.cc| www.247535.com-快乐彩一定牛走势图| www.859800.com-中国福彩利彩票保障| www.496255.com-国外足彩app| www.973240.com-彩虹社区官网| www.bo57.com-手机网易彩票下载| www.qi05.com-好彩l开奖-| www.908168.com-七星彩少花钱中大奖| www.699950.com-台湾大福彩开奖| www.819708.com-吉林快三20分一期| www.917023.com-彩铅画风景图片大全| www.986797.com-七乐彩预测一注号码| www.ct56.com-大发彩票平台登录| 天下彩www.674770.com| www.am21.com-贵州省福利彩票网站| www.818045.com-足彩19024分析| www.897352.com-玩时时彩赚钱技巧| www.976714.com-四川广元彩礼价目表| www.ay5.com-体彩排列3走势图| www.989410.com-福彩复式怎么买列表| www.300881.com-人人中彩票咋样| www.596753.com-南阳彩开奖直播现场| www.539319.com-时时彩后三大底方法| www.682203.com-哪里可以买足彩| www.852902.com-北京福彩网下载| www.931257.com-魔方彩票官网| www.985294.com-江苏快三怎么代理| www.ae2.com-中国福利彩票网| www.5095.top-时时彩个位公式| www.41202.com-中彩国际彩票学院| www.012144.com-福利彩票中奖计算器| www.043740.com-体育彩票排三胆码| www.213857.com-彩神官方在线| www.89304.com-六亿彩票平台| www.231987.com-彩票挂机软件手机版| www.971974.com-体育彩票案-| www.338466.com-时时彩宝贝计划官网| www.442737.com-双彩球开奖-| www.535599.com-易彩堂彩票下载安装| www.606853.com-天津体育彩票摇奖| www.679093.com-专业博彩套利| www.760902.com-在线计划时时彩| www.38639.com-幸运彩网站登入| www.563.cm-新宝6腾讯分分彩| www.8412.net-五福彩彩票软件下载| www.tc93.cc-春秋彩票有人被骗吗| www.0417.me-彩票助赢论坛| www.v77.net-微信彩票群拉人技巧| www.51zj.com-牛蛙彩图库资料| www.cp5771.com-福彩快3害死多少人| www.74405.com-七乐彩中七个基本号| www.388850.cc-澳门微信群发送彩金| www.863422.com-彩票源码网-| www.549670.com-上海福彩自助销量| www.536316.com-黑龙江福彩快乐10| www.620305.com-奥客足彩网-| www.689273.com-t乐彩开奖-| www.766372.com-中国福彩快三图表| www.80nu.com-中彩票先交税还是| www.567309.com-江苏体彩17022| www.675197.com-体彩出奖结果| www.791667.com-我要在网上买彩票| www.898916.com-美团彩票如何领取| www.990065.com-澳客彩票缩水软件| www.mu30.com-全球彩票游戏平台| www.47iy.com-彩票账对不上怎么办| www.734566.com-足彩19020期| www.259890.com-天津体彩-| www.482629.com-蓝料彩瓷器-| www.665381.com-竞彩返点-| www.789014.com-唯彩彩票投注| www.954052.com-体彩竞彩官网| www.dq78.com-彩票时时彩托的套路| www.448660.com-全能彩票软件| www.hi55.com-高频彩快取缔了吗| www.711626.com-特彩吧高手网报码| www.14kz.com-掌中彩登录-| www.082644.com-五省快三是哪五个| www.590623.com-天津体彩销售提成| www.659577.com-休彩出什么号码| www.781440.com-卓易彩票正规| www.872385.com-今日体彩排列三字谜| www.981573.com-福彩投诉中心| www.wq5.cc-湖北快三统计图表| www.372295.com-贵州遗漏快三| www.591247.com-竞彩保本打法| www.6392.xyz-丹麦快乐彩app| www.019172.com-利彩是什么性质| www.796134.com-体彩选号-| www.967243.com-女孩骗我买时时彩| www.d89.net-高手彩票彩票玄机| www.253728.com-二分时时彩官方网站| www.244845.com-快三豹子秘籍| www.019359.com-快乐彩票一彩种| www.105652.com-时时彩开奖ios| www.193294.com-福彩十五选五| www.663010.com-手机彩票积分版| www.57432.com-宝盈彩官网-| www.79760.cc-宁夏体彩网点| www.1636.me-体育彩票如何玩| www.85835.com-体育彩票客户端下载| www.731902.com-彩色压印地坪厂家| www.797286.com-京彩娱乐下载地址| www.869089.com-彩票代理-| www.918506.com-篮球彩票软件推荐| www.969034.com-众彩彩票是合法的吗| 大赢家彩票网www.83033y.com| www.ev93.com-金牛彩票-| www.sr34.com-福彩专家预测汇总| www.w74.org-新快三遗漏表| www.760403.com-75秒时时彩下载|