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.029843.com-手机神舟彩票| www.165656.com-68彩票是正规的吗| www.00kd.com-彩票烂了一个角| www.819550.com-5分钟极速彩| www.976543.com-彩票开奖彩票开奖| www.xj05.cc-好彩2复式玩法| www.612240.com-体彩大乐透选号神器| www.710183.com-注册首存送彩金网站| www.16868.com-怎么下载快三走势图| www.828800.com-2m彩票-| www.890137.com-外围彩票能赢吗| 500彩票www.500916.com| www.lf12.com-505彩票软件| www.z14.bid-彩友吧双色球会| www.102041.com-快三打和值中奖金额| www.114106.com-二十选五彩票开奖号| www.211982.com-比分彩客网-| www.492289.com-福利彩票智能机器| www.7161.biz-奢华彩宝-| www.60350.com-最把握的黑彩平台| www.356098.com-腾讯分分彩规律秘籍| www.488998.com-中网彩双色球走势图| www.587518.com-奇门遁甲彩票尾数| www.669263.com-779彩票贴吧| www.278653.com-河北省快三预测号码| www.397122.com-长沙市福彩中心官网| www.537423.com-五彩饺子-| www.ap40.com-彩票销售平台排行榜| www.06089.cc-体彩竞彩网官网首页| www.88963.cc-ok彩票下载-| www.090328.com-仲博彩票app下载| www.161136.com-彩神快3人工计划| www.916994.com-长沙快三彩票| www.63815.com-足彩投注量分析| www.23313.cc-3d跨度走势中彩网| www.121371.com-彩票托赚什么| www.294343.com-大发彩票能提现吗| www.270185.com-百盈快3彩票| www.505943.com-体彩案件-| www.00zy.com-福彩快三直选玩法| www.761940.com-极速时时彩可以玩吗| www.856399.cc-体育彩票店客服| www.349.hk-万豪彩票合法么| www.2538.pw-打彩是什么彩票| www.88cf.com-彩民社区心水沦坛| www.123277.com-七彩奖开奖直播| www.202506.com-uu直播现场购彩| www.06864.com-福利彩票3d计划| www.680232.com-彩票应用下载| www.813140.com-龙江福彩开将公告| www.920798.com-彩票注册绑卡送59| www.979867.com-彩票站每日交接记账| www.cp33.com-快三购彩平台| www.2jl.com-冠军彩票网平台| www.606938.com-彩票搞笑讽刺段子| www.789746.com-竞彩吧是传销吗| www.964825.com-福彩开奖近30期| www.i77.biz-本期七星彩开奖视频| www.395849.com-风雨彩虹歌曲| www.113004.com-百事彩票网址| www.765512.com-乐盈彩票实力铸造| www.860011.com-一线彩票骗局| www.922977.com-彩票开业活动| www.984055.com-大乐透预测彩吧网| www.sy7.com-福建快三形态走势图| 新盈彩www.xinyc1.com| www.517754.com-南方双彩官方| www.436439.com-彩视怎么赚钱| www.553066.com-快乐彩十二选五开奖| www.629962.com-福彩3d北海推荐| www.178128.com-彩票136-| www.99019.com-彩票机选器大乐透| www.4184.cn-七彩阳光第七届| www.541.net-武威附近体彩销售点| www.593565.com-七彩染料-| www.8459.cm-星程彩票-| www.2721.pw-福彩3d天齐网| www.135300.com-7天彩票-| www.592253.com-彩票群是真的吗| www.660464.com-彩票预测哪个软件好| www.764775.com-福彩app哪个好| www.980721.com-彩77网址下载| www.350772.com-彩霸王心水论坛| www.708450.com-探探彩票托聊一个月| www.851777.com-竞技足球彩票能玩吗| www.964461.com-怎样才懂看彩票数字| www.df72.com-彩富网天-| www.450.net-淘宝怎么哪个彩票| www.07814.com-梦中彩票能中大奖吗| www.92bv.com-澳洲快三哪里开奖的| www.050000.cc-今晚福彩3d开奖号| www.848775.com-彩光嫩肤美容| www.18rj.com-足彩大王杨光华| www.223583.com-新的内蒙古福彩| www.312193.com-七乐彩中4个号| www.369141.com-超级彩票助手苹果| www.456038.com-4s彩票现场直播| www.314.red-彩票1288-| www.17150.com-新e乐时时彩平台| www.010392.com-彩票做庄-| www.560578.com-澳洲三分彩全天计划| www.026207.com-黑客攻击黑彩平台| www.220356.com-红彩网app-| www.3652.cn-鸿福彩票是国家的吗| www.8717.top-快三猜测-| www.32259.com-彩色透水混凝土厂| www.6769.vip-福彩双色球奖池| www.56499.cc-西红柿首富结尾彩蛋| www.759657.com-时时彩最科学的倍投| www.378278.com-周口体育彩票申请| www.320827.com-足球彩票第二期| www.405125.com-体彩杀号定胆彩经网| www.421724.com-刚力彩芽人气| www.659291.com-彩票开奖查绚| www.736652.com-多彩贵州公众网| www.824544.com-彩票坐庄-| www.881400.com-国外博彩app| www.937539.com-时时彩破解公式软件| www.980647.com-易彩乐下载-| www.cai80.cc-吉林省快三开奖| www.970720.com-腾讯分分彩时时开奖| www.931902.com-赵公明彩票预测| www.bk87.com-下彩网app-| www.k32.top-快三开奖快速查询| www.217888.com-福、彩-| 福利彩票www.78700n.com| www.za54.com-甘肃快三两元网| www.85th.com-上海双色球快三| www.9785.top-中国彩吧5508| www.248557.com-内蒙快三开奖预测| www.369124.com-18位同学合买彩票| www.970532.com-攻破彩票-| www.gp14.com-大发快3分分彩计划| www.d19.club-彩票开奖器软件| www.105557.com-彩宝彩票app骗人| www.203799.com-吉林快三代理盘| www.535131.com-特区彩票论坛下载| www.030096.com-香港优彩社区免费| www.90232.com-7意彩下载-| www.8850.org-廉江七星彩高手| www.75650.com-361理财彩票| www.784813.com-大大彩票网站下载| www.cp2280.com-uu快三开奖骰子| www.to43.com-七星彩彩票开奖查询| www.78dd.com-足彩和福彩-| www.9747.xyz-天津体彩网11选5| www.305683.com-买彩票全靠运气吗| www.ja29.com-时时彩计划群里的托| www.109093.com-下载567彩票网| www.4212.cn-菲彩国际-| www.07788.cc-中彩那天生字| www.001907.com-疯狂赛车彩票| www.119730.com-快三倍投不死技巧| www.218208.com-玩彩怎么倍投最科学| www.341527.com-怎么分析河内五分彩| www.133620.com-旧版好彩客-| www.726226.com-福才3第今日福彩| www.869367.com-七星彩购买-| www.959482.com-盈彩官网下载| 500彩票www.52072m.com| www.136716.com-利彩娱乐-| www.31398.com-大掌柜彩票怎么样| www.6887.net-彩票负盈利合作| www.69317.com-竞彩官方网站计算器|