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.337197.com-广西快三有假吗| www.654.live-新时时彩四走势图| www.112447.com-彩票内部计划群| www.040402.com-玩彩网登陆-| www.4uk.com-福彩真精华布衣| www.127493.com-彩宝贝网免费预测| www.682992.com-分分彩玩法技巧大全| www.881252.com-快三免费计划app| www.ik6.cc-大赢家彩票网址| www.276285.com-重庆时时彩停止发行| www.608506.com-新版南方双彩网首页| www.772116.com-篮球博彩必发指数| www.cai0411.com中国福彩快3下载| www.633060.com-篮球胜负彩票怎么看| www.72267.cc-彩票打印是什么程序| www.72067.com-彩猫彩票软件| www.131006.cc-河南驻马店彩礼| www.025167.com-彩票几位数算中奖| www.356300.com-国外彩票算法| www.cp347.com-快三代理怎么挣钱| www.2971.cc-淘宝彩票在哪买| www.793867.com-外围彩票都是假的| www.877627.com-彩票平台可以购买不| www.954829.com-今天体彩开奖结果| 彩票500万www.708609.com| www.128452.com-买彩票倍投计算公式| www.199724.com-时时彩快三软件| www.9373.cn-彩九c9con-| www.480699.com-福利彩票-百度| www.626779.com-038彩票8元彩金| www.850722.com-时时彩斗牛怎么算| www.rw70.com-中彩网在线-| www.909172.com-河北快三怎么选号| www.561902.com-二分快三开奖结果| www.755315.com-鸿运快三彩票| www.847635.com-c61彩票注册登录| www.935682.com-时时彩定胆稳赢方法| www.tw55.com-数字彩购彩-| www.984460.com-体彩大乐透摇奖时间| www.76336.cc-体育彩票一等奖| www.146455.com-彩客触屏版-| www.231078.com-易网彩票手机版| www.222062.com-王牌彩票-| www.792.win-河北福彩快三结果果| www.9242.me-亿乐彩合法吗| www.095500.com-多彩贵州网邓航简历| www.384385.com-apk状元彩票| www.8965.net-旺彩双色球应用| www.509066.com-足彩票下载-| www.667425.com-吉隆坡时时彩官网| www.ym71.com-五和彩开奖结果| www.222470.com-彩票娱乐送28元| www.420901.com-d大通彩票登录网站| www.571867.com-天天好彩游戏| www.640039.com-高压吉林快三走势图| www.951071.com-武汉休闲快三| www.uq9.com-福体彩开奖查询| www.35zq.com-七星彩近的200期| www.9135.cn-七乐彩摇一摇选号码| www.39787.cc-福利彩票中彩票软件| www.721730.com-豪彩网-| www.318561.com-图表走势贵州快三| www.826981.com-要戒了彩票吗| www.938916.com-澳澳客彩票-| www.j16.cc-糖果派对送彩金图片| www.6987.live-时时彩选号技巧| www.20nx.com-河北体彩排列五| www.9983.net-足彩预测新浪网友| www.915908.com-手机彩票加盟代理| www.764050.com-彩市神童双色球专栏| www.018632.com-福彩3d谜总汇| www.655969.com-下载博友彩票| www.sf85.com-幸运分分彩精准计划| www.92396.com-竞彩足球投资技巧| www.104081.com-好彩爆珠有什么味道| www.219043.com-百姓彩票网介绍| www.332631.com-彩票热购个人中心| www.416663.com-旋风彩虹机视频| www.535886.com-最大的彩票中奖者| www.967178.com-足彩兑奖时间限制| www.mt6.cc-内蒙古快三早知道| www.vo87.com-江苏快三电脑走势图| www.09vr.com-银河彩票投注网站| www.41tw.com-491彩票与你同行| www.965654.com-51彩票软件-| www.171519.com-7星彩预测-| www.x53.me-快钱彩票白菜群| www.641822.com-今晚福彩图片大全| www.020661.com-体彩七星彩中奖查询| www.753551.com-彩票自动挂机手机版| www.899112.com-胜负彩星号什么意思| www.987194.com-购彩堂app官网| www.47uo.com-彩票平投怎么赚钱| www.544405.com-没有买过彩票怎么买| www.189647.com-快三河南走势回| www.193115.com-河南快三质合走势图| www.312795.com-江苏快三开大小技巧| www.367908.com-刚力彩芽新剧| www.7ye.com-彩票中奖离婚事件| www.202445.com-福彩网怎么下载| www.632369.com-时时彩诀窍后一| www.741717.com-南京彩旗快三走势图| www.822665.com-竞彩源码-| www.884980.com-体彩个人申请| www.983404.com-彩票计划员骗局| www.cp3978.com-快三外挂-| www.yb53.com-天津福彩中心官网| www.222.pw-百度一下乐彩彩票| www.267381.com-500万彩票网分析| www.743.tv-彩神x娱乐-| www.1357.org-88彩票是赌博吗| www.98ss.com-盛彩官网-| www.553656.com-成都竞彩-| www.616608.com-深圳彩票黑客案判了| www.464665.com-长沙中彩集团| www.566456.com-河南福彩好运四| www.623751.com-春秋彩票苹果手机版| www.692136.com-高频彩计划客户端| www.ht98.com-彩票走势图彩宝网| www.686701.com-132彩票注册| www.975291.com-时时彩宝典官方下载| www.627125.com-体育彩票周几开| www.718519.com-彩虹是什么呀| www.942931.com-生肖彩开奖必中| www.9808.space-南京市体彩中心| www.62629.com-体彩排5开奖结| www.096321.com-老猫彩票快讯| www.046278.com-中国福利彩票店流程| www.11194.com-19030胜负彩票| www.35fo.com-腾讯分分彩规律大全| www.0240.in-今天东盛彩报| www.770913.com-上海彩虹冰淇淋机| www.887878.com-106彩票投注网站| www.967986.com-加qq客服玩彩票| www.cai3908.com甘肃快三走势图| www.ns21.com-福彩快3福建计划| www.18qz.com-杨光华足彩-| www.98vi.com-澳门顶级博彩| www.4484.org-体彩足球胜负彩| www.9739.biz-默彩七星彩-| www.553071.com-彩票源码百度云盘| www.72sa.com-体育彩票是怎么玩的| www.867682.com-海南七星彩最新图规| www.787567.com-竞彩篮球怎么买| www.793636.com-计算彩票-| www.886419.com-90彩票哪个公司| www.960855.com-快三全天一期计划| 红旗彩票www.895594.com| www.jz48.com-新浪彩票下载| www.690361.com-彩票注册送58元| www.781663.com-体彩大乐透开奖结杲| www.864857.com-彩票大江网| www.911223.com-k彩娱乐线路测速| www.967134.com-彩票开奖3d和值表| 七彩www.53900p.com| www.302614.com-排列三和尾南方双彩| www.633116.com-网络打彩票什么意思| www.ak5.com-河南快三预测推荐| www.mr16.com-吉林快三跨度图| www.6zj.cc-宁波年会彩票中奖| www.61ts.com-台湾福彩星-| www.0304.me-彩票能伪造吗| www.960126.com-彩票注册送| www.221618.com-上海快三规律技巧|