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.027384.com-正规的高频彩种| www.19633.cc-五分时时彩怎么玩| www.027645.com-外围体彩哪个好| www.374902.com-网站首页彩票分析| www.674663.com-亚洲彩票app| www.800789.cc-我梦见彩票中奖号码| www.902846.com-瑞彩彩票客服电话| 500万彩票www.638806.com| www.q13.com-彩票弃奖法律分析| www.4320.biz-鑫亿彩邀请码| www.305786.com-有人想玩彩票吗| www.449800.com-乐和彩票软件| www.558767.com-彩虹的约定下载| www.674257.com-体彩15选5时彩| www.879735.com-詹天佑福彩3d预测| www.zk41.com-彩票助手-| www.66al.com-爱中彩票是真是假| www.3764.com-全民彩票和全民智投| www.38173.cc-成功彩店app| www.132508.com-足彩四串一-| www.260980.com-各类彩票中奖率| www.ds37.com-3彩票app-| www.137295.com-贵阳省福彩中心| www.31545.com-彩票走势网首页大全| www.983.red-七星彩6个号多少钱| www.937089.com-彩福彩票三军大小点| www.yr53.com-延边彩票一等奖| www.438.biz-百盛彩票软件下载| www.0255.cn-安彩集团-| www.560022.com-三d双彩论坛专区| www.299140.com-吉林省彩票管理中心| www.506964.com-非凡彩票5198| www.1793.top-3d福彩论彩吧| www.982251.com-如何反思维买彩票| www.cg11.com-360彩票购彩大厅| www.903867.com-湖北快三技巧稳赚| www.030567.com-微信群合买彩票| www.000736.com-浙江福彩阳光征招| www.448078.com-彩票老谢专栏| www.3336.pw-什么是彩票走势| www.587692.com-彩票大师出品| www.704364.com-998彩票网站大全| www.814093.com-彩吧图迷汇总| www.899997.com-福利彩票转让| www.972041.com-印尼五分彩走势图| www.33401.com-海南竞彩快3查询| www.334018.com-谁能入侵黑彩服务器| www.532317.com-安徽申请彩票投注站| www.670526.com-老时彩开奖-| www.807308.com-澳门福乐彩开奖结杲| www.915821.com-中国体育彩票加盟费| www.dj59.cc-彩票开双色球玩法| www.275567.com-大发快三分析软件| www.827563.com-竞彩结果查询| www.896159.com-买彩票中大奖的么| www.959577.com-6060彩-| 爱彩www.003ac.com| www.907708.com-体彩十一选五走势| 乐博彩票www.021067.com| www.29os.com-迪丽热巴彩铅画图片| www.123570.com-玩彩网合法吗| www.132557.com-合法的彩票app| www.0372.love-谢俊娟花式快三| www.311627.com-五福彩票注册| www.za40.com-买福利彩票的技巧| www.18uw.com-7乐彩什么时间开奖| www.342.hk-体彩七星彩开奖图表| www.3305.org-中彩吧2020下载| www.8283.top-福彩3d和值尾杀号| www.26155.cc-彩虹羽泉歌曲| www.8au.com-玩彩票大平台靠谱不| www.119492.com-江苏快三今天豹子号| www.221590.com-双色球彩票谜语| www.15si.com-体育彩票装修简介| www.869.net-怎样用彩铅画樱花树| www.bh49.com-神州彩票网-| www.zo92.com-足球竞彩网计算机| www.89122.com-福彩百盈-| www.71277.cc-在微信上买体育彩票| www.070079.com-彩神网络彩票| www.054608.com-彩票购买网站| www.169592.com-福彩甘肃快3走势图| www.258371.com-华夏彩票软件| www.340539.com-福彩4d开奖时间| www.438688.com-安徵快三时时彩网站| www.109711.com-盈彩官网app下载| www.228289.com-新疆喜乐彩开奖号码| www.501348.com-l竞彩网-| www.637453.cc-哈尔滨市彩票站出兑| www.061628.com-彩客网是合法吗| www.561858.com-赌彩票能发才吗| www.203799.com-吉林快三代理盘| www.00943.com-泽德体彩店app| www.57173.com-铁公鸡七星彩下载| www.152920.com-彩票资金构成比例| www.700052.cc-重庆时时彩冷热| www.797979.com-易彩娱乐平台下载| www.883351.com-网易彩票是批准的吗| www.964272.com-彩票号码筛选软件| 手机购彩www.375699.com| www.937306.com-湖北彩钢活动板房| www.hb23.com-老猫看彩3d-| www.8800.love-分分彩选号-| www.61310.com-唯彩会福彩大师| www.020471.com-福彩3d布衣天下i| www.085534.com-快三10次倍投计划| www.168084.com-北京快三预测推荐号| www.hj23.cc-买彩票软件下载| www.42ks.com-网易福彩预测分析| www.5970.vip-大乐透福彩还是体彩| www.197102.com-乐和彩网首页| www.365786.com-彩铅头发阴影怎么画| www.565981.com-87竞彩网-| www.444781.com-呼市彩票中心| www.030973.com-福彩3d家彩网预测| www.123631.com-福彩3d不变的秘密| www.242647.com-江苏彩票快三| www.345648.com-手机盈彩彩票版下载| www.493081.com-竞彩足球赢千万| www.1909.vip-南粤福彩34期结果| www.6508.net-2019七星彩票| www.42788.cc-时时彩倍投公式算法| www.91879.com-中彩那天续写| www.870281.com-至尊彩江苏快三主页| www.974016.com-体彩中3亿-| 大赢家彩票平台www.507670.com| www.157602.com-世界杯足彩猜比分| www.pq26.com-竞彩猫官网-| www.598299.com-八马彩票极速赛车| www.250533.com-中彩娱乐是骗局吗| www.529636.com-台湾今彩539开奖| www.708922.com-时时彩预测平台下载| www.812229.com-苏州新区竞彩店| www.14va.com-体彩7星彩结果查询| www.79650.com-体彩加盟费-| www.074728.com-彩富网天空彩天| www.632357.cc-七彩网络阅卷| www.776570.com-福彩3d藏机图字迷| www.903964.com-专业彩票软件定制| www.997468.com-彩99app安卓版| www.fs24.com-快三豹子通平均遗漏| www.3id.com-京彩彩票违法| www.6480.net-斗牛娱乐彩票| www.22576.cc-关注山东福彩中心| www.504781.com-彩排的本意是| www.103944.com-好彩论坛08599| www.115122.com-彩神通彩票软件搜索| www.364311.com-世界杯会有彩票吗| www.557075.com-阿里彩票和云霁科技| www.010076.com-买彩票图片-| www.636646.com-时时彩大数据| www.151313.com-重庆时时彩中奖助手| www.226916.com-三分快三有几种| www.297236.com-网上彩票都停售了吗| www.752345.com-福彩3d杀组合绝招| www.373936.com-中彩那天课文电子版| www.78238.cc-彩蛋是什么意思| www.226819.com-北京快三技巧顺口溜| www.048234.com-网上玩福彩犯法吗| www.254583.com-港版好彩-| www.433468.com-贵州彩民9000万| www.596905.com-南京快三-| www.703276.com-万家彩票手机登录| www.789787.com-竞彩是赌博吗|