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天

知道了
彩39彩票安卓 www.247922.com-福彩3d开到几期| www.839275.com-足彩预测网易| www.55vl.com-招行开工利是抽彩票| www.9489.win-环球彩票平台客服| www.505193.com-彩票3d试机号口诀| www.646866.com-足彩14转9算法| www.772307.com-网络彩票大平台| www.zp1.cc-河北快三遺漏| www.006200.com-体彩专家推荐排列三| www.946721.com-如何处理问题彩民| www.nf88.cc-甘肃快三计划| www.709407.com-广州体彩大乐透领奖| www.199010.com-新手如何买体育彩票| www.385912.com-精彩音乐汇2015| www.559706.com-首页彩票-| www.693251.com-辽宁福彩网投注指令| www.807345.com-那个网站可以买彩票| www.949493.com-网赚彩票-| www.04cg.com-福利彩票直选怎么玩| www.32182.cc-k彩平台是坑钱的么| www.824029.com-体彩排列三缩水软件| www.930517.com-马来分分彩官方开奖| 彩民网www.caim3.com| www.le60.com-冀彩宝下载-| www.664652.com-下载体彩排列五软件| www.132807.com-江苏快三几点封盘| www.233799.com-快三登录平台| www.6855.net-我中啦彩票网靠谱吗| www.7ps.com-婚内彩票中奖| www.262693.com-吉林市福彩中心| www.340922.com-福彩3d彩吧中心| www.065985.com-彩虹代刷网授权| www.4445.biz-欢乐快三走势图| www.15qo.com-香港皇都彩票| www.0225.xyz-时时彩牛牛玩法计划| www.703908.com-3d胆码彩票小狂人| www.693226.com-彩宝彩票规律| www.808075.com-竞彩足球资讯中心| www.929325.com-公彩开奖结果| www.985525.com-彩票看走势图技巧| www.fs11.com-快三对几个号中奖| www.4gl.com-彩票投注手犯法吗| www.129196.com-彩虹旗代表什么意思| www.289698.com-大乐透杀号彩宝贝| www.583215.com-3的杀号彩经网| www.657157.com-网络彩票公司| www.732628.com-全民汇彩票怎么样| www.835586.com-香l港好彩-| www.910087.com-彩票交流群官方端口| www.982725.com-好彩app安全吗| www.39781.cc-彩票刮刮卡上瘾| www.62225.com-俄罗斯全民彩| www.238006.com-快3彩票网址| www.697122.com-西港博彩-| www.j64.cn-彩票送38元开户金| www.18vy.com-三d福彩内部报2| www.308893.com-彩票双色球中奖技巧| www.39783.com-九彩彩票手机版| www.572039.com-南粤风采好彩怎么玩| www.666170.com-福利彩票和啥能一起| www.915060.com-九鼎彩票快三| www.977174.com-河南濮阳各地彩礼| www.cv68.com-彩神通金码-| www.087663.com-彩票app哪种最快| www.152010.com-买彩票破解器有用吗| www.047010.com-51彩票首页-| www.929557.com-七星彩公式-| www.599821.com-多次中彩票大奖| www.325432.com-海南体彩网官方网站| www.086522.com-福星彩app下载| JJ彩票www.61040.cc| www.384896.com-创建彩票网站平台| www.078358.com-网上的福彩网可靠吗| www.9702.cn-彩宝彩票网页| www.4182.com-七彩国际会所怎么样| www.764844.com-博彩888-| www.916688.com-海南私彩老板| 酷彩网www.5177.cc| www.9205.loan-体彩时时彩有钱赚吗| www.52100.com-黑彩犯法怎么量刑| www.702565.com-北京福彩赛车论坛| www.779890.com-彩票易中奖软件| www.845444.com-福利彩票什么意思| www.912605.com-幸运一幸运二福彩网| www.968188.com-宁夏体育彩票排列五| 中彩网www.91233j.com| www.c90.cn-陕西百宝彩十分钟| www.0020.pw-2元能买彩票吗| www.63992.com-竞彩老吴-| www.062457.com-江苏快三倍数| www.137124.com-彩花是什么番里的| www.121428.com-5d体彩-| www.5436.xyz-足彩竞彩赛果查询| www.721039.com-新2彩票网站论坛| www.v34.me-网上可以买时时彩吗| www.78078.cc-中国福彩3d今天图| www.052858.com-手机购彩大发快三| www.155483.com-上海快三群-| www.225383.com-谁有彩票微信合买群| www.545509.com-福利彩票十选七| www.661413.com-彩票3d漏洞-| www.778175.com-高频彩是什么东西| www.848012.com-古建筑彩绘旋子图案| www.905885.com-体彩有哪些高频彩| www.962900.com-江苏福彩投注站明细| 彩民网www.76520v.com| www.54td.com-足彩竞猜下载| www.400227.com-福星彩全年资料| www.251470.com-快三中一倍有多少钱| www.335830.com-快三是不是赌博| www.407620.com-所有彩票开奖网址| www.504665.com-玩网易红彩怎么提现| www.088025.com-双赢彩票手机版| www.1721.com-体彩任选9场多少钱| www.60140.com-彩票交税规则| www.16177.cc-申国彩票开奖结果| www.704266.com-大唐平台彩票登陆| www.777841.com-牛彩3d字迷-| www.852864.com-香港买彩票的地方| www.907810.com-体彩站去哪申请| www.961615.com-各种釉彩大瓶也自| 88爱彩www.88ac.com| www.015050.com-海南七星彩口诀| www.936700.com-幸运快三是什么游戏| www.tk38.com-大乐透开奖彩票网| www.444534.com-彩票怎么看中奖号| www.540622.com-易彩彩民登录福地| www.604598.com-苹果x彩灯-| www.63813.cc-竞彩分析唯彩网| www.448447.com-免费彩票计划| www.541897.com-京东进军彩票| www.609567.cc-分分彩大小算法| www.672638.com-高频彩包输-| www.742520.com-好运来彩票全网搜| www.807523.com-陈赫演的电视买彩票| www.871150.com-众赢彩票是不是真的| www.960481.com-9亿彩票是真是假| 中国福利彩票www.08588r.com| www.451009.com-拉菲时时彩2| www.549007.com-高手彩票、彩票高手| www.646764.com-职业彩民牛人| www.744773.com-购彩软件是真的吗| www.811772.com-特彩吧49qcc| www.883476.com-彩票送彩金的网址| www.956085.com-赌彩群-| 500万彩票www.35155x.com| www.144825.com-免费申请彩金88元| www.56619.cc-盈发彩票网址| www.93536.cc-福彩3d乐彩网专区| www.051225.com-彩票合买规则| www.343959.com-网易彩票电脑版网页| www.451271.com-福彩3b开奖视频| www.545588.com-体育彩票店加盟电话| www.607986.com-35选7彩票-| www.669826.com-海南定位彩票缩水| www.754320.com-彩神计划帐号免费| www.830123.com-福利彩票3d幸运号| www.903977.com-彩票app制作费用| www.961840.com-靠买彩票能发财吗| www.999646.com-爱彩乐重庆时时彩| www.cb25.com-快三代理怎么提成| www.338612.com-湖北葛店彩票中奖| www.416448.com-uc彩票提现异常| www.513089.com-百度808彩票网|