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.gc60.com-快三助赢软件手机版| www.07pr.com-上期福彩号码多少| www.95mq.com-星际彩票平台多久了| www.3768.xyz-七星彩测号-| www.15001.com-全民彩票代玩| www.71131.cc-福彩视频直播| www.126559.com-章国新体彩-| www.207055.com-至尊快三开奖结果| www.285030.com-快彩中奖助手漏洞号| www.400353.com-体彩大乐透历史记录| www.533041.com-体彩数字彩-| www.620590.com-竞彩足球必发指数网| www.696785.com-下载竞彩网-| www.777294.com-彩八仙官网苹果版本| www.885410.com-彩票投注大厅平台| www.968354.com-胜负彩开奖查询| 99彩票www.998349.com| www.le82.com-河北福彩中心官网| www.n46.com-新浪足彩必发指数| www.46in.com-买体彩用什么软件好| www.827.cm-中国彩吧首页天齐网| www.5278.site-今天赛马派彩和结果| www.09359.com-好彩一容易中吗| www.54963.com-时时彩心得-| www.000688.com-多彩网手机版下载| www.071816.com-人人天天彩票| www.140303.com-久久彩票进不去| www.223048.com-福彩助手官方下载| www.300652.com-人人中彩票打不开| www.376782.com-七星彩超长规律图规| www.598161.com-分分时时彩一码技巧| www.672502.com-排列三和值彩宝网| www.751463.com-2020网络彩票| www.823703.com-今天3d福彩双采图| www.895511.com-网投彩票能赚钱吗| www.963846.com-彩库宝典1.0.0| 500彩票www.500190.com| www.ic02.com-天津快三和值走势图| www.xr89.com-福利彩票35期预测| www.18un.com-福彩3d怎么摇的| www.4427.cn-爱彩乐网页版登录| www.9902.cm-国家为什么控制竞彩| www.59619.cc-老版彩库宝典| www.019367.com-山西体彩中心| www.091022.com-众彩安装-| www.157957.com-19046期足彩| www.262378.com-快三中奖号-| www.350990.com-团彩网官网-| www.431274.com-选6型彩票缩水软件| www.526275.com-721cc赢彩猛科| www.637467.com-竞彩店有名额限制么| www.734832.com-新浪竞技足彩比分| www.797470.com-浩博彩票平台| www.871247.com-天天赢彩票app| www.977751.com-彩色压模混凝土施工| www.lp68.com-中彩了app下载| www.34fd.com-淘彩票账号怎么注册| www.4815.cn-彩讯pc28开奖| www.33714.com-乐橙买足彩-| www.020264.com-红彩网-| www.138161.com-中继彩票app| www.267211.com-福彩3d可信吗| www.530014.com-彩头是什么-| www.683822.com-乐八彩app-| www.801966.com-彩吧彩票购彩平台| www.876801.com-福利彩票快三秘诀| www.972923.com-彩虹玫瑰怎么做| www.cai3377.com吉林快三是什么意思| www.kw08.com-网易新快三在哪里买| www.e56.wang-时时彩程序出租| www.32qc.com-长沙福利彩票官网| www.0490.me-360导航彩票| www.6686.biz-彩神争霸邀请码多少| www.17151.com-彩票通下载-| www.59466.com-推荐的彩票网站大全| www.028646.com-福彩3d彩彩报| www.103734.com-乐彩国际是诈骗吗| www.166572.com-快三助手破解版| www.269106.com-长城彩票购彩大厅| www.352236.com-举报网络彩票有用吗| www.454516.com-聚鑫乐彩是骗人的吗| www.565784.com-彩票中的龙虎是什么| www.639070.com-体育彩票设备| www.759643.com-彩票快餐怎么玩| www.839596.com-竞彩米来了-| www.900977.com-今日福彩3d老汉图| www.963954.com-梦见彩虹是什么意思| 七彩www.53900d.com| www.eg15.com-福彩快三遗漏号| www.ud06.com-123彩票官方网站| www.20.me-为什么有那么多私彩| www.62ti.com-牛彩3d布衣天下图| www.0153.cn-彩色包括黑白吗| www.8896.in-足球竞彩可靠吗| www.38491.com-找个买彩网站| www.78913.cc-最新的彩票书籍| www.024473.com-江西福彩玩法介绍| www.090076.com-彩票玩家去哪里找| www.147235.com-时时彩4星平刷大底| www.318583.com-13彩软件骗局揭秘| www.381762.com-肥城体彩大奖3亿| www.506279.com-彩票ddcc-| www.568318.com-中国福利彩票3开奖| www.630992.com-体彩飞鱼有什么规律| www.692565.com-泰国彩票怎么兑奖| www.765597.com-22彩票安全吗| www.877627.com-彩票平台可以购买不| www.961941.com-三彩家租房-| 亚投彩票www.ya018.com| www.ak40.com-鸿彩快三app| www.pr13.com-天天签到3元彩票| www.01qc.com-彩虹颜色的排列顺序| www.65ji.com-山西福彩官网首页| www.985.biz-体彩排列三五试机号| www.7111.biz-电玩8彩票网站| www.16382.cc-台湾大福彩开奖| www.55547.com-买福彩快三-| www.003395.com-彩票能玩吗-| www.060700.com-彩客网怎么了| www.173520.com-福利彩票快三怎么玩| www.249996.com-网络售彩处罚| www.311523.com-福彩3d知识-| www.369241.com-福彩贪污1360亿| www.448737.com-长沙市福彩网| www.529055.com-溢彩是什么意思| www.640051.com-22彩网-| www.714178.com-彩神1是真的吗| www.778389.com-5分快三官网| www.866518.com-快三高手下注| www.920852.com-优乐彩手机版下载| www.971984.com-湖北体彩案-| www.cm29.com-彩报中心彩报图库| www.rm18.com-彩票反水啥意思| www.6ys.cc-靠彩票发家-| www.51ob.com-首页新彩票走势图| www.347.date-最新七星彩开奖结果| www.3212.org-搏123彩票网站| www.7877.com-快三平台庄家挣什么| www.19838.com-87彩店加盟费多少| www.55275.cc-快3彩票分析软件| www.89818.com-海南七星彩预测直码| www.033592.com-彩站宝投注站| www.184433.com-彩票频道-| www.241382.com-彩库宝典官方下载| www.309306.com-马来西亚乐和彩下载| www.365754.cc-彩铅画花卉绘画教程| www.439669.com-体彩2元网大全| www.520532.com-金沙彩票下载| www.578174.com-乐彩平台注册网址| www.657815.com-在线预测快三| www.809279.com-彩票怎么那么难中| www.872995.com-彩之星江苏快3主页| www.951123.com-京彩-| www.990423.com-下载彩票软件可靠吗| www.cai0322.com快3彩票下载| www.hc53.com-彩运8是个什么平台| www.vf59.com-体彩十一选五江苏| www.8wm.cc-体育彩票6加1查询| www.53ab.com-买彩票花了多少钱了| www.415.in-有就快的彩票网站吗| www.2985.biz-彩票app开发晓风| www.7432.pw-上海体彩站转让信息| www.18227.cc-265彩票网站| www.53756.com-体彩店怎么赚钱|