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.951643.com-中原彩-| www.7797.cn-买时时彩怎么才能中| www.636058.com-彩虹六标准版多少钱| www.506206.com-8亿彩靠谱吗| www.ze13.com-彩票营销话术| www.db4.com-中彩网靠谱吗| www.710797.com-如何刷彩-| www.950681.com-彩票开奖器傲然| www.it25.com-足彩310视频直播| www.006780.com-七星彩开奖号码直播| www.073739.com-qq怎么购买彩票| www.700412.com-网上在哪儿买彩票| www.3018.cn-方正彩云-| www.139739.com-新盈彩提现-| www.756271.com-中彩游戏-| www.269877.com-彩九app苹果版| www.356469.com-消费送彩票活动| www.539464.com-体育彩票转让费多少| www.784721.com-乐迎彩票app下载| www.971040.com-一种彩票选号技巧| www.o18.com-玩彩网app-| www.646937.com-网易十四场足彩预测| www.861881.com-七乐彩红球定胆| 日彩网www.rcw8855.com| www.35536.com-盛世彩票ss555| www.220241.com-网上买彩票网站| www.657160.com-彩票2元网-| www.770367.com-海南湛江七星彩| www.865585.cc-3d福彩推荐-| www.6959.me-679彩票官网下载| www.00kx.cc-彩虹的人生励志句子| www.410.biz-时时彩7码推波方案| www.174022.com-快三网上平台网站| www.02158.cc-彩经网官方网站| www.638080.com-色彩搭配技巧| www.27432.com-杨震足彩310| www.78515.com-南方双彩下载安装| www.049986.com-最新福彩开奖| www.851.org-铁公鸡彩票下载| www.6491.net-彩票界神话-| www.383017.com-易彩输了几十万| www.167059.com-中国福彩官方app| www.462968.com-七星彩专家预则| www.611505.com-彩虹六号围攻表情包| www.755839.com-彩6精华版苹果| www.871323.com-彩71是正规彩票吗| www.969229.com-中神彩下载-| www.hp03.com-竞彩足球任九玩法| www.15gi.com-618彩票快三| www.5433.xyz-阿彩凤凰错替嫁弃妃| www.33753.com-乐迷体彩-| www.627739.com-彩坛论坛网-| www.714288.com-竞猜足彩开奖| www.805089.com-河内5分彩是真的吗| www.890554.com-中彩网统计图表| www.961881.com-福彩3d一新彩网| 吉利彩票www.80065l.com| www.ku58.com-上海快三销售时间| www.15sw.com-淄博福利彩票店转让| www.0395.xyz-玩彩网客户端下载| www.8095.org-腾讯1分彩计划| www.97898.com-彩票性缘第二书包| www.14ua.com-彩宝款式图片大全| www.9mh.cc-七星彩单票图片| www.6528.biz-3分彩怎么玩| www.31yv.com-博友彩网址-| www.509328.com-39彩票怎么样| www.096417.com-天天彩票购彩大厅| www.809518.com-河南快彩福彩一定牛| www.954335.com-中国彩票走势图| www.08ky.com-河北福彩首页| www.0353.cn-福彩3d跨如何算| www.625792.com-彩票3d能赚钱吗| www.829342.com-新乐彩彩票-| www.981434.com-彩票返点是什么| www.08970.com-河南福利彩票公众号| www.881203.com-日彩网平台-| www.958216.com-福彩开什么号| 全民汇彩票www.52303a.com| www.128917.com-彩民在线双色球| www.468383.com-福彩刮刮乐中奖| www.601016.com-杭州体彩兑奖时间| www.700412.com-网上在哪儿买彩票| www.787929.com-体彩排列5一等奖| www.867720.com-多赢广西快三全能| www.937260.com-足球彩票分析推荐| www.984487.com-广西福彩中心地址| www.556508.com-cc网站彩票-| www.2628.vip-360彩票倍投器| www.677393.com-今晚足彩怎么买| www.910062.com-胜利彩票-| 新盈彩www.xinyc8.com| www.36677.com-澳门彩票有限公司网| www.855029.com-速彩网黑平台| www.333420.com-体育彩票数字组合| www.949703.com-福利彩票小助手下载| www.cp742.com-广西快三开奖记录| www.239191.com-大发快三有人控制么| www.224691.com-下载五分彩-| www.853498.com-海南体育彩票电话| www.701067.com-如彩纺织工艺品企业| www.833322.com-时时彩专业版破解版| www.961359.com-彩票五行八卦取数法| www.lm75.com-福彩3d中彩网北斗| www.372028.com-彩票讯息时时彩计划| www.501838.com-七乐彩中5个号有奖| www.567399.com-南京体彩店转让| www.631775.com-七彩阳光小视频| www.694336.com-彩票店只卖3d| www.764380.com-七星彩一夜谈板| www.862536.com-澳客网彩票预测专家| www.913393.com-好彩客提款提不了| www.964516.com-福利彩票幸运快三| 大赢家彩票网www.210255.com| www.fw59.com-乐彩vip官网| www.37495.com-购彩是什么-| www.578817.com-彩票投注站装修设计| www.5654.vip-大马彩4d-| www.988238.com-掌中彩在线-| www.wj15.com-七乐彩最新开奖信息| www.jz1.com-网站彩票骗局大揭密| www.66693.cc-丨中国彩吧-| www.052738.com-足彩及时比分500| www.134592.com-美国好彩香烟图片| www.340991.com-体彩牛材网采摘网| www.1410.tv-卡通动物彩铅画图片| www.868634.com-彩乐购官网-| www.932532.com-中彩网彩民论坛| www.978168.com-众购彩票zg520| www.cai4600.com河南快三预测一定牛| www.308558.com-四川竞彩快三查询| www.535998.com-彩票游戏不提现| www.912708.com-六壬与奇门测彩| 汇丰彩票www.977hf.com| www.3506.cc-彩票系统维护会怎样| www.72ix.com-足彩胜负14场复式| www.901906.com-公益彩票网官方端口| www.982604.com-各省彩票中大奖情况| www.jm13.com-玩私彩犯法吗| www.78bb.com-博彩和体彩区别| www.1879.wang-中彩网app邀请码| www.295062.com-彩票中心手机客户端| www.842975.com-是体彩好还是福彩好| www.960.live-七星彩中一个多少钱| www.999563.com-三的试机号今天福彩| www.557742.com-彩票一龙双凤图| www.947977.com-众彩网怎么进不去| www.995205.com-足彩怎么看胜负平| www.cd42.com-玩黑彩有赢了的吗| www.026884.com-十三国际彩票| www.325078.com-彩票吧下载-| www.7530.vip-彩票吧台装修效果图| www.60546.com-哪里可以下爱彩乐| www.127806.com-彩虹岛270回归套| www.236.live-福彩网站大全买| www.602643.com-上海彩票开奖号码| www.63995.com-足彩坑钱-| www.112319.com-天津快三官网| www.755269.com-河南幸运彩手机网址| www.431456.com-足彩凯利值怎么算| www.970824.com-高频彩漏洞吧| 博友彩www.447478.com| www.24296.com-宝赢软件彩票| www.946939.com-彩色沥青道路混凝土|