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.206494.com-鳄鱼彩票杀号| www.496708.com-网上帮别人投注彩票| www.539968.com-三星缩水软件时时彩| www.63026.com-彩票开奖历史公告| www.074757.com-彩富内莫资料大全| www.40035.com-淘彩票代打-| www.52wk.cc-快速时时彩娱乐| www.208151.com-彩票帮投是怎么样的| www.303382.com-七彩网彩票官方网站| 华夏彩票www.hx1115.com| www.542431.com-福彩中心3d字谜| www.657436.com-时时彩代理会判刑么| www.815571.com-福彩p3开奖结果| www.961391.com-七乐彩胆拖中奖查询| www.gd7.com-重庆时时彩突然停了| www.296433.com-福彩3d吧百度吧| www.vq21.com-广西快三选号助器| www.13rb.com-彩票3d三地胆| www.439.me-重听天天福彩| www.7378.vip-竞彩店有名额限制么| www.zi91.com-038彩票预测| www.974605.com-七呈彩开奖-| www.sg42.com-省福彩中心在哪里| www.9979.org-今晚七星彩票开结果| www.150557.com-中福时时彩平台| www.7px.cc-河南体彩在哪里领| www.96pz.cc-投资高频彩流刷流水| www.688883.com-广东体彩网走势图| www.773462.com-鸿运彩票软件| www.887627.com-昨天体彩票开奖号码| www.959386.com-长乐坊彩票能提款吗| 易彩堂www.55885m.com| www.18uq.com-泰安体育彩票| www.62556.com-彩票中奖指南第三章| www.16zu.com-700万彩票-| www.2785.cc-彩票甘肃十一选五| www.9498.org-海南哪里私彩多| www.685488.com-彩票手机在线购买| www.781814.com-一分快三黑彩| www.40984.com-顶级彩票娱乐平台| www.014768.com-快彩乐乐-| www.145982.com-310足彩专家预测| www.244494.com-新浪爱彩双色| www.522684.com-nba体彩推荐号码| www.of24.com-河北27号快三开奖| www.258622.com-体育竞猜彩票| www.104032.com-港版红好彩-| www.211154.com-体彩官网首页| www.12py.com-江苏福彩i5选5| www.7080.com-建盏七彩用牙膏洗掉| www.33975.com-七色彩虹图片| www.163725.com-体彩彩票站-| www.566936.com-彩神争网址-| www.977036.com-彩礼两万是不是很少| www.zc40.com-彩票销售聊天技巧| www.6996.org-下载七彩云app| www.58003.com-家彩网预测-| www.rv53.com-腾讯彩票合法吗| www.292153.com-重庆快三官网投注| www.358762.com-体彩大乐透杀号技巧| www.446780.com-七星彩解梦查码王| www.529579.com-利盈彩票实时计划| www.599301.com-怎样买双色球彩票| www.663850.com-乐彩论坛一百度| www.728073.com-鼎盛团队5分彩计划| www.793330.com-彩票助手追号计划表| www.862252.com-k彩彩民福地测速| www.921157.com-福利彩票走势图3d| www.975423.com-江苏快三网络骗局| www.182932.com-宁夏福彩快三开奖号| www.98090.com-上海福彩11选5| www.024650.com-彩神通会员四码准吗| www.099072.com-易彩娱乐手机版| www.561623.com-美女玩彩票骗局| www.765144.com-海口网七星彩彩版| www.863133.com-智慧彩软件挂机贴吧| www.917688.com-时时彩最安全的玩法| www.973605.com-温州市体彩管理中心| 500万彩票www.www.98528f.com| www.081665.com-彩票数字范围| www.213224.com-吉林快三分析软件| www.288230.com-江苏快3爱乐彩走势| www.385362.com-吉祥彩登录官网| www.585548.com-福彩三弟字谜| www.nf81.com-正规网络售彩| www.463009.com-大掌柜彩票邀请码| www.566443.com-北京和彩放题餐厅| www.046277.com-天天彩怎么下载| www.95lc.com-多彩科技还我血汗钱| www.3885.xyz-彩票如何异地兑奖| www.00188.cc-爱投彩票是真的吗| www.40354.com-佬牛足彩20-| www.92996.com-红彩会平台怎么样| www.51529.cc-福彩3d包选6| www.xw08.cc-彩票1216网站| www.404556.com-彩铅画动漫工具| www.672577.com-极速一分彩全天计划| www.73537.com-红旗彩票合法吗| www.949290.com-社会福利彩票| www.9971.cn-彩票榜客服电话| www.9814.xyz-481彩票倾家荡产| www.52592.cc-网上盈彩网合法的吗| www.94947.cc-彩票兑奖支票| www.969730.com-新昌双彩乡旅游| www.eg14.com-345彩票-| www.vn68.com-全球彩票开奖查询| www.13oi.com-大星彩票走势图网| www.79xs.com-福彩排列5几点开奖| www.788899.com-福彩双色球33加一| www.276291.com-各种釉彩大瓶贴吧| www.345650.com-彩票体彩排列五开奖| www.4543.vip-七星彩票选几个号码| www.216455.com-快三如何抓豹子| www.2394.vip-米兰5分彩-| www.259906.com-上海卖体育彩票的| www.873.tv-内蒙快三组合走势图| www.494.me-快三26组合-| www.ze24.com-彩票提醒软件| www.77mt.com-福彩室内装修图| www.4812.biz-彩6网站怎样| www.399436.com-金羊网彩民故事| www.611653.com-彩虹主站搭建| www.796246.com-下头奖彩票-| www.985633.com-淘宝快三基本走势图| www.3iv.cc-下载彩39-| www.0988.xyz-彩乐网香港骞马会| www.115062.com-七乐彩齐鲁风采| www.575771.com-竞彩网购平台| www.nc48.com-038彩票吧-| www.305749.com-买彩票一直买同一个| www.639224.com-天天悦彩骗局| www.840251.com-上海基诺型彩票| www.567669.com-大发快三专家计划| www.687017.com-买彩票中奖的感觉| www.786227.com-彩票3d开彩号码| www.866649.com-今天看彩票中奖号| www.949273.com-今日彩票3d图纸| 亚洲www.391109.com| www.604813.com-集美体育彩票店转让| www.256827.com-彩票天天中彩软件| www.604420.com-福彩3d购买大厅| www.673925.com-宫廷建筑彩画| www.769899.com-好彩牛牛-| www.ba81.com-⊙江西快三和值| www.st24.com-澳门六星彩图片| www.360.com-爱彩乐助手下载| www.447708.com-体彩排列3预测专家| www.33319.cc-有三分钟时时彩的吗| www.46644.cc-时时彩的钱怎么提现| www.703258.com-六爻测彩票秘法| www.726328.com-怎么样手机买彩票| www.839525.com-足彩预测分析app| www.913969.com-瑞彩祥云登陆| www.977650.com-豪彩娱乐app| www.ad07.com-各种彩票开奖结果| www.026452.com-篮彩推荐分析| www.661721.com-足彩中上亿-| www.y26.com-体彩排列五和值投注| www.059588.com-吉林快三推荐| www.144412.com-足彩14场胜平负| 全民彩票www.53536.cc| www.868881.com-福彩双色球中奖骗局| www.954786.com-彩票今晚-| www.cp9660.com-今日中彩下载|