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天

知道了
百盈PK10 www.2455.xyz-足彩最稳的买法| www.957405.com-彩客网北单比分直播| www.ae29.com-河南快三遗漏号表| www.11317.cc-纵横3d彩票一一| www.69wq.com-在线彩票计划| www.4987.biz-qq彩色昵称代码| www.18074.cc-三位数的有哪些彩票| www.366861.com-讯彩网-| www.406859.com-七星彩是搞诈骗的吗| www.503116.com-福彩3d中奖技术| www.8068.in-色彩创意画水彩| www.307795.com-高频彩票电子走势图| www.916495.com-彩客网触屏版首页| 发彩www.50732q.com| www.23.gg-开彩网开奖号码| www.254989.com-中彩啦是合法软件吗| www.782424.com-易快三开奖结果| www.935331.com-手机彩票77-| www.ij65.com-福利彩app-| www.992014.com-七乐彩玩法网站| www.ob38.cc-易彩2.0软件下载| www.87za.com-七彩营口麻将辅助| www.698312.com-开刷漏洞时时彩平台| www.830881.com-元角分彩软件下载| www.905692.com-大发快三和值推荐| www.970485.com-排列五体育彩表| www.4637.biz-男子酒后狂买彩票| www.431809.com-565彩票-| www.1775.cm-彩票刷流水团队| www.00867.com-3d乐透乐彩吧论坛| www.889507.com-七乐彩票怎么充值| www.981641.com-中国体育彩票奖金| www.gr48.com-网络彩票返点及倍率| www.q13.org-中彩网开奖结果| www.654758.com-重庆5分分分彩| www.39782.cc-对彩票上瘾怎么办| www.876126.com-正规的彩票平台程序| www.002260.com-七乐彩一般中奖金额| www.081604.com-3d山西彩民乐今天| www.156733.com-新浪彩票数据频道| www.899247.com-福彩3d藏机图解密| www.977547.com-吉利彩票平台| www.es29.com-手机中彩网开奖结果| www.11141.cc-福彩排列七最新开奖| www.308101.com-贵州快三怎么开奖| www.458486.com-鸿博彩票香港五分彩| www.576452.com-广西快三多久开奖| www.681058.com-网上14彩-| www.765449.com-哪个平台彩票反水好| www.861120.com-河南福彩幸运二任选| www.949760.com-南方彩票走势| 幸运彩票www.444087.com| www.726313.com-河北福彩中心| www.815252.cc-足彩竞猜骗局| www.890106.com-官方高频彩开奖网| www.959796.com-彩票计划详情网址| 福彩www.16878m.com| www.7654.cc-体彩logo含义| www.433443.com-怎样辨别彩票的真假| www.559018.com-福彩快乐彩玩法介绍| www.7397.biz-上海彩票店都关门了| www.076036.com-达人彩票靠谱吗| www.955944.cc-彩票金额修改软件| www.cai3343.com江苏快三复式投注| www.860514.com-江西快三预测贴吧| www.942813.com-如何玩一分彩| 818合彩www.www.9889hc.com| www.67299.cc-上海快三手机版下载| www.254444.com-青海快三开预测| www.338683.com-体彩天下.购彩大厅| www.420393.com-三分彩走势-| www.727973.com-山东中彩乐下载| www.882680.com-159彩票手机版| www.905905.cc-海南体彩app下载| www.984844.com-苹果乐8彩首页| www.ks49.com-中彩堂开奖现场| www.7et.cc-送彩票代表什么| www.0332.xyz-彩鸿彩票官网登录| www.630388.com-国外彩票大奖新闻| www.213633.com-彩神x靠谱吗| www.903903.cc-深圳福彩app注册| www.988049.com-555五百万彩票| www.be67.com-北京快三走试图| www.i55.top-福彩体彩中奖号| www.423790.com-张星彩美图-| www.04lx.com-水溶彩铅使用方法| www.c88.tv-新3d彩票骗人吗| www.204513.com-内蒙福彩网快3| www.lj77.com-河北快三开一定牛| www.60kr.com-福建体彩开奖直播网| www.77823.com-福彩3d七乐彩| www.983117.com-共亨彩票资料大全| www.nv6.com-甘11选五彩控| www.uz44.com-极速时时彩破解数字| www.559622.com-幻彩曲棍球小游戏| www.cai5556.com快三高手怎么看走势| www.08og.com-大众娱乐彩票app| www.0097.top-世界十大博彩公司| www.oh92.com-福彩快三合肥走势| www.387637.com-全天重庆彩火山计划| www.106186.com-摸彩票骗局-| www.85559.com-111彩票cc-| www.956027.com-今天3d彩票开奖号| www.qc67.com-网络购彩2019| www.846073.com-江苏快三会赢吗| www.633842.com-东方亮彩被收购| www.822099.com-网上彩票投注兼职| www.933474.com-北京快三开始时间| www.985096.com-彩票8软件-| www.cw46.com-福利彩票店能过户吗| www.582715.com-如何看彩票的走势图| www.657916.com-中乐彩平台网| www.731488.com-德甲足球竞彩| www.823630.com-排五开奖结果彩宝网| www.892353.com-私彩十一选五平台| www.521575.com-500go彩下载| www.815499.com-即开彩直播-| www.155675.com-跑狗玄机图好彩堂| www.302224.com-中彩网骗局-| www.629977.com-美国彩票最大奖号码| www.774216.com-七乐彩选号秘籍| www.66qa.cc-七星彩飞杨头尾规律| www.710598.com-用彩票套现-| www.915380.com-淘宝有卖彩票的吗| 500万彩票www.39500j.com| www.503632.com-快三黑彩平台官网| www.777670.com-166cp彩票-| www.085092.com-苹果购彩软件下载| www.904087.com-博乐彩票-| www.cai1313.com快三投注平台合法吗| www.85.cx-下载7k官方彩票网| www.1887.pw-福彩3d之家藏机图| www.58nl.com-彩票网站跑路了| www.72252.com-彩云字体-| 99彩票www.129985.com| www.vl2.com-澳洲5分彩开奖| www.33719.cc-37彩票网址-| www.953420.com-彩票一等奖多少钱啊| E彩堂www.43818b.com| www.356546.com-靠网络彩票发家| www.7338.me-彩客网让球竟彩| www.386316.com-台湾有那些彩票开奖| www.757250.com-彩家园平台官方网站| www.27lp.com-台州福彩官网| www.812567.com-百度快乐彩走势图| www.987704.com-彩票挂机爆了追回| www.iy32.com-最新福彩开奖号码| www.32mc.com-福州体育彩票开奖| www.1098.pw-竞彩足球心得| www.104553.com-比好彩香烟还贵的| www.225856.com-q彩网-| www.g79.club-cb8彩宝app-| www.403178.com-7星彩票-| www.884818.com-地方彩票开奖2元| www.544330.com-中彩票双色球走势图| www.151798.com-彩票软件下载送彩金| www.548110.com-七星彩解梦图| www.535332.com-彩票位数一样的吗| www.640749.com-体彩顶呱刮标志| www.751272.com-七星彩号码走事图| www.919556.com-群英会走势图彩经网| www.980044.com-急聘彩票打票员一名| www.cai3844.com快三走势-| www.226731.com-极速快三在哪里开奖|