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.593950.com-七彩视界破解版| www.752617.com-彩票日存优惠| www.900933.com-小妮姑玩彩独胆| www.978340.com-好彩客下载送18| www.il53.com-山东彩友沙龙论坛| www.o76.com-打击海外服务器黑彩| www.62fz.com-彩赢家七乐彩| www.1602.me-01彩票手机客户端| www.06913.cc-双彩球开奖结果16| www.61084.com-网络彩票投诉| www.040023.com-快三网站彩官网娱| www.142971.com-亚博彩票手机版下载| www.234100.com-福彩快3是什么意思| www.321910.com-彩票预测软件靠谱吗| www.408999.com-亿菲彩票登录| www.526524.com-卖私彩犯什么罪| www.668504.com-华人会彩票app| www.760305.com-快3彩票电视走势图| www.873968.com-福彩3d网上可买吗| www.964874.com-555彩票网安全吗| www.cp400.com-大发快三平台地址| www.pd22.com-3d福彩中奖号| www.10dc.com-彩之云手机版| www.88fh.com-彩票粉丝-| www.3346.xyz-彩票走势图没有更新| www.00764.com-体彩公司营业时间| www.82012.com-什么命容易中彩票| www.044446.com-福彩试机号今天号| www.150493.com-江西快三软件下载| www.252254.com-微信上的中彩网| www.339474.com-最专业彩票分析软件| www.437300.cc-巴西安伯快三开奖| www.543209.com-河北快彩-| www.666386.com-青岛福彩养老院官网| www.754140.com-王牌彩票下载手机版| www.866416.com-体彩投注软件| www.942285.com-彩票兼职的联系方式| 凤凰彩票www.3479a.com| www.gk01.com-湖北快3彩经网| www.b37.org-福彩3地全图总汇八| www.42vp.com-彩钢瓦围墙图片大全| www.0055.loan-香港马会时时彩骗局| www.9623.xyz-排三免费预测彩经网| www.58151.cc-彩金是什么意思| www.024021.com-攻击黑彩的黑客| www.108230.com-万豪彩票没有苹果版| www.189288.com-宁夏福彩快三彩控网| www.274392.com-1分时时彩开奖| www.398563.com-七星彩晚上几点开| www.529620.com-彩票店开直播合法吗| www.623288.com-彩32是真是假| www.707235.com-彩名堂永久免费| www.791795.com-福彩手机怎么兑奖| www.874279.com-网络销售彩票| www.cp0365.com-安徽快三跨度图| www.nx82.com-竞彩推荐-| www.02cp.com-天空彩图库大全| www.76fk.com-七乐彩中六个多少钱| www.2000.cm-下载49彩票-| www.8189.top-8炫彩玩法-| www.31916.cc-竞彩比分唯彩| www.80232.com-金豪国际博彩| www.037605.com-彩神计划软件怎么样| www.196371.com-安徽快三单选单| www.272183.com-997彩票靠谱吗| www.374109.com-福彩3d迷语-| www.503078.com-彩友多违法-| www.579275.com-投彩网彩票投注站点| www.658924.com-大福彩票是不是骗局| www.774029.com-福乐彩可以玩吗| www.870335.com-黑彩票平台在那买| www.945858.com-福建体彩网上app| www.989149.com-直击黑彩福彩| www.im.com-彩票黑彩网址快三| www.pi56.com-足彩第19024期| www.02wi.com-体彩好吗-| www.76vo.com-福彩中加力实业| www.1925.vip-规模最大的87彩店| www.7768.net-彩宝网开奖查询| www.27278.com-体彩单场胜负开奖| www.73957.com-福彩3d彩图总汇| www.027594.com-正规彩票平台排名| www.111015.com-全球彩票app| www.187865.com-体彩玩法中奖规则| www.266753.com-谁有吉林快三群拉我| www.480188.com-天下彩678us| www.563939.com-一定牛甘肃快三走势| www.638595.com-中差色彩构成图片| www.751306.com-中彩网一用户登录| www.842424.com-福彩不好干了| www.911451.com-铁公鸡彩票四加一| www.974383.com-彩虹旗论坛-| www.if56.com-韦彩会彩票-| www.zf62.com-体彩虚拟e球彩开奖| www.28oc.com-快三倍投怎么算| www.998.xyz-时时彩怎么玩不会输| www.6628.in-百度双彩论坛首页| www.17555.cc-乐赢彩票邀请码| www.61766.com-江西快三助手下载| www.035911.com-彩票用语飞偶| www.124873.com-快三稳中-| www.203809.com-体彩5d开奖结果| www.276519.com-快三倍投单双技巧| www.390933.com-死神全彩本子| www.518536.com-炫彩曲棍球苹果下载| www.590182.com-3d走势图彩宝| www.663579.com-怎样中彩票-| www.734599.com-体彩是什么意思| www.805600.com-福彩三d谜图第二版| www.877203.com-极速赛车彩票客户端| www.995708.com-足彩冷门买法| www.re.cc-亚洲彩票是不是正规| www.nw95.com-山东竞彩网络实体店| www.5mj.com-打彩怎么玩-| www.60yk.com-3d彩票会员资料| www.0305.org-如何选碗釉中彩| www.8322.org-东方彩票安全吗| www.30157.cc-彩8网站是不是真的| www.74443.cc-彩票投注网站源码| www.023510.com-体彩福彩速查表图| www.092208.com-3535彩票网-| www.157066.com-易彩诈骗-| www.353355.com-中国体育彩票创始人| www.432371.com-6118彩票-| www.526525.com-海南七星彩直播开| www.627391.com-彩票038-| www.693641.com-105彩票登录| www.770518.com-重庆时时彩账户申请| www.875415.com-网络彩票继续就是输| www.946719.com-建一个私人彩票网站| www.994090.com-彩票注册账号送彩金| www.cp5662.com-快三游戏下载| www.mb39.com-福建福彩网七乐彩| www.g62.club-体高彩票排列五开奖| www.33ws.com-褔建体育彩票| www.0890.cn-掘金好球彩票app| www.7052.biz-99彩票网co99| www.18809.cc-816官方彩票| www.59849.com-陕西快三官网| www.027610.com-易彩堂能提现吗| www.096775.com-众彩网双色专家汇总| www.155141.com-足彩19044开奖| www.259058.com-360彩票资讯| www.323089.com-凤凰彩票提现限制| www.385992.com-彩票中奖历史号码| www.525525.com-lol博彩软件| www.603813.com-足球彩票大数据分析| www.673076.com-高频彩久赌必输| www.745312.com-彩77彩票安全吗| www.808222.com-新浪网竞彩足球推荐| www.876707.com-体育彩票基诺游戏| www.973322.com-彩虹岛270回归套| www.cp3518.com-广西快三中奖助手| www.lk33.com-天天中彩官网| www.d27.bid-35彩票网站-| www.26mf.com-腾讯分分彩后一算法| www.927.red-临沂孙大夫彩票绝技| www.4520.net-网上彩票靠什么赚钱| www.9755.online彩八仙电脑版| www.60166.cc-全民彩票安卓版| www.010192.com-彩票中大奖不告诉| www.074123.com-体彩双胆专家预测| www.132190.com-彩礼是把女方买断吗| www.199515.com-彩票大乐透走势图|