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.226870.com-大众彩票是正规网吗| www.382078.com-彩票平推是什么| www.558518.com-彩铅画作品赏析| www.646700.com-足彩可以当职业吗| www.760051.com-南粤风采好彩一| www.863132.com-足彩1-| www.943991.com-春秋彩票苹果官网| 大赢家彩票www.5086q.com| www.gs98.cc-大发分分彩免费计划| www.d33.top-时时彩直播视频直播| www.44dy.cc-山西七彩建设| www.0223.me-彩报3d大花猫| www.34979.com-快三没有规律吗| www.88774.cc-新乐彩彩票平台| www.062304.com-彩16软件-| www.177084.com-福建快三开奖遗漏| www.259328.com-青海福彩兑奖地址| www.341221.com-四季彩票-| www.436663.com-兴义福彩中心| www.543296.com-大家乐彩票官方下载| www.681097.com-福彩20选5走势| www.767271.com-福彩快12-| www.865019.com-华彩在线网站| www.929081.com-福彩跟单合法吗| www.983503.com-福彩赌博微信群| www.sy06.com-彩之家全部彩种| www.10bh.com-彩票机器造假视频| www.86hb.com-快乐e彩-| www.2888.live-福彩3d倍投-| www.8989.biz-竞彩投资最佳方案| www.69592.com-lcz99购乐彩| www.035598.com-猜灯谜猜一体彩名词| www.137865.com-彩之星是正规的么| www.225591.com-有英国时时彩吗| www.305280.cc-七星彩19036期| www.381430.com-买彩票犯法不| www.547906.com-宏图科技玩五分彩| www.692234.com-正规购买彩票app| www.777462.com-ag彩票骗人吗| www.881928.com-佰万彩票网官方网站| www.968726.com-彩神喷绘机官网| www.cai4900.com甘肃福彩开奖号码| www.pd70.com-福彩3d香港图| www.10mq.com-福彩3d金码推荐号| www.85es.com-足彩混合过关奖金| www.2553.biz-如何抓住彩票的周期| www.8681.in-静海福彩中心地址| www.64455.com-体育彩票有什么数字| www.027641.com-易彩网黑我钱| www.109665.com-福彩预测分析| www.182647.com-彩票快三-| www.up02.com-地方彩种开奖公告| www.62vf.com-晋城市福利彩票站点| www.2160.tv-除了福利彩票广告语| www.9726.biz-体彩大乐透牛彩涂| www.58767.com-福彩3d算法技巧| www.020100.com-南国彩票7星彩论坛| www.111004.com-福彩3d正版藏机诗| www.195326.com-快三跨度算法预测| www.277307.com-500彩票极速| www.355749.com-时时彩代理违法量刑| www.474834.com-百盛金服彩票| www.5685.org-二分时时彩中奖技巧| www.95se.com-爱投彩票和口袋彩店| www.036536.com-老彩民app网站| www.201340.com-易彩网app下载| www.279676.com-网赌分分彩忠告| www.353244.com-彩票306定投| www.431337.com-同城彩票手机版下载| www.553109.com-收米竞彩app下载| www.610992.com-彩票领导者安全吗| www.693365.com-竞彩实时比分| www.776939.com-快三拉花宴飞华| www.851112.com-竞彩和澳门初赔| 彩民网www.76520n.com| www.o39.net-彩票好用的什么算法| www.95lj.com-星际彩票不能提现| www.14142.cc-彩神不能提现| www.69155.cc-腾讯分分彩全天号码| www.095330.com-福彩格式-| www.176871.com-凤凰彩票导师| www.260562.com-赌博和彩票的区别| www.349350.com-体彩屋的邀请码| www.500239.com-彩票站售票员少钱| www.582059.com-123彩票怎么回事| www.724343.com-佛法看待彩票| www.841177.com-儿童彩妆用什么| www.900518.com-彩票中奖率高不高| www.085074.com-腾讯游戏qq彩票| www.284520.com-大发快三规律视频| www.9110.online网易彩票暂停通知| www.25gx.com-下彩触屏版足球彩票| www.5751.cc-体彩奖金怎么算| www.19721.cc-时时彩在线预测网站| www.002201.com-七乐彩奖金有多少| www.108038.com-正规的彩票网站排行| www.188264.com-湖北快三游戏规则| www.291338.com-彩神viii-| www.349611.com-彩票中心主任贪污| www.417385.com-襄阳彩票店转让| www.510486.com-网购足彩恢复时间| www.574433.com-电信彩铃怎么设置| www.637530.com-彩虹6围攻-| www.029971.com-实时平台彩-| www.599552.com-篮球体彩微信群| 中国福利彩票www.33588c.com| www.454210.com-航天彩虹-| www.644234.com-九彩坪拱北的视频| www.221648.com-彩票开挂平台| www.670702.com-北京赛车是国彩吗| www.785994.com-全民福利彩票cp| www.881122.cc-爱彩人彩票网登录| www.960476.com-泰安优金彩票| www.ob1.com-快三和值跨度图表| www.xu96.com-打彩票不给钱跑了| www.061866.com-彩客网app怎么样| www.168961.com-内蒙古快三网下载| www.247818.com-玩快三犯法会判刑吗| www.337387.com-铂金彩票-| www.493754.com-体彩排列三专家荐胆| www.575735.com-凤凰网投买彩| www.644782.com-足彩几串几对照表| www.855094.com-体彩开奖查查询| www.924365.com-六亿彩票网址| www.986954.com-彩先知彩票机| www.cp8758.com-uu快三骗局-| www.q38.net-广西快三网投| www.024.red-唐龙福彩近期趋势| www.5064.biz-彩票交流论坛| www.34971.com-万彩吧最新版本下载| www.78028.cc-北单竞彩官网app| www.026578.com-苹果博彩app| www.133837.com-好彩客官方下载| www.221274.com-时时彩助手apk| www.302144.com-七星彩十大专家杀号| www.378736.com-周口市体育彩票中心| www.610109.com-福彩三地图库大全| www.706342.com-福彩3d酷图-| www.811057.com-以彩开头的成语| www.230240.com-彩99是正规彩票吗| www.331177.com-彩票趋势图准吗| www.660013.com-彩票计划防连挂技巧| www.767695.com-3d字谜新彩网吧| www.991973.com-湖此快三走势图| www.zx4.com-彩票开奖网-| www.rc73.com-休彩-| www.75.tv-东方彩票骗局揭秘| www.70uk.com-时时彩后二杀号方法| www.2658.cc-甘肃彩票大奖得主| www.7484.cm-彩店云app-| www.25578.cc-七星彩抓码公式| www.88332.cc-春天彩票是真的吗| www.064641.com-长沙快三彩票| www.123553.com-网络平台彩票合法吗| www.213362.com-江苏快三全天计划| www.305616.com-彩票赔了-| www.382011.com-分分彩挂机不爆方案| www.772858.cc-大发时时彩助手软件| www.914946.com-广西快三计划网址| www.973746.com-彩票代理日结佣金| www.rq57.com-网上买彩票可靠网站| www.4nw.cc-爱彩比分网-| www.57lj.com-福利彩票店加盟| www.0251.net-乐盈彩票赚钱吗|