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天

知道了
彩票123现在叫什么名字 www.305831.com-陕西快三开奖结果| www.474172.com-腾讯分分彩倍投方案| www.576594.com-彩票几点更新| www.662450.com-乐玩彩票官网| www.801852.com-福彩双色球投注手机| www.892098.com-k彩平台手机登录| www.961652.com-体彩天下名钻刮刮乐| 13e彩票www.307075.com| www.ku05.com-彩圣福彩字谜| www.s15.net-快三加奖公告| www.62eu.com-彩票开奖中奖查查| www.0557.in-中华体彩彩报| www.20168.com-河南快三二码| www.69941.com-极速时时彩五星计划| www.054358.com-江苏体彩七位数规则| www.146461.com-足彩310预测| www.247918.com-天津福彩群-| www.331498.com-众乐彩票大发快三| www.423704.com-无双大蛇3星彩| www.532080.com-美术作品图片彩铅画| www.660545.com-彩票出码分析仪| www.750954.com-彩库宝典ios| www.831140.com-金盾彩票计划网址| www.911940.com-香港买彩金是真的吗| www.973234.com-彩虹代刷对接卡易信| www.sa92.com-给我找一下吉林快三| www.07kl.com-福利彩票的返奖方案| www.86fj.com-078彩票计划网| www.3224.xyz-玩彩老输-| www.9461.cc-福龙彩票网站| www.74744.com-金彩彩票平台| www.032149.com-彩票盘口是什么意思| www.119372.com-彩8彩票手机版下载| www.198824.com-皇都彩票真假问题| www.281971.com-浙江体彩61开奖| www.434348.com-福利彩票的营销计划| www.537628.com-多彩是表示颜色吗| www.641314.com-福彩体彩图片| www.737631.com-福彩电脑版3d诗谜| www.818615.com-彩乐汇是正规网站吗| www.897006.com-优彩彩票网香港| www.967781.com-彩票3d连线图| www.oi70.com-福彩3d中奖号码| www.2pe.cc-彩客竟彩彩票| www.65ot.com-开彩票站怎么提成| www.1155.tv-宣传体彩标语| www.9412.org-华人福彩-| www.52528.cc-lbkeno快乐彩| www.003717.com-彩经彩票破解软件| www.080276.com-马来西亚福利南洋彩| www.153839.com-彩票两码和计算方法| www.283358.com-七乐彩怎么玩| www.375331.com-福彩三d杀码| www.507032.com-海洋彩票网-| www.586264.com-彩票中二等奖难吗| www.664801.com-花草彩铅画图片| www.745239.com-万彩资料下载| www.824096.com-三彩女装折扣店| www.903316.com-时时彩如何才能赢钱| www.971402.com-中国体彩排列三| www.ip60.com-105彩票网址| www.d49.net-170彩票网双色球| www.79kr.com-彩名堂快三聊天室| www.2451.net-快三倍投计算器在线| www.8361.org-南国南国彩票论坛| www.33681.com-吉祥彩票大发时时彩| www.83999.cc-河南省福利彩票快三| www.042156.com-体彩竞彩中奖规则| www.199487.com-588彩票网站| www.276900.com-河南彩色透水混凝土| www.378796.com-3d双彩论坛专区| www.505978.com-彩票杀人-| www.578328.com-甘肃体彩电话销售| www.655990.com-彩之网双色球预测| www.769018.com-118彩库图王中王| www.860765.com-内蒙快三推荐号| www.931632.com-李永乐高频彩票| www.989839.com-快三多久开奖| www.cp8979.com-爱彩乐快三-| www.oc29.com-江苏福彩快三走势| www.8ai.com-浙江福利彩票兑奖| www.67ry.com-熊猫彩电的倒闭| www.0890.com-凤凰彩票用户注册| www.8902.cn-射阳竞彩店-| www.44732.com-福建彩票网22选5| www.91520.com-炫彩微商激活码| www.054279.com-浙江福彩支行| www.158300.com-彩票软件开发教程| www.249214.com-中彩网3d彩报| www.320044.com-360彩票电脑版| www.389765.com-彩8彩票安卓版官网| www.534017.com-七乐彩咋玩-| www.619690.com-3d彩票专家图库| www.690607.com-竞彩足球在线购买| www.771870.com-最正规的时时彩平台| www.871161.com-星彩网3d-| www.960233.com-手机购彩靠谱吗| 吉利彩票www.80075q.com| www.go93.com-河南限制彩礼| www.xs56.com-彩工网甘肃快3| www.20ga.com-足彩19-| www.877.club-彩铅星空画法| www.5001.com-吉林福彩中心在哪| www.03682.com-应不应该买彩票| www.50484.com-足球彩票怎么买不了| www.92613.com-最新版立彩-| www.052110.com-安徽快三组合分布图| www.189893.com-皇都彩票能提现吗| www.258567.com-广东红快三开奖结果| www.330766.com-彩票追号计算软件| www.400549.com-七星彩2000期| www.609993.com-u9彩票信得过吗| www.679499.com-彩至尊平台app| www.759529.com-大中华彩票正常的么| www.872426.com-都匀市福彩中心| www.941744.com-96彩票app网址| www.982138.com-577彩票提款不了| www.bv09.com-查一下中国彩票开奖| www.te07.com-安卓时时彩分析软件| www.68.cn-山西十分彩前三组| www.63rp.com-福利彩票自动销彩机| www.0553.pro-彩票中大奖真实吗| www.8863.vip-有彩票专业的大学吗| www.41185.com-网上买彩票是骗局| www.85889.cc-星彩网是真的吗| www.032069.com-七星彩历史号码| www.104078.com-玩北京快三输十多万| www.169093.com-快三单双大小技巧| www.297221.com-乐购彩票是真的吗| www.364559.com-彩虹的由来同性| www.445476.com-体育彩票怎么看开奖| www.535973.com-体育彩票招牌图片| www.652242.com-体彩福彩星期几开奖| www.733314.com-华夏彩票总部在哪里| www.802966.com-彩票摇一摇选号| www.875379.com-河南福彩中心| www.964681.com-今日nba竞彩推荐| 融彩网www.www.rcw321.com| www.fy49.com-福建福利彩票开奖| www.wn07.com-内蒙福彩快3一定扌| www.11fa.com-高频彩票开奖系统| www.76fo.com-七彩乐对几个号有奖| www.1067.wang-彩名堂反着跟| www.02605.com-福彩网络购买| www.52216.cc-爱乐彩浙江-| www.92839.com-立彩预测中奖助手| www.040201.com-博彩套利稳赚| www.137405.com-竞彩官电脑版| www.208659.com-湖北老快三走势图| www.273587.com-香港时时彩网址官方| www.373838.com-体彩网站下载软件| www.ar24.com-湖北快三走势图和值| www.ql70.com-博牛彩票登录| www.8jw.cc-七星彩破解规律| www.54gy.com-天空彩彩-| www.587.cc-时时彩真没办法赢| www.3803.in-竞彩蓝球混合投注| www.8779.in-足彩概率稳赚| www.64844.com-竞彩推广-| www.019795.com-福彩群英会20号| www.082612.com-乐彩网-官方网站| www.138701.com-全天时时彩在线计划| www.208234.com-用ip代玩彩票套路| www.271601.com-3d江苏快三-|