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.150944.com-乐彩走势图-| www.280556.com-彩票网模拟投注| www.358822.com-新浪体彩下载软件| www.448602.com-竞彩公众号排行| www.532375.com-彩票公式计算软件| www.92ev.com-必发彩票线路导航| www.ip40.com-彩乐乐走势图大全| www.d49.org-南国特区七星彩论坛| www.311266.com-惠民彩票可信吗| www.244741.com-大神玩彩心得| www.392910.com-延吉有福彩中心吗| www.353322.com-凤凰娱乐彩-| www.878544.com-赛车彩票-| www.505951.com-盛彩软件-| www.624848.com-苏宁彩票啊苏宁旗下| www.698215.com-福彩专用报纸| www.792731.com-彩票领奖要多久| www.444078.com-顺盈彩票苹果版| www.199371.com-二分快三同号计划| www.280556.com-彩票网模拟投注| www.359234.com-福彩兑奖期限是多久| www.002425.com-苏州体育彩票店转| www.626009.com-彩票猜单双的技巧| www.751244.com-彩票巴巴苹果版下载| www.868318.com-亿彩有多少人亏钱| www.961120.com-分分彩推测-| www.et17.com-中国人人快三网官网| www.xw90.cc-赠送好友彩票| www.23qp.com-快三电视走势图| www.wn70.com-彩票看走势软件| www.v31.biz-能买时时彩的软件| www.77bh.com-御彩轩彩票计划| www.002376.com-专业玩彩3d彩票群| www.99611.cc-河内五分彩开奖历史| www.2369.net-快三稳赚不赔视| www.114430.com-大发彩票官方网站| www.078256.com-香港中彩网开奖结果| www.356820.com-3个号码的彩票| www.474705.cc-腾讯分分彩万能大底| www.9912.top-瑞彩祥云开挂软件| www.006489.com-冀彩宝站主平台注册| www.085720.com-时时彩五星直选一注| www.97ub.cc-百彩票-| www.350796.com-彩晶膜多少钱| www.573267.com-饰彩饰的意思| www.701238.com-盈盈彩票app| www.838460.com-q彩客户端下载| www.964064.com-极速六个彩开奖结果| www.8cs.com-刮彩票的技巧规律| www.15177.cc-温州体育彩票注册| www.552594.com-速彩娱乐骗局| www.656478.com-彩神帝安卓版| www.5822.space-微信小程序体育彩票| www.161199.com-大发彩票注册| www.039837.com-联众聚宝彩票| www.013488.com-南国论坛七星彩| www.53lf.com-幸运彩票网址| www.7056.vip-彩票310什么意思| www.046000.com-彩81下载苹果| www.75239.cc-福彩猪年刮刮卡| www.093025.com-官方彩种有哪些调整| www.456642.com-婚恋时时彩诈骗破案| www.dk9.com-分分时时彩是骗局吗| www.627608.com-彩训pc-| www.088649.com-天天彩开奖-| www.600627.com-谁玩彩票-| www.776982.com-官方指定购彩平台| www.949972.com-22彩票投注平台| www.id63.com-下载3d购彩平台| www.808178.com-足球竞彩官方下载| www.93nc.com-希腊当地的彩票| www.pb64.com-福彩香港和图| www.679354.com-v8彩安卓版-| www.769965.com-好彩是赌博吗| www.86781.com-竞彩猫怎么不播了| www.787830.com-胜负彩19055| www.912952.com-体彩三地-| www.71ui.com-944cc天天好彩| www.96159.com-南阳南召结婚彩礼| www.8320.vip-抚州彩-| www.59883.cc-彩吧乐彩吧论坛首页| www.jn3.com-广西福彩官网| www.01nc.com-mv羽泉彩虹吉他谱| www.533672.com-有完没完彩票哪去了| www.606766.com-世界杯彩票竞猜软件| www.672631.com-福彩3d开奘时间| www.738381.com-快三大数据预测| www.800956.com-60彩票下载-| www.869664.com-彩票开奖app下载| www.932300.com-七星彩三字定怎么打| www.979785.com-最安全的彩票平台| www.hh83.cc-中彩娱乐骗局| www.92dw.com-体彩河北11选3| www.r82.club-福彩字谜三字觉论坛| www.79358.com-想开个福彩和体彩店| www.792902.com-彩票机怎么显示中奖| www.891281.com-广西福彩新快3| www.63353.com-五分时时彩计划版| www.137656.com-中国体彩报下载安装| www.322586.com-彩民网下载-| www.vk19.com-易彩彩民福地骗局| www.60548.com-快三秒快餐电话新塘| www.298297.com-昨天福彩球开奖结果| www.387311.com-尼彩i9-| www.511992.com-福彩3d奖号奖金| www.614200.com-明三彩特点-| www.689206.com-下载彩名堂-| www.291690.com-中国体彩有基诺型| www.368283.com-浙江体彩超级大乐透| www.513763.com-优彩娱乐-| www.595786.com-彩票站里的3d报纸| www.665285.com-七乐彩历史走势图表| www.757888.cc-竞彩宝官网-| www.276543.com-吉林快三和值预测| www.29822.com-728彩票-| www.008632.com-福彩的所有彩种| www.39812.cc-彩开奖记录-| www.10436.com-福彩三d试机号今天| www.062981.com-网上彩票加盟| www.23032.com-福利彩票安卓版下载| www.778460.com-彩乐园下安装| www.841020.com-中国福彩在线游戏机| www.984714.com-动爻算港彩一肖法| www.301996.com-福彩八卦图速查表| www.512375.com-彩铅这样画很美| 博友彩www.866269.com| www.897691.com-多彩贵州街-| www.125766.com-众购彩票导航| www.952472.com-17彩票软件安全吗| www.218770.com-go彩下载-| www.281223.com-在线下载时时彩平台| www.662785.com-地下彩开奖-| www.511076.com-我对彩虹的了解| www.660952.com-南方彩票软件| www.225032.com-五分彩秘籍-| www.202968.com-山东福彩网-| www.465567.com-彩票刷流水单违法吗| www.568810.com-买彩票中20万| 中华彩票www.914979.com| www.me7.com-福彩七乐彩-| www.b24.net-玩什么彩票可以赚钱| www.70hu.com-旺彩社区是什么意思| www.3240.pro-阳光彩票注册地址| www.034434.com-cba博彩分析| www.7483.cm-91彩店联盟-| www.19834.com-幸运彩开奖当天| www.sm92.com-江西时时彩下载| www.73wf.com-福彩3地开奖走式图| www.6135.cc-地方彩票最新开奖| www.98719.com-江苏快三输惨的人| www.114080.com-福彩计划软件定位| www.806263.com-699彩票是骗局吗| www.856574.com-怎么买彩票技巧| www.948404.com-体彩三地开奖| www.ie.com-app快三-| www.su41.com-时时彩止盈止损经验| www.1921.vip-时时彩官网软件下载| www.374522.com-福利彩票哪种奖金高| www.555420.com-高频彩票被停| www.620956.com-彩票开彩票软件下载| www.675994.com-彩票图表应用| www.731498.com-易彩注册链接| www.108577.com-买彩票可以致富吗| www.01859.com-博彩如何对赌套利|