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.369061.com| www.590798.com-微彩网彩票是真的吗| www.78uy.com-台湾5分彩app| www.981429.com-流水返点的彩票网站| www.709748.com-5亿彩票首页| www.830990.com-太湖字谜新彩网| www.941818.cc-福利彩票代理| www.42605.com-彩经网工具箱| www.028335.com-下载彩票app| www.029863.com-大发彩神官网| www.7760.top-体彩专家预测号码| www.670893.com-彩色资料册-| www.973665.com-手机福彩客户端| www.cp1158.com-快三软件-| www.304518.com-派彩网专家推荐| www.060699.com-红宇体彩店app| www.239305.com-找个微信快三群| www.353116.com-下载彩39-| www.8050.vip-云南时彩开奖记录| www.54367.com-自助领取彩金网站| www.056369.com-够力七星彩奖表6| www.069797.com-福利彩票中奖图片| 彩客吧www.77ckb.com| www.79en.com-福利彩票营业时间| www.022151.com-神州彩票方下载| www.5921.xyz-快乐彩走势图手机版| www.232354.com-上海快三三同号预测| www.448882.com-分分彩人工计划| www.622852.com-购买网络彩票犯法吗| www.812027.com-大乐透乐彩论坛| www.976846.com-2018德州彩礼钱| www.38984.com-人人买彩票提现不了| www.918857.com-新世纪博彩-| 9号彩票www.80767l.com| www.290635.com-黑龙江快三走势图表| www.js59.cc-快三彩票正规吗| www.321124.com-彩票神器-| www.407237.com-河南的彩礼是多少钱| www.525461.com-电竞外围博彩| www.72933.com-下载福彩感恩app| www.097767.com-微信群玩快三好多拖| www.337173.com-福建快三未出号| www.379949.com-彩票经营方式| www.083730.com-福利彩票精准预测网| www.147180.com-内蒙快三均值走势图| www.552010.com-福利彩票哪种简单| www.798571.com-体彩投注站查询| www.905711.com-快三高频彩网址| www.990689.com-竞彩足球立博体系| www.7768.net-彩宝网开奖查询| www.237085.com-竞彩网首页计算器| www.389052.com-领航彩倍投是真的吗| www.210289.com-福建省福彩领奖地址| www.297982.com-兰州体育彩票中心| www.373981.com-大星彩票图-| www.485585.cc-彩票代购软件排行榜| www.616.me-时时彩杀码神器| www.6056.vip-体育彩票过户| www.8778.vip-足彩预测软件哪个好| www.3915.cn-七星彩迷图-| www.10716.com-玛雅吧彩票游戏| www.048369.com-7乐彩开奖结果查询| www.9310.vip-我要彩票走势图| www.58798.com-福彩3d布衣彩图| www.680609.com-彩网走势图-| www.779981.cc-智能彩票神器| www.867890.com-福彩星开奖结果| www.958329.com-福利彩票的奥秘| 华彩www.71399v.com| www.101109.com-捷报网足彩预测| www.1236.top-皇家世彩世界app| www.7748.top-九万彩票可以提现嘛| www.3889.vip-苏宁体彩-| www.595328.com-彩票外挂作弊软件| www.672657.com-买了彩票掉了| www.737171.com-彩迷图吧第四| www.798981.com-时时彩后三技巧| www.870890.com-41彩票网下载| www.935999.cc-大发彩票在线计划| www.981125.com-體彩-| www.iq6.com-内蒙快三中奖号码| www.614022.com-彩票榜是合法的吗| www.788907.com-今日竞彩足球唯彩| www.557379.com-福彩南方双彩网| www.407688.com-香港福利基金彩地址| www.cp9200.com-中彩彩票是真的吗| www.d47.net-彩票复式生成软件| www.59xp.com-彩票店兼营业务| www.555495.com-快三有多少个黑号| www.189.com-59彩票网官网| www.8252.com-金龙彩票下载安装| www.70466.com-香港票彩大全| www.868506.com-七星彩试机号码| www.981338.com-足彩倍投计划| www.vu67.com-彩票k线趋势软件| www.871749.com-苏州福利彩票领奖| www.952346.com-k彩官方下载| www.998233.com-七星彩加急版一夜谈| www.da44.com-盛兴彩票网手机v1| www.4962.top-彩澳彩票平台怎么样| www.71ku.com-买彩票励志语录| www.1882.hk-幸运天天中彩下载| www.127083.com-彩铅艺术画图片大全| www.233998.cc-彩票开奖查询5d| www.318115.com-十字彩怎么下载| www.398455.com-广东腾彩印刷| www.509956.com-3d小彩报-| www.886567.com-彩61彩票是真的吗| www.956990.com-彩盈登录注册| 大玩家彩票www.9478z.com| www.195373.com-上海怎么申请体彩店| www.913373.com-天天彩票兔兔向前冲| 天朝彩票www.15239.cc| www.pj96.cc-北京市快三开奖查询| www.0800.cc-足彩去哪投注| 818合彩www.www.5666hc.com| www.554343.com-彩票3d术语-| www.691660.com-天天玩竞彩-| www.0514.cc-体彩七位数中两位数| www.819297.com-彩票培训师资格证| www.903204.com-福彩3d金码试机号| www.970366.com-天天乐彩是真是假| www.dr88.cc-快三苹果下载app| www.3hk.cc-正规的买彩平台| www.67uh.com-福彩网络购买彩票| www.cp00.com-彩客彩票-| www.662453.com-双色球易彩网走势图| www.191739.com-分分快三彩票平台| www.047263.com-22彩票平台网址| www.529252.com-彩虹岛手机网页版| www.591055.com-福彩排列七玩法说明| www.659777.com-彩票查看中心双色球| www.725287.com-中国彩票与赌博| www.792608.com-福利彩票是谁开创的| www.866647.com-金钱豹彩票平台| www.939569.com-福彩网址下载| www.989668.com-家彩开奖号-| www.qo9.cc-吉林省体彩兑奖地址| www.905152.com-世界杯足彩买不了了| www.347387.com-流文溢彩优美散文| www.555722.com-7乐彩出奖顺序号| www.838568.cc-丹麦28彩票计划| www.cp240.cc-江苏快三怎么玩稳赚| www.292.live-彩票中了老板打错了| www.99447.com-足彩310电子报纸| www.102342.com-加拿大28彩票| 500彩票www.330652.com| www.776622.cc-重庆时时彩停业通知| www.381366.com-七乐彩我要机选| www.858318.com-彩迷天地图-| www.w43.net-神彩网快3-| www.z21.com-足彩十四预测分析| www.8957.cn-在哪能买电子彩票| www.970580.com-凤凰彩票真的能赚钱| www.672025.com-牛彩网彩网牛材网| www.251355.com-18彩票app-| www.474172.com-腾讯分分彩倍投方案| www.808583.com-彩票分析软件安卓| www.948853.com-体育彩票有app吗| www.276955.com-体彩每20分钟开的| www.639742.com-牛牛28彩票-| www.812932.com-华彩人生-| 博汇www.865807.com| www.828256.com-彩票下载红包版|