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.44347.com-全民竞彩旧版本| www.054439.cc-吉林快三遗漏预测| www.131982.com-退还彩礼案例| www.666543.com-万达彩票抽奖中心| www.808517.com-手彩票开奖-| www.896127.com-中彩神-| www.978790.com-好彩1开奖预测| www.mo16.com-k彩手机登陆| www.7rg.com-中了彩票让父母领| www.81ns.com-乐喜彩票-| www.2698.me-下载彩宝app| www.9404.shop-体彩图谜字谜| www.80254.com-唐山市福彩兑奖中心| www.086461.com-七乐彩胆拖中奖规律| www.218853.com-快三代理是什么意思| www.321631.com-七星彩数据分析软件| www.399419.com-七星彩免费公开直码| www.u56.net-新彩吧3d-| www.459.live-三号彩票官网| www.6870.cc-竞彩足彩500赛果| www.06gu.com-吉林快三小乔预测| www.487.cm-福彩中奖喜报| www.5630.vip-天福彩票平台靠谱吗| www.21968.cc-博彩刷子-| www.73929.com-福利彩票直播开奖| www.027678.com-易彩兼职买彩票| www.60164.com-彩名堂下载苹果版| www.118640.com-辽宁体彩十一选5| www.929102.com-盈盈彩合法吗| www.ti3.com-彩票开奖结果查绚彩| www.xl84.com-体彩11选五下载| www.37ar.com-七星彩彩迷网| www.3452.cn-彩宝价格是多少| www.05828.com-猎豹团队购彩平台| www.8982.pw-请进入精彩内容搜狗| www.77637.com-228好彩票-| www.31836.cc-竞彩网完整比分直播| www.986593.com-256时时彩下载| www.cb02.com-甘肃彩票-| www.m74.cc-彩客竞彩彩票官网| www.71zm.com-彩票走势图有哪些| www.91557.cc-绿好彩蓝莓爆珠| www.446922.com-最近福利彩票站点| www.593000.com-体彩大乐透有算法吗| www.697503.com-七星彩一等奖最低| www.776270.com-火箭彩票安卓ap| www.949702.com-休育彩票开奖| 全民乐彩票www.qml2.com| www.gm91.com-河南彩礼限制| www.46ax.com-头奖彩票官方下载| www.5694.com-三彩瓷-| www.25265.com-彩铅画简单风景草地| www.95281.com-烟台福彩书法| www.080987.com-江苏体彩7位数玩法| www.177758.com-湖北快三多少钱一期| www.286172.com-内蒙古福彩投注点| www.665453.com-七乐彩今天开机号| www.801746.com-福彩网官网-| www.898561.cc-宁夏福彩开奖查询| www.974110.com-彩民在线直播| www.dc55.cc-江西快三精准计划网| www.xt73.com-中彩票挥霍-| www.31qn.com-什么彩票星期六开奖| www.1883.org-福彩机器人在哪里买| www.8119.xyz-福彩3d下注网址| www.16je.com-天天福彩重播福彩| www.1509.me-福彩快乐彩玩法介绍| www.200667.com-甘肃快三开奖果| www.332730.com-掌上京彩app| www.492511.com-买彩票要多少岁| www.595485.com-鑫亿彩合法吗| www.94nm.com-基诺彩票开奖| www.33748.com-新快报电子版福彩| www.958409.com-彩九官网下载安装| www.bk67.com-彩票争霸8-| www.zo02.com-福利彩票好彩3规则| www.37zw.cc-下载七星彩或规律| www.357.in-中国福彩授权的平台| www.659995.com-吉林福彩官方网站| 大赢家彩票平台www.226105.com| www.ud58.com-快三两个号有钱吗| www.37ao.com-七星彩七星彩综合版| www.3815.wang-中国足球彩票计算器| www.439943.com-uu快三和大发快三| www.184382.com-快三吉林市-| www.309891.com-吉林省福彩兑奖地址| www.441119.com-电视彩票app| www.533649.com-千禧网_家彩开奖| www.691777.com-胜负彩澳客网任九| www.817789.com-体彩杀号定胆码预测| www.900408.com-e乐彩-| www.975958.com-环彩网app苹果| www.dk1.cc-时时彩漏洞计算方法| www.j11.tv-中彩网老牌网站| www.72ry.com-足彩妖刀专家推荐号| www.3245.vip-时时彩胆码运用技巧| www.091540.com-703彩票骗局| www.201924.com-彩票投注站赚钱吗| www.300138.cc-江苏福彩快三统计图| www.398384.com-七星彩什么时候停售| www.369942.com-哪几种彩票是五位数| www.535180.com-福彩3d定独胆公试| www.710212.com-彩票店老板微信号| www.781524.com-山西福彩十分钟开奖| www.910222.com-3d彩报一至五版| www.971164.com-5元福彩刮刮卡| 大赢家彩票平台www.226705.com| www.jh75.com-彩票漏洞-| www.09ze.com-福利彩票啥时候封机| 中彩网www.2408b.com| www.pk33.com-快三的专家推荐号码| www.41au.com-足彩专家分析预测| www.742.tv-澳洲快三开奖走势图| www.788286.com-约彩365苹果安装| www.878640.com-福利彩票积分卡查询| www.974489.com-福彩开奖号码今天的| www.058610.com-一分快三传统彩玩法| www.8943.vip-重庆时时彩吃大放小| www.4966.vip-中彩网双色球地址| www.32997.cc-连云港体彩中心| www.7554.vip-做个彩票网站多少钱| www.11gi.com-博众时时彩预测软件| www.63689.com-父母独吞彩礼钱| www.055322.com-彩票双色球成语| www.129382.com-一分快三可以么| www.193876.com-吉林市体彩中心地址| www.269275.com-甘肃体彩胜负彩领奖| www.329760.com-中国乐彩网吧| www.119196.com-360彩票导航图| www.234976.com-福彩端app-| www.321873.com-福彩通注册邀请码| www.386793.com-彩票投注网站| www.471255.com-台湾五分彩开奖分析| 中彩网www.61233d.com| www.672690.com-19027七星彩| www.748848.com-中彩彩票坑人| www.827639.com-679彩票苹果版| www.889900.com-cba体彩-| www.949663.com-今日体彩中奖号| www.989963.com-多乐彩票官网| www.on3.com-一定牛江苏快三下载| www.920098.com-588彩票ios-| 云博彩票www.www.217113.com| www.im40.com-广东福彩手机投注站| www.g00.xyz-发达彩票是怎么回事| www.658600.com-中乐彩注册登录| www.730653.com-天天收米app竞彩| www.2666.live-3d双彩图谜专区| www.13153.com-福彩快三计划团队| www.920233.com-彩神通官方网| www.987003.com-华夏彩票平台安全吗| www.do4.cc-福利彩票快3怎么买| www.745904.com-红彩会手机登录| www.950156.com-福彩胆码杀码| 福彩天下www.fcff6.com| www.0ok.com-买彩无忧-| www.72vx.com-竞彩足球串关表说明| www.1495.cn-蓝天彩虹图片真实| www.8255.top-中国福利彩票第一位| www.798580.com-中国福彩彩票app| www.877785.com-做私彩挣钱吗| www.989413.com-彩83彩票软件下载| www.cp835.com-大发快三平台下载| www.883.mobi-画彩铅涂色的技巧|