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.688563.com-网易湖北快三| www.614626.com-3d中网彩-| www.777390.com-江西快三购买技巧| www.884830.com-高频彩票经验| www.962971.com-5oo万体彩-| www.5975.com-福彩双色球30期| www.396321.com-博友彩网站-| www.489244.com-彩运网登录网址| www.619674.com-凤凰彩票活动中心| www.748302.com-彩虹e台在线观看| www.838384.com-重庆时时彩傻瓜打法| www.922322.cc-骗婚彩礼钱退还| www.983033.com-怎样用手机购买彩票| www.vw6.com-七星彩今晚预测号码| www.yo23.com-三彩怎么样-| www.33ot.com-足球竞彩88-| www.56697.cc-心赢彩票-| www.6583.biz-038彩票8元彩金| www.37968.com-app111彩票-| www.070303.com-现在网上怎么买彩票| www.165123.com-掌中彩跑马群| www.854478.com-重庆时时彩高手方法| www.995423.com-新浪网彩票首页官网| www.zg57.com-9购彩票官网| www.139.link-彩虹屁模板夸朋友| www.05ng.com-国产水溶彩铅哪种好| www.328.me-中发彩票是黑平台| www.318473.com-彩票开奖规则查询| www.420984.com-爱乐透体彩选号方式| www.482509.com-买彩票选号分析| www.w99.tv-买重庆时时彩的平台| www.67kr.com-七乐彩复式机选一注| www.788763.com-高返彩票网站| www.51353.com-时时彩后三胆码计算| www.171451.com-彩票的谜语-| www.01082.com-高频彩提前开奖| www.1816.cc-彩3彩计划软件| www.18871.cc-988彩票app-| www.ef74.com-58彩票下载安装| www.f99.net-彩票统计器-| www.710834.com-刷福彩是什么意思| www.799913.com-101彩票下载安装| www.887674.com-十大可靠彩票平台| www.960943.com-彩票平台哪个返点高| www.c7.me-60123好彩网站| www.660424.com-分分彩官网怎么下载| www.794160.com-哪种彩更多人玩| www.948439.com-体育彩票竞彩足球| www.ii94.com-福彩网平台软件| www.116676.com-福彩彩吧首页| www.59294.com-福彩站背景墙| www.092079.com-体彩7刮刮乐中奖图| www.345127.com-彩运快三专区| www.8336.cm-七乐彩复试中奖查询| www.564438.com-时时彩技巧后一稳赢| www.670074.com-彩票多少个号| www.799505.com-开发一个彩票app| www.913388.com-彩客网即使比分| 彩82www.128083.com| www.bq02.com-七乐彩几个号才中奖| www.271153.com-赢彩赢彩彩票官方版| www.381190.com-今日七乐彩开奖直播| www.1601.org-赌博金沙送38彩金| www.68788.com-凤凰彩票有几个数字| www.899166.com-公用彩票数据接口| www.244259.com-竞彩完场比分| www.085455.com-彩票联盟手机红包| www.193511.cc-大发快三开奖规律| www.461629.com-长江快三平台太黑| www.555213.com-华彩控股的十大股东| www.619635.com-彩票技巧讲解视频| www.438991.com-长沙福彩兑奖地址| www.626683.com-七天彩邀请码| www.739745.com-诸葛智彩-| www.yu12.com-体彩陕西11选5| www.76ft.com-澳洲5分彩官方开奖| www.00gb.com-什么快三提前开奖| www.71qz.com-恒彩88地址-| www.1003.cn-11选五爱彩乐| www.806297.com-好彩双爆珠香烟价格| www.913732.com-万彩平台提现不了| www.982470.com-多少岁可以买彩票| www.fa74.com-北京体彩网官方网站| www.21lo.com-体彩开业条幅| www.0397.cc-足彩购买平台| www.12133.cc-体彩大乐透app| www.157815.com-80彩票官网-| www.aj.cc-湖北快三出号走势图| www.964820.com-实时彩怎么玩| www.sl7.com-重庆时时彩骗局| www.ri67.com-一分快三是哪个软件| www.699653.com-五分时时彩万位计划| www.974189.com-体彩包括哪些种类| www.183278.com-吉林市快三-| www.46fz.com-易购彩票是黑彩嘛| www.0875.loan-彩金回馈网址| www.376291.com-福彩3d焰午字迷| www.486.tv-奖多多安全购彩页面| www.5737.wang-失控的黑彩刘雪龙| www.18181.com-福彩中心开机号胆码| www.123540.com-江西快三怎么玩稳赚| www.194648.com-福彩好运2-| www.280000.com-43彩票-| www.361444.com-亿元大奖彩票图片| www.443059.com-网易彩票能赚钱吗| www.524646.com-大乐透幸运彩乐乐| www.372585.com-i8彩票网站-| www.499473.com-五八彩票下载| www.561858.com-赌彩票能发才吗| www.318182.com-新版彩计划-| www.388971.com-趣彩彩票注册| www.500133.cc-支付宝购物送彩| www.559646.com-陇彩宝-| www.631422.com-湖北快三彩票下截| www.700885.com-体彩实体店-| www.771774.com-腾龙时时彩计划软件| www.830858.com-黄鹤楼蓝迷彩烟价格| www.886760.com-正规官方彩票购彩网| www.949609.com-快彩怎么样-| www.987640.com-小米彩票官网地址| www.ej6.com-彩牛网天下彩票| www.mc72.com-广东福彩快乐十分| www.zr58.com-双色球彩票规则| www.19fc.cc-网上彩票投注靠谱么| www.096.link-淘金彩票是干什么| www.2880.win-快三彩票内蒙| www.948242.com-体彩的意义-| www.999521.com-玩快三会被抓吗| www.am51.com-浙江福彩12选5| www.oe93.com-中国福利彩票怎么样| www.687062.com-8号彩票是黑平台吗| www.777231.com-七星彩规律软件下载| www.867417.com-快三助赢计划手机版| www.926435.com-多玩娱乐彩票| www.983370.com-天音,福彩,基诺| www.cp801.com-快三哪些省不买了| www.qe02.com-福彩快3官方| www.4427.vip-拉萨福利彩票快三| www.10255.com-彩票77app安卓| www.48138.cc-手机上能买福彩吗| www.96939.cc-湖北体育彩票网站| www.499972.com-五分钟快三有几种| www.562765.com-黑客修改私彩数据库| www.623813.com-胜负彩下载-| www.681105.com-搜索天天中彩| www.742223.com-8亿彩是正规的吗| www.798766.com-精彩大片-| www.861029.com-体彩任选三结果| www.905444.com-e球彩守号技巧| www.954660.com-下载彩票77-| www.996748.com-黑龙江体彩开奖| www.c5.com-今天内蒙古快三开奖| www.003279.com-大盛娱乐彩票| www.068065.com-写个彩票软件多少钱| www.566933.com-好彩堂特马论坛| www.49lg.com-重庆时时彩遗漏数据| www.57wm.com-契诃夫彩票人物分析| www.771204.com-彩虹emoji复制| www.zk20.com-河南福彩幸运彩开奖| www.pc6.com-江西福彩网-| www.751503.com-彩票烂了能兑奖| www.56cp.cc-陕西彩票中奖查询| www.2266.org-海口彩票网论坛| www.9270.me-彩票书哪个最好用|