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天

知道了
亚洲28 www.230345.com-购彩大厅uu直播| www.611635.com-双彩app下载| www.719023.com-手电筒彩虹实验| www.804043.com-福建泉州体彩聊天室| www.881430.com-足彩小四-| www.951872.com-足彩骗局套路| 彩票驿站www.2350i.com| www.237384.com-华夏彩票平台跑路了| www.304322.com-澳门快三-| www.015644.com-带坐标走势图七星彩| www.121974.com-澳洲三分彩开奖号码| www.210787.com-安徽快三和值大小| www.5385.org-彩票777官网| www.186.space-彩铅绘画作品幼儿| www.4623.org-买1万块钱彩票| www.544993.com-cc彩票王-| www.771272.com-天天中彩票网址| www.834142.com-开幕式彩烟贵吗| www.892333.cc-彩票-专业购彩平台| www.v98.wang-体育彩票数字几到几| www.63dh.com-3d彩民乐树图10| www.0730.site-十大彩票巨奖得主| www.527507.com-红牛网六彩资料正版| www.625588.com-长城福彩贴吧| www.721448.com-今日3d新彩网| www.792900.com-彩票如何直接兑换| www.866920.com-昨天彩票3d开什么| www.931126.com-查一下福彩开奖号码| www.998520.com-石家庄福彩有限公司| www.bx40.com-广西彩票客户端| www.wm54.com-广西官方彩票客户端| www.30cg.com-时时彩高返点| www.1401.com-亲子游戏彩虹伞视频| www.8118.me-江苏快三开挂软件| www.9be.com-强力球彩票历史| www.983630.com-随机开奖彩票| www.bt21.com-福彩双色球快3玩法| www.r31.com-快钱彩票怎么玩| www.606282.com-长沙体彩地址| www.688098.com-九州彩票的邀请码| www.775034.com-k彩联系客服| www.855653.com-清各种釉彩大瓶| www.916479.com-海南私彩举报电话| www.974641.com-七星彩怎么购买的| www.cai8181.com一分快三的秘籍| www.oc43.com-体彩竞猜直播| www.1bv.com-彩票质合组合图表| www.52cr.com-超简单又好看水彩画| www.0934.org-狼行天下竞彩合买| www.41411.com-彩票谜语图-| www.093639.com-高频快开彩票停止| www.247551.com-能玩快三的彩票网站| www.389502.com-福州彩票店生意转让| www.588939.com-极速快三骗局| www.761975.com-重庆时时彩改版为啥| www.933882.com-今彩票开的结果是| www.cai6633.com吉林省快三-| www.19dz.com-昨天福利彩票开奖| www.01016.com-大发快三算诈骗吗| www.024611.com-江西体育彩票中心| www.261740.com-足彩网比分直播| www.496904.com-打彩票故意不拿钱| www.737811.com-幸运彩票网注册登录| www.974535.com-彩运来网址-| www.55ss.cc-体彩赛车-| www.245587.com-易彩堂是黑彩吗| www.326830.com-万通彩票平台app| www.399942.com-星期三彩票开奖查询| www.065432.cc-3d彩铅画教程| www.144019.com-彩运网靠谱吗| www.101222.com-快三大小分析软件| www.228660.com-彩色纸箱定制| www.316971.com-广东时时彩快乐十分| www.400300.com-福利彩票摇号模拟器| www.560930.com-福彩历史今天| www.696948.com-足彩竞彩开奖时间| www.838354.com-澳彩欧赔分析技巧| www.919228.com-体彩开奖直播新浪| www.995088.com-体育彩票大乐透兑奖| www.cw29.com-八手巴购彩票骗局| www.yi16.com-北京福彩快8| www.97ve.com-350彩票下载| www.np64.com-彩票模拟选号app| www.669512.com-彩105官网下载| www.098188.com-百度百度彩票| www.213156.com-三分时时彩有多假| www.554458.com-彩票销售广告语| www.650728.com-时时彩刷量技巧| www.867721.com-快三规律表-| www.kz00.com-132彩票注册官网| www.636806.com-彩虹儿歌幼儿园| www.744573.com-宏盛彩票分析系统| www.318950.com-易彩国际骗局揭秘| www.656703.com-合肥竞彩店转让消息| www.618282.com-陕西体彩中心电话| www.pi00.com-竞彩2串一-| www.86ys.cc-米鸿宾测彩-| www.172552.com-甘肃省快三开奖结果| www.288581.com-彩票名言-| www.546666.cc-彩票中的ag是什么| www.028570.com-app彩678-| www.982941.com-微信可以玩彩票吗| www.cp800.com-私彩哪个app靠谱| www.14tt.com-最新玩彩票平台| www.554409.com-福彩用语-| www.501129.com-员工年会发彩票中奖| www.779773.com-2019体彩前景| www.021558.com-网易彩票网页版| 91彩票www.9155c.cc| www.1001.online五分彩长龙几期反| www.wt81.cc-天天中彩票与腾讯| www.926028.com-福彩下一-| www.385219.com-酷彩中国专柜价格| www.378395.com-七彩彩票查封了吗| www.650702.com-打地鼠游戏教案彩虹| www.501366.com-易彩堂可以玩吗| www.31842.com-8k易彩快3破解器| www.127036.com-彩铅画女孩-| www.662010.com-金全球额最大的彩票| www.52197.cc-爱乐彩宁夏十一选五| www.090737.com-广西福彩网首页| www.206068.com-福彩3地全图总汇| www.490828.com-宏达彩票购买中心| www.5fi.com-彩经网是什么网站| www.524646.com-大乐透幸运彩乐乐| 500万彩票www.35155f.com| www.kd32.com-一分快三下载网址| www.11ig.com-1号店彩票是真的吗| www.459.live-三号彩票官网| www.205099.com-内蒙古快三今天推荐| www.292487.com-彩票软件定制| www.kz96.com-28高频彩怎么玩| www.fc.cc-河北福彩快3走势图| www.tm94.com-福彩3d陈华专家| www.7670.vip-彩票宣传名片| www.668636.com-568彩票下载安装| www.952345.com-6678彩票登录| www.65500.cc-中彩网快三走势图表| www.183268.com-河南福利彩票快3| www.362606.com-为什么没人买彩票了| www.9241.loan-乐彩邀请码-| www.211153.com-安徽快三开奖规则| www.617691.com-结婚聘礼彩礼图片| www.090567.com-体育彩票佣金怎么算| www.35zk.com-福利彩票3d类型| www.56ms.com-易彩电脑版-| www.go24.cc-好彩烟多少钱一包| www.948960.com-超彩app-| www.am20.cc-快三所有号码表图片| www.66564.com-时时彩租平台| www.348122.com-七乐彩票是什么| www.130514.com-汇彩网违法吗| www.585020.com-聚宝盆彩票资料总站| www.33516.cc-凤彩网体彩排三| www.298593.com-彩票店图片-| www.372155.com-五百彩票下载安装| www.505890.com-中国福利彩票有多黑| www.299983.com-怎么预测彩票的走势| www.578328.com-甘肃体彩电话销售| www.054758.com-澳门彩票全部彩种| www.887293.com-万彩彩票是否真实| www.429588.com-牛蛙彩图库资料| www.688052.com-神兽竞彩团队微信| www.827398.com-快乐3分彩技巧|