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天

知道了
亚洲28 www.029104.com-体彩屋购票大厅| www.485753.com-篮球彩票大小分盘路| www.637077.com-腾讯分分彩做号| www.712316.com-e彩票客户端| www.804849.com-自创彩票加减法| www.901041.com-东北彩礼-| www.ga19.com-天天中彩票网络骗局| www.005388.com-彩票分析师骗局案例| www.6733.cm-足彩4月胜负彩| www.971411.com-高频彩票设计原理| www.gx36.com-老猫今天出彩3d| www.7ch.cc-和彩云收费吗| www.0717.cn-二手福彩机器多少钱| www.9651.in-百度彩票是真的吗| www.85895.cc-安徽体彩大乐透开奖| www.954234.com-三地彩票-| 大赢家彩票网www.54400e.com| www.061013.com-快乐彩技巧稳赚| www.223311.cc-500彩票电脑版| www.72bm.com-梦见买的彩票没中奖| www.580655.com-彩票害了多少人| www.654046.com-福彩12选五中奖号| www.717888.cc-彩票投注技巧视频| www.794927.com-苏州竞彩店一览表| www.865139.com-500万彩票首页| www.924178.com-掌优彩票靠谱不| www.976553.com-七乐彩中奖4个号| www.cp9892.com-湖福彩快三走势图| www.nk81.com-nba竞彩-| www.22eh.com-体彩跨市兑奖| www.01800.cc-彩虹六号急停| www.89487.com-发大财彩票娱乐平台| www.623609.com-雅迪米彩二代60v| www.89kb.com-足彩通红球球app| www.595360.com-双彩网是做什么的| www.675409.com-七乐彩好中奖吗| www.769018.com-118彩库图王中王| www.891766.com-e家彩票计划官方| www.cp8337.com-中福彩票一分钟一开| www.709066.com-体育彩票软件有哪些| www.101620.com-安徽快三中奖明细| www.cp3.cn-彩票快三技巧| www.061717.com-排三乐彩网走势图| www.063336.com-彩票生意-| www.14dj.com-体彩杀号定胆天气网| www.8304.org-福利彩票时间| www.3282.cn-万达彩票网站| www.612561.com-幸福彩大乐透推荐号| www.203111.cc-湖北省福利彩票官网| www.326980.com-买彩票什么叫屠龙| www.710555.com-中国人福利彩票网| www.cp9193.com-近三十期快三中奖号| www.435093.com-南宁福彩自助投注机| www.27669.cc-七乐彩走图-| www.030041.com-中国彩票有真实性吗| www.805789.com-福彩刮刮乐新票上市| www.nu68.com-福彩快3手机下载| www.85ws.com-西安彩票一等奖| www.6740.in-彩票做假为何不查| www.24734.com-出售送彩金彩票平台| www.96043.com-彩票谁管-| www.214458.com-人人彩票网靠谱吗| www.87429.com-穷人买彩票-| www.9938.loan-江苏体彩排列3预测| www.xm70.com-体彩计划软件下载| www.oj76.com-彩界皇后独胆| www.251212.com-彩八下载地址| www.827255.com-微信小站宝彩票| www.973049.com-彩虹世界app链接| www.js61.com-彩神x下载网址| www.812863.com-手机彩铃怎么设置| www.467700.com-七乐彩网络购买| www.3si.cc-登陆艾彩-| www.003729.com-手机里福彩端| www.363432.com-双彩虹的寓意| www.180331.com-大发快三正规吗| www.022715.com-山东体育彩票app| www.10557.com-湖北快三高频彩票网| www.560581.com-kk彩票网怎么样| www.954196.com-皇都彩票下载安装| www.7618.xyz-爱彩人ios-| www.629707.com-红彩会官方网下载| www.65566.com-中国彩吧44462| www.861877.com-qq彩票体验版| www.cp7633.com-七星彩玩法-| www.3282.cn-万达彩票网站| www.161164.com-真龙彩票中奖查询| www.228341.com-河南省彩票-| www.004652.com-竞彩可以胆拖出票吗| www.505729.com-福彩新版公益诗| www.974327.com-北京福彩双色球规则| www.bm37.com-牛票票彩票-| www.04ot.com-竟彩比分直播澳克网| www.665144.com-7乐彩历史开奖结果| www.773974.com-九宫图算彩票| www.915298.com-彩票挂机能搞到钱吗| www.oj90.com-内蒙古快三选号口诀| www.13wv.com-彩票一等奖中奖规则| www.088243.com-三分时时彩d9彩票| www.u56.club-夭下彩票资料大全| www.92ne.com-竞彩计划-| www.96102.com-彩票发行费管理办法| www.708857.com-网上彩票停售原因| www.29491.com-广东福利彩app| www.91110.com-福彩3d全图总汇八| www.443088.com-网易彩票认账吗| www.058849.com-彩99安卓下载安装| www.702738.com-竞彩app是骗局吗| www.780996.com-彩票青蛙彩导航| www.875595.com-恒大时时彩是真的吗| www.940056.com-速彩网-| www.982493.com-吉林快三怎么打胆拖| www.cp3518.com-广西快三中奖助手| www.iq08.com-网易快三是骗局揭秘| www.782640.com-易购彩票平台可靠吗| www.887235.com-快乐彩怎么玩才赚钱| www.972001.com-时时彩免费全套源码| 亿龍彩票www.1368n.cc| www.9077.loan-重庆寸时彩遗漏查询| www.237409.com-内蒙快三了爱乐彩| www.996692.com-七星彩摇一摇选号| www.cp6856.com-北京快三遗漏号数据| www.22775.com-快三大赢家是赌博吗| www.956166.com-速盈彩下载-| www.4164.biz-七彩云商-| www.25991.cc-彩虹简笔画图片| www.83078.com-手机体彩软件| www.34915.com-福彩3d幸运码推送| www.75717.com-新手足彩入门手册| www.030938.com-永乐娱乐彩票| www.110007.com-买彩票3d的方法| www.165827.com-福利彩票上班好吗| www.875977.com-香港5分彩官方网| www.7527.cn-最豪华体育彩票店| www.97668.cc-完美彩票平台| www.078051.com-众盈彩票真能挣钱吗| www.147307.com-彩票163-| www.78201.com-五分钟快彩-| www.168944.com-3d走势乐彩网| www.507890.com-中装九彩官网| www.585105.com-500彩注册登录| www.655687.com-彩富网址-| www.722448.com-网络快三怎么骗人| www.788674.com-湖北彩票预测网| www.873702.com-35彩票官方网站| www.297522.com-彩票网络购买app| www.352884.com-福彩派奖-| www.399907.com-彩票烂了一点能用| www.482381.com-福彩抓管理-| www.539387.com-彩霸王四肖选一肖| www.51oz.com-彩旗是谁-| www.040130.com-华夏彩票登录地址| www.908528.com-仿彩票网站-| www.wl27.com-幸运分分彩票下载| www.310533.com-体彩排三山东论坛| www.653253.com-热彩娱乐是真的吗| www.192766.com-彩票选号绝妙方法| www.573208.com-彩雨是什么意思| www.690149.com-网易足彩预测| www.46085.com-时时彩开奖宝典下载| www.580048.com-香港福彩开奖记录| www.367644.com-乃木坂筒井彩芽| www.i62.bid-彩乐网福中网资料| www.242766.com-福彩在线app|