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.001951.com-体育彩票彩票故事| www.135617.com-彩票店售票员工资| www.230750.com-可靠的彩票平台| www.318966.com-678cc赢彩彩票| www.405896.com-七星彩资料群| www.523237.com-专门破解博彩app| www.690531.com-盈彩平台提不出钱来| www.781754.com-老杨说彩大乐透| www.869258.com-七星彩012-| www.973527.com-体彩大乐透有假吗| www.qg.cc-快三如何赚钱| www.qx65.com-七星彩连线走势图| www.20ar.com-福彩复式是啥意思| www.607.net-好运快三技巧| www.5243.net-派彩金额是不是反水| www.12095.com-新浪彩票3d开奖| www.63434.com-七星彩十专家预测号| www.062917.com-淘彩app是骗局| www.215678.com-306官方彩票| www.299413.com-福彩3d藏机图图谜| www.379732.com-和彩网app-| www.533206.com-七星彩怎样中奖| www.626901.com-彩票手机平台| www.708158.com-体彩官网手机客户端| www.792766.com-福彩3d今天奖号1| www.875924.com-幸运时时彩是骗局吗| www.983402.com-彩票计划诈骗| www.ty6.cc-体彩11选3复式| www.sl89.com-老时时采彩开奖结果| www.18oh.com-什么的彩云-| www.340.biz-六爻测彩票实例| www.4724.org-黑彩提现不了怎么办| www.08511.com-今天的彩民乐树图| www.56686.com-速彩网网站-| www.048822.com-今天2鱼玩彩独胆| www.137544.com-体育彩票店挣钱吗| www.221426.com-彩票怎么开挂| www.302669.com-七星彩图片-| www.378912.com-怎么加盟体彩| www.539893.com-大地彩票下载安装| www.633099.com-竞彩篮球大小分结果| www.712626.com-网络购彩恢复了吗| www.792900.com-彩票如何直接兑换| www.872477.com-贵阳申请福利彩票点| www.979696.com-好彩一预测彩彩乐| www.rq9.com-极速快三规律破解| www.sr29.com-六壬预测福彩3d| www.17pi.com-彩鸾归令词牌格律| www.371.org-成都乐迷炫彩安全吗| www.4490.xyz-体彩足彩比分直播| www.01691.com-幸运彩金-| www.71120.com-体彩能在手机上买吗| www.035837.com-时时彩最准计划网站| www.127344.com-彩铅画水果-| www.208931.com-快三代理怎么提成| www.287208.com-彩票刷流水方法| www.399011.com-体彩事件-| www.527009.com-时时彩三码定位技巧| www.616723.com-甘肃福彩网官方网站| www.691737.com-凤凰竞彩专家| www.771415.com-个人申请87彩店| www.880554.com-3号彩-| www.962715.com-旺旺时时彩安卓| 500彩票www.347177.com| www.hs96.com-快三人工计划全开| www.zt16.com-竞彩网计算器胜负平| www.29af.com-赵丽颖彩铅画| www.0784.net-彩世家官网-| www.7340.top-彩虹民用无人机| www.24300.com-尼彩i5-| www.67933.com-足彩和赌博区别| www.057845.com-彩神网是什么| www.141458.com-福彩快乐十分开奖| www.222942.com-快三大小全天计划| www.298651.com-qq彩票金豆-| www.368976.com-尼彩手机为什么倒闭| www.471037.com-乐彩29期字谜总汇| www.558407.com-用彩铅可以画什么| www.630679.com-解彩神通字谜| www.700810.com-代刷时时彩兼职| www.779918.com-幸运五分彩走势图| www.857507.com-彩之源彩票群可靠吗| www.934911.com-彩票站机顶盒| www.990801.com-988彩票网平台| www.hz7.com-福建快三遗漏下载| www.oz98.com-彩票开奖41期| www.00wj.com-天天买彩票买什么好| www.71tg.com-下载彩票2元网| www.1168.tv-体彩基础知识教程| www.9263.online福彩老年公寓隆德路| www.48474.com-竞彩猫官方网站| www.91773.cc-二四六天天l好彩| www.050638.com-南国报彩票版| www.139740.com-足彩竞彩下载| www.205997.com-辉煌彩票是骗局吗| www.265856.com-l福彩3d开奖| www.453902.com-多乐快三技巧| www.530500.com-时时彩选号公式| www.650376.com-小班健康彩虹伞教案| www.757344.com-福建体彩中心招聘| www.854492.com-福彩3d喜中-| www.905551.com-足球彩票店选址心得| www.968280.com-福彩现在能买吗| www.hg13.com-彩票在线万能倍投器| www.yh32.cc-买快三技巧-| www.17yg.com-七彩网一分快三| www.248.cc-中国竞彩足球比分网| www.3541.net-彩视下载安装到手机| www.8696.cn-博彩源码哪里可以买| www.52829.cc-天天快3彩票网| www.95827.cc-国家公益彩票| www.054567.com-中国福利彩种| www.151286.com-必发彩票官方平台| www.234386.com-体彩app-| www.306447.com-彩票赌博app| www.372449.com-55125彩吧-| www.459876.com-彩排列三杀跨杀尾| www.541048.com-彩贝壳-| www.662228.com-彩票拉人方法大全| www.751443.com-淘彩票官网下载| www.816677.com-北京快三彩票赌大小| www.884147.com-彩票三十六选七开奖| www.974497.com-3d牛彩图迷总汇图| www.cai718.com-快三算号器手机版| www.in50.com-彩乐乐机选-| www.yl93.cc-大乐购彩票怎么玩| www.14qy.cc-微信qq彩票-| www.471.date-李彩琳坏丫头歌曲| www.3857.top-竞彩资讯一竞彩网| www.8880.me-足彩教程-| www.52562.com-好彩彩票官网客服| www.93430.com-齐鲁风彩-| www.044588.com-9亿彩票app-| www.138558.com-万达时时彩平台注册| www.208655.com-大发快三出龙的规律| www.273234.com-彩票哪个-| www.369027.com-星辉彩票71133| www.450384.com-重庆彩八万-| www.531665.com-新生彩票注册登录| www.629585.com-赢钱彩网站可信吗| www.690167.com-全球足彩预测网| www.758881.com-大发快3什么彩票| www.860544.com-快三开奖时间结果| www.916416.com-3d彩票中奖规则| www.971052.com-福彩数字规定| www.cp6876.com-河南快三26期| www.lc74.com-112彩票-| www.zs21.com-七彩假期付款骗局| www.20cm.com-购彩软件哪个返利高| www.3024.biz-天天爱彩票能买吗| www.7996.cm-体育博彩推荐| www.22859.cc-湖南体彩网进不去| www.60628.com-新星彩资料兔费大全| www.034911.com-360足彩视频直播| www.114923.com-97彩票网软件| www.174966.com-福快彩3下载| www.260311.com-赌博买彩票-| www.324632.com-香港球彩台在线直播| www.387203.com-手机彩膜怎么揭下来| www.521691.com-新浪时时彩开奖| www.581254.com-建设外围彩票网站| www.643511.com-2分彩计划-| www.738443.com-金利彩票是正规的吗| www.801004.com-3d彩涂第一版|