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天

知道了
百盈PK10 www.134831.com-好彩双爆珠怎么抽| www.107721.com-黑彩网站改分软件| www.216459.com-体育彩票规律破解| www.2555.me-快三追号倍投| www.26637.cc-七星彩手机机选| www.89698.cc-2019胜负彩赛程| www.088755.com-福彩通怎么登录不上| www.185322.com-广东好彩1-| www.290400.com-彩票大发快三| www.392688.com-500彩票网好不好| www.058758.com-彩神pk10手机版| www.28261.cc-双色球彩票开奖号码| www.369874.com-福彩123前后关系| www.515311.com-海南七星彩今天开奖| www.663381.com-彩票nba-| www.777066.com-彩宝宝app官网| www.975656.com-褔星彩1-| www.li13.com-福彩手机购彩安全吗| www.59uu.com-买彩票有限制吗| www.2688.cm-福彩3d蜂巢胆码图| www.51282.cc-淅江福彩6十1| www.020837.com-大同彩票app下载| www.6754.vip-彩票咨询服务| www.94748.com-360足球彩票网| www.205017.com-多乐彩11选5| www.391991.com-竞彩串关-| www.658659.com-中乐彩下载地址| www.243744.com-中国福彩3d预测| www.903616.com-九龙福彩是不是骗| www.su94.com-ios版彩票33| www.5893.com-铜陵福彩中心在哪里| www.956065.com-彩票上分是什么意思| www.660340.com-职业高频彩心态| www.192902.com-彩6应用-| www.370389.com-四季彩登录-| www.964958.com-福彩3d字谜中彩网| www.058581.com-彩票中奖如何领奖| www.6ez.com-体彩游戏规则| www.205619.com-大发快三稳赚计划| www.870784.com-中博彩票开奖网下载| www.973134.com-彩虹玫瑰花图片| www.wx5.cc-快三所有号码图| www.cai6888.com快三吉林走势| www.wc60.com-内蒙古快三值| www.3495.vip-现金彩票软件| www.7348.hk-彩虹六号辅助| www.586765.com-福彩新快3开奖| www.840031.com-河南省福利彩票地址| www.85268.cc-彩票开奖足球| www.16883.cc-彩票看号技巧| www.397204.com-乐透型彩票分析| www.35sf.com-多彩数据快乐12| www.38266.cc-彩票复试奖金计算器| www.904148.com-足彩分钟师-| www.eu68.com-彩神争8网址| www.40mz.com-七星彩中奖地方查询| www.226202.com-福彩快三怎么样| www.348322.com-众乐彩票代理| www.865475.com-淘彩是骗局揭秘| www.95422.cc-足球彩票费用一年| www.116252.com-黑彩票大全-| www.799823.com-新浪胜负彩必发| www.573215.com-淘淘彩票官方网址| www.599949.com-喜欢买彩票的人心里| www.tf62.com-彩票发展-| www.865555.com-快乐公益竞猜彩票| www.390046.com-723彩票下载安装| www.931400.com-山东快三玩法规则| www.10.la-高频彩票新规则| www.90466.com-口袋彩店官网下载| www.21cs.com-体彩排列五所猜号码| www.025059.com-pp彩票下载安装| www.228805.com-福彩店提成多少| www.460080.com-可信的彩票软件网站| www.339787.com-中彩票大奖得主生活| www.cai3477.com3d走势乐彩网| www.327228.com-老版本快彩助手| www.23au.com-双彩网排三排五论坛| www.7733.biz-官方购彩软件有哪些| www.021347.com-大同彩票网站地址| www.5220.vip-福彩八卦库图| www.760201.com-彩票胆拖中奖计算器| www.gk73.com-排列三众彩网推荐| www.890552.com-乐彩网静态版| www.529086.com-小六壬测彩票取数法| www.gi92.com-快三秒加盟店| www.38gl.com-彩名堂手机计划软件| www.813585.com-天水市体彩中心在哪| www.97319.cc-古建筑新式彩绘图案| www.872936.com-遵义桐梓彩票店转让| www.498789.com-佰萬彩票开始多久了| www.586590.com-体彩大乐透头奖彩票| www.695735.com-快彩走势图-| www.799165.com-福利彩票算法| www.54pj.cc-广东体彩中心网站| www.4486.biz-电话投注彩票流程| www.35737.cc-盈彩团队骗局揭秘| www.095170.com-体育足彩14胜负彩| www.821169.com-体彩十一运夺金玩法| www.0917.space-时时彩追号稳赢技术| www.79751.com-宁夏体彩中心官网| www.331207.com-中彩股份公众号| www.6333.tv-某人花2元钱买彩票| www.107997.com-手机买彩票能开挂吗| www.622722.cc-甘肃彩票领奖| www.595183.com-k彩手机客户端登录| www.917969.com-玩彩票上哪家网站| www.917730.com-彩虹六号视频| www.115920.com-足球彩票这么玩| www.590289.com-爱乐彩体彩-| www.490473.com-七星彩三字定位包法| www.805326.com-七乐彩4十1中多钱| www.956233.com-下载彩票开奖查询| www.19314.com-彩发发app官网| www.9499.tv-有什么彩票是6位数| www.006298.com-快三开奖时间更改| www.278035.com-旺彩官方网站| www.444444.cc-体彩个位振幅走势| www.ru7.com-快三买大小单双技巧| www.uk92.com-天天彩选四开奖结果| www.56455.cc-众彩彩票是骗局吗| www.357630.com-企业买彩票给员工| www.498890.com-福彩足球玩法| www.627968.com-福彩计划杀码论坛| www.844855.com-福彩体彩双机店取消| www.971708.com-竞彩网上投注合法吗| www.dq10.com-快三哪些省有| www.223148.com-重庆快三开奖图| www.582775.com-彩色的梦课文| www.19fi.com-彩仙阁可信吗| www.978583.com-福彩3d真大报图库| www.971207.com-体育彩票怎么中奖| www.211188.com-大发快三怎么能赢钱| www.81ur.com-山西体育彩票走势图| www.772971.com-开户彩金优惠| www.438755.com-重庆彩票网点加盟| www.oy22.com-微信天天中彩票骗局| www.is.cc-广西快三开奖查询| www.hk79.com-体彩足球玩法介绍| www.74te.com-彩云追星战法| www.7443.xyz-彩票管理规定第五章| www.86315.cc-三彩打折-| www.634694.cc-新德里彩票规律| www.089446.com-网络快彩平台刷流水| www.648221.com-彩票混沌公式| www.113312.com-彩票中奖绝招| www.so53.com-今日彩票预测3d| www.rp96.com-黑彩网址攻击软件| www.88441.com-英国体彩网站| www.325385.com-今晚七乐彩开奖结果| www.463530.com-体彩p3助手-| www.43562.com-福彩一周开几次| www.470062.com-买足彩靠谱吗| www.45rz.com-体育彩票七星彩直播| www.234568.com-2019年彩票改革| www.894794.com-七星彩开奖结杲| www.992074.com-时时彩四码技巧方法| www.dv21.com-吉林快三走试图开奖| www.p60.biz-香港有快三吗| www.mr5.cc-内蒙福彩快三下载| www.325622.com-苹果彩票网pg59| www.507791.com-老徐说彩下载| www.604358.com-668彩票怎么样| www.91964.com-丰彩一等奖-|