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.580873.com-七星彩中奖计算器| www.7188.biz-七彩阳光广播体橾| www.817659.com-福客来彩票登陆| www.280368.com-最大的十大彩票平台| www.627338.com-双彩论坛名人字谜| 500彩票www.50788d.com| www.751196.com-成立彩票公司| www.357500.com-年会彩票中奖平分| www.507965.com-福彩三d2元网| www.339623.com-手机上的彩票游戏| www.123550.com-ag彩票骗局-| www.706820.com-彩客站最新邀请码| www.800620.com-彩9苹果版下载| www.602969.com-彩虹六号为啥禁播| www.689573.com-9号彩票app下载| www.573239.com-直播彩播啥意思| www.21879.cc-皇朝国际彩票套路| www.156914.com-好彩彩票能赚钱吗| www.54og.com-福彩竞岗-| www.529315.com-体彩售电金水区| www.ss92.com-小鹿彩票软件| www.56ql.com-足彩中的专业术语| www.840621.com-利民彩票网交流区| www.tq63.com-足彩能网上买吗| www.3360.tv-彩票如何购买| www.np36.com-福彩大厅-| www.604448.com-彩票票花提示| www.ew27.com-休育彩票-| www.ma30.com-快频彩票app| www.03fh.com-彩票代玩赚钱| www.gb77.com-彩票追号-| www.271255.com-新浪彩票图表| 福彩网www.055s.cc| www.6062.vip-七星彩彩票图片大全| www.079153.com-国外足球彩票| www.b95.pw-网易彩票开奖直播| www.495.xyz-快三都出什么号码| www.356927.com-体彩门头标准图片| www.715222.com-哪个网站还能买彩票| www.012265.com-体彩春节停售| www.560583.com-体彩排列三条件专区| www.630286.com-胜负彩14场一等奖| www.695999.com-福彩天地报双色球l| www.785226.com-七星彩现场开奖直| www.858507.com-快三夸度走势图| www.7806.vip-财神分分彩毒胆算法| www.671650.com-排列五中奖彩票图片| www.922780.com-福彩能过户吗| 尊彩会www.zch7.com| www.mw68.com-彩票官方app下载| www.1139.net-新人如何玩转竞彩| www.091318.com-希望手游彩票邀请码| www.821697.com-3d彩圣字迷-| www.885030.com-亿彩堂是做什么| www.cp3377.com-吉林快三中奖助手| www.903367.com-高频彩规律-| www.976894.com-九江瑞昌彩礼| www.cb4.com-广西福彩快3遗漏值| www.6136.com-彩票如何买才会中奖| www.73506.cc-百宝彩票吗-| www.007.la-体彩和值遗漏分析| www.5701.vip-来韩国旅游中彩票了| www.501916.com-167cc玩彩票| www.605094.com-足彩彩票怎么看中奖| www.698751.com-彩铅画画眼睛教程| www.374965.com-足彩看澳门盘口方法| www.506599.com-彩宝贝3d走势图| www.cai4133.com安徽快三下载| www.412221.com-埃及五分彩-| www.an28.com-贵州快三推荐结果| www.253757.com-华宇彩票手机版| www.396932.com-3d走势彩吧助手| www.bg47.com-重庆快三走势图| www.333.biz-长春中彩票去哪领奖| www.49725.com-足彩app贴吧| www.888336.cc-周公解梦七星彩梦册| www.949029.com-国彩网登录-| www.pc29.com-北京快三怎么玩赚钱| www.606089.com-买彩票号码-| www.007035.com-关注彩票开奖结果| www.333913.com-体育彩票几位数组成| www.523467.com-呼市福利彩票快3| www.03710.cc-怎么能戒掉买彩票| www.81600.com-海南私彩今日开什么| www.079885.com-彩票双色球87| www.488458.com-金濠彩票app| www.593444.com-七彩阳光宾馆| www.676125.com-订婚彩礼返还的案例| www.749822.com-玩什么彩中奖率高| www.wu95.com-澳门送彩金网址大全| www.310755.com-吉林体彩在哪个频道| www.383106.com-3月5号体彩七星彩| www.481982.com-福利彩票摇号软件| www.555485.com-七乐彩走势图新浪网| www.633440.com-生肖彩票规则介绍| www.348355.com-网易体育彩票网| www.429151.com-儿童水彩画颜料套装| www.64yh.com-重庆二分彩计划网| www.34hd.com-体彩手机网排列三| www.023438.com-各类彩票玩法| www.063806.com-湖北彩票官方网站| www.225886.com-9彩-| www.305841.com-山西省福彩兑奖地址| www.687597.com-天天中奖彩票软件| www.66le.cc-福彩开机号列表| www.40kh.com-七星彩网上购买方法| www.632671.com-七彩云盒子装app| www.707358.com-彩票是人为控制的吗| www.781098.com-彩虹玫瑰花束| www.852952.com-福利彩票预测158| www.913165.com-好彩客官方网址| www.969597.com-福彩3d一贴吧| www.97ve.com-350彩票下载| www.4653.xyz-打彩票是什么意思| www.22321.cc-杨颖结婚彩礼是多少| www.008068.com-智慧彩挂机官网下载| www.66583.cc-淘彩是正规的吗| www.052085.com-如何开发彩票app| www.144773.com-唯彩会姜山冷门独家| www.255268.com-彩票送38元-| www.340756.com-体彩竞彩赛事推存| www.830511.com-看彩票的软件| www.948579.com-福彩3的定位| www.bm1.cc-福利彩票精彩十分| www.312962.com-快三三不同规则| www.369964.com-酷彩铸铁锅真假| www.75117.cc-彩票的行业类别| www.42al.com-万达大玩家刷彩票| www.91085.com-黄金8彩票破解方法| www.303969.com-中国福彩报-| www.375038.com-福利彩票160| www.jx38.com-长春福彩中心| www.3231.top-维彩看球下载| www.880679.com-福彩双色球投注方| www.83zo.com-正规彩票αpp| www.86339.cc-三彩2019连衣裙| 91彩票www.9155f.com| www.hh61.cc-乐彩彩票app下载| www.v32.cc-买足球竞彩去什么网| www.90al.com-如何下载快乐彩票| www.1265.vip-购彩幸运28怎么玩| www.592459.com-万亿团队彩22平台| www.132650.com-瑞彩网彩票-| www.255063.com-彩票预测专家双色球| www.841501.com-体彩线上活动| PK彩票www.530534.com| www.544332.com-中国篮球竞彩网| www.665541.com-昨天晚上七乐彩开奖| www.761204.com-彩礼钱法律规定| www.894099.com-997彩票app-| www.987238.com-腾讯快3彩票平台| www.mg58.com-好彩网app-| www.466189.com-2628彩票骗局| www.99126.com-福彩体彩今日开奖号| www.502334.com-热拉上加好友玩彩票| www.661941.com-竞彩会不会爆| www.775258.com-彩票511合法吗| www.876255.com-彩票大神跟单| JJ彩票www.29039.cc| www.698775.com-彩铅落日风景画简单| www.499487.com-八度彩票-| www.588020.com-购彩v是真是假| www.645823.com-足彩稳定盈利模式| www.694408.com-运盛彩票app|