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天

知道了
500彩票竞猜 www.39163.cc-彩票销售如何盈利| www.77ti.com-彩票网站怎么盈利| www.502328.com-资深彩票职业玩家| www.200474.com-熊猫娱乐彩票官网| www.8633.date-中彩网是黑平台吗| www.008453.com-胜负彩19053| www.966825.com-注册宝马彩票向日葵| www.oc43.com-体彩竞猜直播| www.41vs.com-体彩开奖排三贴吧| www.4034.com-海南博彩牌照怎么批| www.69793.com-易彩乐官网-| www.032975.com-彩票137下载| www.120032.com-燕赵福彩网快三| www.970322.com-天天乐彩地址在哪里| www.ng77.com-挂机彩票软件手机版| www.xi4.com-今天福彩正版藏机图| www.2664.xyz-有没有人玩九九彩票| www.02416.com-彩至尊平台app| www.58403.com-釉中彩好吗-| www.325102.com-华人彩票官网| www.509602.com-福彩三地开走势图| www.590854.com-奥门彩票-| www.682126.com-微信群卖彩票怎么样| www.vy08.com-福彩快3跨度表| www.666976.com-乐彩软件正规吗| www.52487.cc-玩好彩有赚到钱的吗| www.638631.com-手机快三软件下载| www.156220.com-01彩票服务器| www.300877.com-电子游艺送彩金| www.398671.com-甘肃彩票中奖名单| www.531014.com-彩铅牌子哪个比较好| www.58676.com-彩报网资料-| www.864538.com-三d彩票每天开机号| www.147269.com-万博彩票怎么下| www.807025.com-足彩如何稳定盈利| www.63237.com-河南马前县彩礼规定| www.319596.com-星彩无惨-| www.314009.com-大玩家彩票网上兑换| www.505370.com-福彩汇总-| www.35pv.com-18年七星彩走势图| www.2811.org-兰州彩票中奖者| www.oh82.com-河北保定快三走势图| www.47jt.com-足彩威兼尔培率| www.329078.com-白菜免费彩金| www.956996.com-567k彩票靠谱吗| www.tb21.com-大发快三和值| www.0270.loan-时时彩五星单式平刷| www.539754.com-搜狗彩票网登陆| www.688883.com-广东体彩网走势图| www.858832.com-彩票网站搭建一条龙| www.981007.com-七彩开头的词语| www.047654.cc-e乐彩网页登录| www.693565.com-福彩东方61-| www.104062.com-安徽七乐彩开奖结果| www.gj05.com-快三秒热水器| www.md66.com-爱乐彩官网11选5| www.920975.com-中国福彩网上购买| www.983278.com-盈彩是真的假的| www.ae74.com-彩票接口-| www.790725.com-内蒙古福彩3d加奖| www.654275.com-江西省福彩助手| www.7388.org-足彩竞彩吧-| www.72940.com-亡灵天涯彩票专栏| www.800496.com-不收费彩票qq群| www.os56.com-哪个彩票中奖概率高| www.431728.com-红利彩票可靠吗| www.576023.com-国外的足彩-| www.3980.biz-澳门博彩体育彩票| www.54818.com-正规的极速彩票网站| www.218727.com-5分快三是正规的吗| www.19679.cc-彩票海报图片| www.70600.com-彩吧彩票合法吗| www.601428.com-美的彩票的网址| www.93hs.com-彩色生活微信图片| www.4377.me-福利彩票快餐| www.9911.loan-今晚的体育彩票| www.72339.cc-规模最大的彩票软件| www.569873.com-山东好彩快3| www.8327.wang-海南七星彩规则| www.39489.com-宁德体育彩票网点| www.7130.com-七彩音符快乐颂下载| www.334847.com-万豪彩票手机版| www.419027.com-网上体育彩票禁止| www.21363.cc-今天足球竞彩对阵表| www.040661.com-博彩推广好不好干| www.38365.com-关于中彩-| www.023527.com-彩票天罡八卦图| www.48lp.com-大蛇无双星彩| www.r93.club-广西快三投注| www.77ct.com-玩彩网官网下载安装| www.165577.com-永盛彩票骗局| www.37729.cc-彩虫app-| www.583062.com-南方福彩-| www.658834.com-真实中奖彩票事例| www.915920.com-体彩转让-| www.219401.com-河南商丘彩礼价目表| www.303957.com-福彩3d倍数-| www.253565.com-时时彩大全下载| www.324118.com-乐彩网是靠啥赚钱的| www.824234.com-七星彩买奖-| www.54911.com-福彩排列三缩水程序| www.93969.com-竞彩米来了-| www.046011.com-厚街福利彩票站转让| www.20740.com-竞彩足球进球数购买| www.881041.com-人人乐彩票靠谱吗| www.957346.com-7星彩开奖结果网易| 万利www.32123o.com| www.dj16.com-体育彩票玩法| www.sl07.com-老重庆时时采彩开奖| www.0it.cc-世界上最真实的彩虹| www.635207.com-老挝博彩行业合法吗| www.141149.com-彩吧三天计划| www.110854.com-春节后彩票开奖日期| www.na32.com-微彩站安卓客户端| www.6346.vip-幸运飞碟彩票| www.090019.com-快三四码复式二中二| www.383800.com-人民网澳客彩票下载| www.52906.com-港免绿好彩-| www.422299.com-凉凉彩铃下载| www.571508.com-湖北快三专家杀号| www.286675.com-快三全天实时计划网| www.361905.com-大乐透彩开奖结果| www.456300.com-红菜苔彩票客服| www.824080.com-新彩可以画在坯上吗| www.994726.com-福彩3地字谜图总汇| www.sw63.com-7星彩中奖规则图示| www.977734.com-彩色混凝土压模材料| www.569098.com-福彩快3调整| www.788856.com-竞彩比赛投注量| www.pk97.cc-河南快三计划软件| www.43xs.com-你太出彩了什么意思| www.3216.xyz-金鹿彩票真的假的| www.3986.net-快5彩票合法吗| www.861107.com-体育彩票三等奖奖金| www.946982.com-彩色混凝土路面工艺| www.984098.com-75彩票下载-| www.cai0678.com北京快三和值走势图| www.ez59.com-快三破解器骗局| www.469468.com-彩票走势图彩票开奖| www.cai277.com-幸运快三平台| www.527873.com-如何破解时时彩| www.085.bid-掌上赢彩app| www.171788.com-贵州省福利彩票| www.866955.com-周六体彩开什么奖| www.273446.com-竞彩彩-| www.102584.com-k彩网-| www.963942.com-彩虹是什么意思污词| www.626380.com-彩票白菜网址| www.di77.com-青海快三投注平台| www.603625.com-挂机彩票论坛| www.872635.com-贵州体彩领奖地址| www.489409.com-高频彩大全-| www.981541.com-全民彩票彩种| www.28dy.cc-艾彩登录口-| www.44432.cc-彩票777网站维护| www.058094.com-购乐彩网址-| www.364066.com-3分时时彩软件下载| www.8362.org-海南七星彩开奖直| www.966.top-七乐彩出球顺序号| www.051813.com-安徽快三有多少组| www.46gr.com-新必发彩票-| www.2025.org-彩票投注平台排行榜| www.234032.com-天津快三和值走势图| www.378978.com-nba篮球体彩网|