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.805586.com-发财彩票app| www.927501.com-彩票数字几位数| www.983147.com-竞猜足彩app| www.ku0.com-体彩快三开奖结果| www.zx56.cc-重庆市彩时彩开奖| www.054518.com-祥云瑞彩图片大全| www.186724.com-快三一跨都有啥号| www.113728.com-彩涂钢板生产| www.231044.com-天天彩票app官网| www.xi07.com-七彩集团连锁企业| www.81dq.com-萍乡福利彩票中奖| www.017628.com-福彩三地两元网| www.118233.com-18彩票官方下载| www.4895.biz-彩猫彩票官网| www.035859.com-彩票推广广告语| www.795300.com-福彩大厅里的老虎机| www.897052.com-福彩出的什么号| www.971385.com-彩迷张专栏-| www.1221.blue-49彩网-| www.739647.com-懂彩气垫bb多少钱| www.828293.com-春天彩票登录网址| www.905997.com-福建省彩票领奖中心| www.970882.com-彩票有哪几种类型| www.cai5644.com吉林省福彩快三| www.380121.com-湖北快三赢钱技巧| www.207718.com-福彩3d软件-| www.l52.com-彩票表格制作教程| www.973092.com-彩虹六号手游官网| www.63dk.com-助赢江苏快三| www.928390.com-福彩三d天庚大帝| www.997246.com-彩票诈骗立案| www.gu08.com-梦想彩票站app| www.6ok.cc-买体育彩票的软件| www.988811.cc-时时彩下载安装苹果| www.dw99.com-福彩3d贴吧论坛| www.023311.com-六开彩玩法-| www.837539.com-立彩助手安卓| www.528970.com-飞鱼彩票走势图| www.359866.com-大象彩票客户端| www.501359.com-易彩堂可以赚钱吗| www.586979.com-连红彩票怎么下架了| www.657246.com-快乐时时彩游戏机| www.728616.com-中国体彩最新开奖| www.796427.com-彩票3d猜谜-| www.866037.com-腾讯彩票下载app| www.925432.com-体彩双胆专家预测| www.978318.com-5厚彩钢板围挡价格| www.cp610.com-江苏快三app| www.399891.com-彩票烂了能兑奖吗| www.541878.com-彩票赚钱算欺诈吗| www.699716.com-彩票5是骗人的吗| www.773234.com-快三开奖图表| www.840163.com-福彩pc是什么| www.651099.com-固体水彩画教程| 500彩票www.397477.com| www.962466.com-下载500彩票软件| www.107272.com-开彩彩票-| www.269009.com-超级彩票有危险吗| www.845621.com-369官方彩票网| www.922565.com-深圳足彩分析师| www.981608.com-为什么没人伪造彩票| www.mv43.com-安徽快三昨天走势图| www.528882.com-彩票预测有中奖的吗| www.667380.com-澳门彩球网站| www.753932.com-网络彩票坑-| www.820608.com-七星彩直播| www.884759.com-鸿彩主播火火| www.978530.com-好彩彩票网站| www.cp831.cc-贵州福彩快三遗漏| www.388507.com-迷彩图片手机壁纸| www.503903.com-249彩票-| www.569123.com-购买福彩双色球| www.899454.com-博彩平台源码| www.976282.com-因彩礼分手-| www.cp7598.com-保定快三开奖| www.pg24.com-打彩票技巧-| www.075589.com-7彩阳光早操| www.78zs.com-富力彩票app| www.855796.com-七乐彩算法-| www.928492.com-甘肃福利彩票种类| www.982004.com-中国福利彩票开奖器| www.fm24.com-贵州体育彩票兑奖| www.f65.pw-华人彩票可信吗| www.48bq.com-申请足彩投注站| www.0122.cc-春秋彩票跑路了| www.zj95.com-今天彩票幸运数字| www.877789.com-体彩开奖走势图| www.9op.com-福彩双色球中彩视频| www.974.cm-中七星彩去哪里领| www.09749.com-福彩三d大花猫| www.219436.com-河南彩钢围挡定做| www.350133.cc-买彩票不中奖| www.ib10.com-买快三为什么天天输| www.9xi.com-体彩数值范围是多少| www.83nm.com-2分钟开一次的彩票| www.584889.com-诺亚时时彩平台| www.850080.com-腾讯分分彩全五中一| www.954403.com-3d彩宝网开机| 亿彩www.6832n.com| www.629885.com-时时彩半顺有多少注| www.739411.com-久久彩票安卓| www.835177.com-美国好彩香烟柠檬| www.910345.com-百度乐彩登陆| www.961262.com-博友彩五分快三兼职| 皇家彩票www.hj7987.com| www.6465.in-51福彩-| www.439877.com-彩票网支持花呗| www.c5.cn-福彩内蒙古快三开奖| www.026026.com-福彩双色球攻略| www.501132.com-天空彩免费爱料大全| www.650109.com-天津时时采彩| www.3375.com-彩金和黄金哪个贵| www.369445.com-彩8官网下载| www.504200.com-乐宝彩票登入网址| www.578921.com-福彩3d专家杀码图| www.657480.com-体彩7排列3开奖号| www.722999.cc-7168彩票手机版| www.786928.com-彩票中奖指南百度云| www.848598.com-八七彩店app| www.928145.com-彩色一体打印机| www.984535.com-福彩3d小小鱼图| www.cai4433.com河南彩票快三| www.200968.com-七星彩晚上几点开奖| www.199397.com-快三最新未出号码| www.07td.com-6加1彩票要顺序吗| www.249.me-天津福彩快乐十分开| www.4675.cc-彩票多期购买| www.224414.com-福彩自助快三北京| www.751522.com-2020cc彩票-| www.9432.org-外国人如何买彩票| www.518903.com-手机网上怎么买福彩| www.583190.com-彩色简笔画风景| www.v59.cn-牛彩网一彩搜网| www.959522.com-幸运分分彩计划全天| 500彩票www.50051l.com| www.229257.com-广西快三赔率图| www.306077.com-727平台彩票| www.369547.com-福彩今日藏机图| www.461637.com-彩客网推荐专家| www.993393.com-博彩打鱼送彩金| www.jn27.com-微信群快三赚钱吗| www.00eq.com-描写彩虹的优美诗句| www.pm00.com-体彩网页版-| www.08cf.com-彩票与生活图片大全| www.74ep.com-中国彩宝市场| www.2725.xyz-唐山彩票中奖者| www.32968.com-一分彩计划软件| www.793695.com-河南福彩中奖蒋| www.256953.com-福彩3d技巧和秘籍| www.06603.cc-福彩天吉网预测分析| www.80821.cc-福利彩票打票键盘| www.kz28.com-福彩怎样买-| www.06aq.com-水彩颜料用什么洗| www.295.in-七星彩中奖标准| www.2020.la-福彩兑奖处兑奖| www.146199.com-江西快三贴吧| www.00dy.cc-全国彩票开奖查巡| www.80bz.com-3d丫头说彩-| www.tm30.com-彩票转让-| www.001540.com-天天爱彩票提现不了| www.66753.cc-附近的福彩双色球店| www.036235.com-十一选五购彩平台| www.126551.com-湖北体彩换球案| www.314758.com-七彩山鸡-|