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.037.cm-福彩三d2元网| www.847281.com-足彩哪里买好点| www.hm.cc-中国福彩快三大小| www.393857.com-福利彩票刮刮乐下载| www.593295.com-彩虹6steam-| www.760242.com-深圳天天溢彩| www.881738.com-我要登录辉煌彩票| www.1312.me-10大彩票平台| www.858149.com-bb3d属于什么彩| www.958178.com-福彩3d开什么| 爱购彩票www.335247.com| www.304638.com-买足球彩票的app| www.055185.com-山东体彩扑克3查询| www.616234.com-福彩扑克牌玩法| www.781476.com-u9彩票官网-| www.948112.com-好彩网预测3d福彩| www.cb67.com-天天中奖彩票| www.6890.shop-足球胜负彩奖金多少| www.329885.com-信誉快三群-| www.452665.com-彩吧图一继第五版| www.5430.org-足彩胜负彩结果| www.26197.cc-倒带彩虹歌词对比| www.180512.com-北京快三预测号| www.259980.com-彩票是合法的赌博| www.349233.com-彩票2345-| www.787148.com-彩先知必中特| www.876163.com-凤凰彩票快3怎么玩| www.950167.com-互联网禁止出售彩票| 福彩网www.60007s.com| www.gj33.com-分分快三坑人| www.e45.me-湖北快三和值推荐| www.34gt.com-华龙彩票-| www.9536.net-下载好登录的彩计划| www.025697.com-福彩3d好彩网预测| www.172127.com-福彩5d没了-| www.369205.com-世界杯彩票在哪里| www.585030.com-掌上京彩下载| www.72171.com-966官方彩票下载| www.121701.com-福建福彩网快3规则| www.268629.com-掌上彩-| www.502615.com-星际彩票是否合法| www.736291.com-七色彩虹图片| www.988089.com-五百万彩票-| www.k12.shop-好彩网首页3d字谜| www.2812.me-福利彩二等奖多少钱| www.785893.com-彩票巴巴网站| www.861680.com-彩票必赢-| www.926339.com-瑞彩祥云属于黑彩吗| www.984121.com-ct彩投彩票网| www.cp9337.com-中彩啦软件可靠吗| www.ng43.com-234彩票注册平台| www.q51.org-安徽最大的彩票弃奖| www.45oh.com-中博彩票平台贴吧| www.497.me-群里买彩票是真的吗| www.4131.cm-广西福彩机选助手| www.01608.com-彩虹六号脏套路| www.49373.com-福彩3d天下无敌∏| www.88915.cc-线上买彩票源码| www.066843.com-永利博彩公司| www.141595.com-京东彩票软件下载| www.301485.com-中彩网投注是真的吗| www.266111.cc-高频彩票要调整| www.923363.com-体彩几点开售| www.026480.com-专业一分快三计划| www.395678.com-金口诀测港彩| www.717607.com-全国快三计划软件| www.956704.com-福利彩票模拟奖机| www.34894.com-福彩3d开奖结果| www.061533.com-有没有彩客彩票的托| www.598731.com-下载彩是要好版本的| www.812687.com-福彩3d绝密算法| www.f16.club-中国福彩双色球结果| www.200769.com-昨天彩票出什么| www.316714.com-快三最大的漏洞广西| www.438522.com-张家口彩票兑奖中心| www.526982.com-九龙彩票群-| www.598441.com-七乐彩32期-| www.387052.com-自制手机彩膜切割机| www.84vk.com-福彩行业工作| www.2229.pw-梦见中彩票大奖| www.19518.com-中彩网全国走势图表| www.95352.com-中国福利彩票销售点| www.367886.com-刚力彩芽男朋友| www.326.cm-中发彩票app下载| www.6646.xyz-皇帝彩票靠谱吗| www.028199.com-彩之王是不是真的| www.135337.com-河南福利快三结果| www.303597.com-f彩网真的吗| www.388717.com-福彩3码遗漏组六| www.356452.com-就餐送彩票违法吗| www.464828.com-新加坡福彩开奖记录| www.562828.com-重庆时时彩玩法规律| www.656474.com-乐亿彩票可以提现吗| www.803085.com-彩宝彩票软件| www.883825.com-吉林快三推荐号和值| www.959425.cc-3d彩吧图库冫| 天天彩票www.106356.com| www.tv87.com-时时彩合买骗局群| www.05of.com-儿童彩铅铅成品画| www.415.biz-cc699彩票-| www.6644.top-彩票中奖500万| www.35682.com-久久彩票安卓| www.88573.cc-彩票站打错错失大奖| www.060789.com-彩票高手追号计划| www.137535.com-093彩票平台下载| www.229865.com-鸿彩-| www.311913.com-甘肃省福彩领奖地址| www.388090.com-华彩谢茂全简介| www.505844.com-彩票事件杀人| www.4065.com-彩票77苹果系统| www.120657.com-体彩兑奖有提成吗| www.063336.com-彩票生意-| www.860076.com-大发快三全民彩票| www.953074.com-福利彩票怎么买的| www.af04.com-体彩体彩开奖号| www.vp30.com-86彩票开奖网| www.55hy.com-云南体彩网点| www.ba97.com-淘宝彩票app下载| www.971276.com-彩票投注有啥规律吗| www.5987.org-打彩票输了-| www.17390.com-昨天足彩比分结果| www.96ak.com-投投彩是什么| www.3229.cc-双色球凤彩网签到| www.671971.com-体彩19041期| www.402567.com-鑫彩国际这个软件| www.343278.com-第七感时时彩论坛| www.8212.cc-奔腾彩票是什么| www.053778.com-同城彩票倒闭了吗| www.200511.com-甘肃福彩3d-| www.374935.com-体育彩票三等奖| www.544423.com-怎么开设彩票平台| www.895133.com-天天时时彩助手| www.975467.com-时时彩如何算跨度| www.et69.com-腾讯彩票pc28| www.541438.com-彩票平台怎么做代理| www.86982.cc-彩票手机投注站下载| www.157018.com-分分彩亏钱怎么回本| www.062403.com-时时彩平台是骗局吗| www.621.live-黑彩平台制作安装| www.2338.in-福彩票快3开奖查询| www.65550.com-彩票模拟摇奖器下载| www.664789.com-这期七星彩出什么奖| www.789010.com-快乐彩胆拖对照表| www.958300.com-浙江福彩快快乐| www.ln9.com-搜索河北省快三| www.191120.com-江苏快三计算公式| www.35fq.com-体彩杯篮球赛| www.905176.com-佛山体彩店转让信息| www.948202.com-香港好彩网论坛| www.go05.com-黑马致富彩票| www.9208.org-上海彩票店利润多少| www.53956.cc-彩票平台输-| www.008312.com-下载众购彩票软件| www.090923.com-福彩3d图谜总汇三| www.164938.com-彩票新闻资讯大乐透| www.258804.com-竞彩分析推荐唯彩网| www.693149.com-今天甘肃快三推荐| www.wt32.com-快三快速查询表| www.25865.cc-巨彩-| www.940768.com-体彩怎么中奖| www.655671.com-七星彩三字定卖| www.100248.com-互联网禁止出售彩票| www.239777.cc-快三有人赢过吗| www.137516.com-易彩网主页-|