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.224301.com-快三对几个号中奖| www.369099.com-老杜说彩票今日推荐| www.497813.com-牛彩官网首页| www.580171.com-江苏快三一分开| www.666849.com-威斯汀福乐彩| www.758536.com-01vip彩票-| www.939019.com-足彩单场胜负怎么买| 爱彩www.001ac.com| www.gq43.com-好彩铁盒香烟价格| www.c43.com-今天体彩开奖号| www.44hh.com-竞彩足球预测足彩推| www.948.date-中国彩票有哪些玩法| www.15243.cc-福彩专用报纸| www.63813.cc-竞彩分析唯彩网| www.069054.com-体彩任选2-| www.147001.com-购彩网在哪里下载| www.257283.com-彩票多少钱缴税| www.338591.com-湖北彩票新闻中奖| www.430666.com-2018无锡彩礼| www.533918.com-那个彩票平台好| www.662272.com-彩乐乐网公告| www.761466.com-辽宁福彩三d走势图| www.849656.com-玩分分彩后果| www.925564.com-玩足彩用什么app| www.981281.com-1990彩票平台| www.fx12.com-福彩公益金宗旨| www.zg92.com-7乐彩专家预测新浪| www.33kg.com-快三中三不同多少钱| www.0836.org-彩视软件怎么开直播| www.7945.biz-博彩社区网-| www.31755.cc-快易彩首页-| www.78482.com-太子彩票app下载| www.035043.com-足球彩票神人| www.158031.com-北单和竞彩的区别| www.254092.com-彩客彩票苹果版本| www.332625.com-注册京彩app| www.413963.com-喝彩人的意思| www.522987.com-最新时时彩走势图| www.645368.com-七乐彩及中奖规则| www.737618.com-qq彩票竞猜金豆| www.816342.com-网络博彩被骗怎么办| www.892428.com-查询彩票最好的软件| www.966107.com-全球彩合法吗| 大赢家彩票平台www.916370.com| www.lm95.com-一号彩票登录| www.n26.site-南方双彩网电脑版| www.49py.com-彩票中心电话号码| www.988.date-2元彩-| www.8910.cc-今日竞彩比分神单| www.48530.com-竞彩哪个平台好| www.98815.cc-澳客七星彩杀号定胆| www.067673.com-博彩刷流水-| www.137648.com-海南省体彩中心| www.220593.com-k彩下载app-| www.298042.com-人人彩票网合不合法| www.374355.com-2017年七星彩| www.566340.com-宏发彩票app| www.640650.com-爱盈彩是什么平台| www.732569.com-福彩3网上投注| www.799428.com-福彩自动销售终端机| www.876787.com-甘肃快三形态走| www.cp684.com-快三注册平台| www.mk43.com-一定牛吉林快三预测| www.2xh.com-圆鸿彩票-| www.61qy.com-七星彩中奖专业户| www.0539.date-易彩彩票是什么| www.8754.cn-彩票查看双色球| www.45299.com-彩票对刷套利技术| www.91840.com-福彩3d150-| www.672025.com-牛彩网彩网牛材网| www.62lo.com-福彩开奖下载| www.262317.com-3d彩票天天开奖| www.994645.com-手机时时彩做号软件| www.rz5.cc-腾讯分分彩计划| www.qw75.com-五分快三计划网页| www.08cf.com-彩票与生活图片大全| www.78uo.com-广东天彩快三app| www.1797.cn-3d淘彩吧-| www.9826.biz-中国古建筑传统彩绘| www.54422.cc-皇轩彩票-| www.98856.cc-买彩票多会截止| www.062322.com-七天彩cc-| www.163619.com-体彩容错怎么打| www.252078.com-中彩网福彩擂台赛| www.324279.com-乐彩网中奖能提现吗| www.393007.com-万博彩票代理反点| www.548399.com-幸运8彩票-| www.627568.com-迅盈彩票提款不了| www.696867.com-体彩周六开什么彩票| www.773050.com-糖果派对中彩金视频| www.885763.com-乐8彩平台下载| www.958085.com-彩票整改-| 彩609www.c6092.com| www.bv00.com-福利彩票江苏快三3| www.su34.com-体彩玩法有哪些| www.21lm.com-久赢彩票登录网址| www.086.tv-彩39彩票计划网| www.3315.in-彩色简笔画大全| www.8619.in-湖北广电彩票怎么样| www.52927.com-好彩官方-| www.95234.cc-福彩怎样处理数据| www.054896.com-中国彩8-| www.153234.com-七乐彩奖池奖金| www.237496.com-辽宁体彩网官方网站| www.309110.com-怎么举报彩票赌博| www.375751.com-七星彩冷号表| www.516317.com-彩客彩票类似的软件| www.582939.com-色子彩票-| www.651990.com-葡京彩票是不是骗局| www.758234.com-长春溢彩-| www.841037.com-拍彩票票面-| www.904505.com-大发彩票客服电话| www.959849.com-彩票电子注册送28| 彩客吧www.11ckb.com| www.ca17.com-牛彩快3专用走势图| www.sq25.com-七乐彩荐号-| www.18st.com-今日七乐彩开奖直播| www.97ia.com-排练和彩排-| www.2673.cn-竞彩今天为什么停售| www.7857.loan-足彩14场几率| www.23596.cc-彩神1平台下载| www.65229.cc-大发分分快三计划| www.062435.com-凤凰彩票赚钱计划| www.138023.com-信彩是什么软件| www.212655.com-大的私彩平台| www.278583.com-吉首快三秒电话| www.380565.com-什么的彩云-| www.495954.com-如何看彩票图| www.562097.com-谁有私彩平台| www.623206.com-彩票如何造假| www.686501.com-500彩票人工计划| www.757119.com-湖北体彩高频| www.919902.com-制作一个彩票网站| www.974319.com-1快可提现的彩票| www.il24.com-福利彩票3d交流群| www.yd81.com-揭秘大发快三的骗局| www.14ec.com-福彩直播秀-| www.97ap.com-福彩账号怎么注销| www.2317.com-开空彩票与你同行| www.7327.cn-体彩竞彩玩法| www.16981.cc-7星彩兑奖-| www.54586.com-双色球彩票指南总汇| www.94057.com-彩色耐磨地坪厚度| www.045117.com-彩票开奖几点停售| www.182448.com-时时彩选号助手| www.244200.com-新彩票网-| www.307333.com-福利彩票快乐十分钟| www.367392.com-三彩翡翠手串| www.445955.com-七乐彩出号规律| www.526532.com-时时彩和值任二技巧| www.655491.com-8168彩票网站| www.730560.com-体彩预测专家预测| www.793411.com-中彩票后的人生| www.858030.com-8d彩票app-| www.911612.com-全民彩票网网址| www.965602.com-快三猜不出的好平台| 幸运彩票网www.33598x.com| www.cp24.com-广西快三每期多久开| www.rl75.com-百盈彩票谁知道| www.05ze.com-五彩斑斓黑的下一句| www.66iu.com-大富翁彩票网址| www.988.xyz-天下彩票开奖直播| www.6983.vip-福利彩票彩票注销| www.11807.com-9999彩票app|