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.47333.cc-体彩中心大乐透| www.ly02.com-彩票娱乐大全| www.37dl.com-85彩票网靠谱吗| www.1198.com-七星彩超级组合| www.8612.com-87彩店官网网址| www.37045.com-云来彩票版-| www.96608.com-福彩都是假的嘛| www.084433.com-湖北快三规律破解| www.202202.com-彩票中奖查询器| www.485996.com-福彩图谜丹东全图| www.cj22.com-安徽快三手机怎么玩| www.b76.pw-80彩票网靠谱吗| www.49tt.cc-福彩江苏快三合法吗| www.0085.mobi-时时彩彩票投注站| www.120260.com-老宝马登录彩票| www.241800.com-七星彩复式胆拖| www.079415.com-3d彩票中有一d| www.190024.com-辽宁快三开奖走势图| www.276653.com-快彩网官方网站| www.dm25.com-吉林快三奖池| www.k76.net-菲律宾2分彩走势图| www.489864.com-2345彩票网登录| www.565793.com-冠彩巨龙王-| www.653507.com-大富彩票不能提款| www.29911.com-线上彩票共赢联盟| 易盈彩票www.7793c.com| www.400845.com-体彩5分钟-| www.100199.com-一定牛彩票真假| www.33469.com-彩票新版走势图下载| www.7276.xyz-彩虹六号游戏崩溃| www.123236.com-在哪可以下欢乐彩| www.989111.com-新浪彩票3d论坛| www.dd96.com-彩票数字达人| www.yb61.com-天津时时彩分析软件| www.29pg.com-延吉有福彩中心吗| www.943585.com-久久发彩票资料站| www.995571.com-网上购彩软件可靠吗| www.av56.com-福彩20选5走势图| www.uv47.com-快三老玩家经验| www.6961.me-599彩票投诉| www.27099.com-p3开奖结果乐彩网| www.152035.com-体彩网点-| www.295060.com-十分彩一分钟快3| www.441210.com-体育彩票注销| www.25125.cc-世界彩铅排名| www.542810.cc-体彩江苏七位数玩法| www.45731.com-三d图库彩票| www.366781.com-怎么在qq上买彩票| www.480089.com-百度福利彩报| www.05zd.com-怎么在qq上买彩票| www.0327.cm-826ct彩票下载| www.9947.me-彩票势图表-| www.180019.com-河北快三开奖号| www.t68.club-谦禧彩票-| www.96rg.com-彩漂能泡多久| www.3324.biz-体彩兑奖到哪个银行| www.84ro.com-飞彩网能信吗| www.sr66.com-天干地支测彩票绝招| www.152019.com-江苏省福利彩票官网| www.96035.com-甘肃福彩客服电话| www.22189.cc-天天福彩预测| www.70883.com-腾讯三分彩下载| www.581227.com-体彩任九场中奖规则| www.706889.com-浙江省福彩中心| www.847695.com-焦作结婚彩礼多少| www.906665.com-山东体彩扑克3查询| www.965402.com-快三福彩走势图| 奔驰彩票www.509866.com| www.000358.com-浙江彩票开奖查询| www.6258.top-彩票最高中奖记录| www.32058.com-易彩集团正规吗| www.165377.com-71彩票正规吗| www.293330.com-智慧彩票官网| www.8lj.com-黑彩杀号-| www.98bl.com-胜彩彩-| www.727615.com-福彩中奖图片| www.810499.com-霁青金彩海晏河清尊| www.877894.com-往期彩票开奖查询| www.947903.com-竞彩乐福彩群英会| 彩票大家乐www.21202l.com| www.609155.com-体育彩票站营业时间| www.688328.com-手机短信买彩票| www.454105.com-唯彩官网-| www.552555.com-c27彩票官网| www.623387.com-三星彩票app| www.976269.com-七星彩在什么店买| www.mz25.com-彩票兼职代玩| www.3he.cc-485彩票-| www.69mt.com-金沙送彩金得网站| www.3169.win-大通彩票登陆| www.552484.com-重庆时时彩爱乐彩| www.622013.com-体彩20选5规则| www.152088.com-彩票智能选号机器| www.221660.com-瑞彩祥云邀请码分享| www.69ob.com-玩时时彩有人稳赢吗| www.1426.vip-小班户外游戏彩虹伞| www.8459.vip-计彩票计划网| www.51580.com-大发快三是不是真的| www.di55.com-体育彩票种类及玩法| www.vf25.com-买体彩要身份证吗| www.44tv.com-uc注册彩票安全吗| www.524670.com-福彩快三每天几期| www.604606.com-新粤彩每期报纸彩图| www.675525.com-49彩票网app| www.759356.com-地方彩开奖公告| www.817275.com-ig传统彩是真的吗| www.877356.com-七星彩彩迷天地| www.933189.com-福彩3d组三-| www.977539.com-吉利彩票登录| www.ks09.cc-福彩双色球有假吗| www.65fk.com-说彩词-| www.673902.com-古建彩绘工程报价表| www.750869.com-买彩票输了300| www.811249.com-福彩藏机图迷| www.875250.com-大发快三是合法的| www.931845.com-有跟单的足彩app| www.975911.com-洛阳彩礼一般多少钱| 老彩票www.669634.com| www.34097.com-彩吧助手开机号| www.6661.net-双色球诗谜乐彩| www.44965.com-快三和值大小| www.106516.com-彩票今天开什么| www.238438.com-彩客网彩票客户端| www.949672.com-体彩试机号查洵| 天际彩票www.tj52.com| www.870864.com-网上挣钱彩票平台| www.946022.com-港彩高手坛-| www.988560.com-中国官网中福快三| www.ai15.com-体彩481几种玩法| www.ng37.com-皇都彩票是什么平台| www.q62.cc-体育彩票5d走势图| www.2006.cc-乐彩彩票二十分| www.8927.wang-七星彩售卖截止时间| www.s10.in-彩票开奖日期星期几| www.57om.com-全国最新彩票开奖| www.4267.cc-陕西三彩集团是骗局| www.35589.com-大通彩票手机| www.6396.vip-21彩票下载-| www.ag30.cc-今晚全国彩票开奖| www.j41.net-彩8彩票官网下载| www.607969.com-温州体彩兑奖流程| www.128193.com-彩票平刷方案| www.461813.com-婚恋骗局重庆时时彩| www.552911.com-彩名堂反着跟| www.615615.com-体彩7位数特等奖| www.687569.com-非凡彩票骗人| www.49997.com-华宇彩票代理奖金| www.584748.com-广州足彩分析师招聘| www.668365.com-双色球彩票真伪识别| www.722869.com-168好彩票app| www.794787.cc-最牛时时彩计划软件| www.862815.com-体彩守号中奖故事| www.921336.com-彩神是什么软件| www.967473.com-快乐双彩历史走势图| www.476177.com-网上投彩安全吗| www.533444.com-彩票的几种玩法| www.582028.com-55彩票赚钱太快吗| www.639359.com-漳州彩票店-| www.686973.com-长沙市体彩投注站| www.738101.com-单双五分快三| www.788012.com-手机qq彩票-| www.833892.com-晚晚好彩的网址| www.879766.com-快乐分分彩计划| www.971674.com-电玩8彩票网安全吗|