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天

知道了
安徽快3 www.814985.com-彩票与刑法赌博罪| www.357355.com-中了彩票没有告诉| www.562199.com-中国体彩大乐透今天| www.ib59.com-宁夏体彩十一选五| www.129432.com-彩运来下载安装| www.705544.com-福彩彩票扫码| www.811105.com-新人注册送18彩票| www.890540.com-坤彩科技官网| www.759.me-百乐彩网页-| www.716951.com-彩铅混色表-| www.5900.top-亿购彩五分彩| www.069650.com-买彩票教程-| www.7510.loan-周边彩票店-| www.yt72.com-山东省福彩兑奖规则| www.48ei.com-三国杀关索和张星彩| www.652288.com-福彩3d类型-| www.781171.com-彩吧开机号金码查询| www.905091.com-郑州彩票店转让信息| www.vh.cc-网上买彩票-| www.855450.com-安徽福彩快三跨度表| www.953430.com-足彩310预测分析| www.cp1573.com-快三qq计划群| www.311732.com-五福彩票网站| www.381061.com-杨光华彩票现状| www.936780.com-娱乐彩票app| www.xf3.com-七星彩开奖结果直播| www.747898.com-彩易科思合作的彩票| www.760959.com-三分时时彩定胆计划| www.881327.com-一分快三计划中心| www.994628.com-彩票公式骗局| www.qy36.com-分分时时彩计划预测| www.96167.cc-福彩历史大奖组时期| www.728772.com-中国福彩3d新彩吧| www.475288.com-彩票客服招聘| www.675234.com-2019竞彩新-| www.797077.com-98彩票网靠谱吗| www.921772.com-亿彩内部计划| www.by45.com-体彩竞彩计算器| www.6mf.cc-彩票中的数学知识| www.437016.com-体彩销售经验交流| www.524698.com-网赌大发快三| www.786811.com-彩票中奖图片愚人节| www.912749.com-彩客吧-| www.cp1902.com-大发快三技巧和方法| www.gw06.com-481彩走势图| www.xs54.com-没钱也敢买彩票| www.257395.com-58彩票网是黑彩吗| www.45524.com-腾讯微彩-| www.86520.com-郑州福彩电话| www.037097.com-500彩票软件大全| 乐彩www.lczg9.com| www.988982.com-中福时时彩-| www.mv40.com-安徽快三实时走势图| www.41xg.com-彩票新浪彩票网| www.018833.com-青蛙过河福彩中奖图| www.108185.com-易算时时彩定位计划| www.955748.com-福彩3d今天出啥号| 惠民彩票www.hm3988.com| 网易彩票www.560251.com| www.go21.com-分分快三投注技巧| www.wt82.com-吉林新快三一定牛| www.wu41.com-彩票维护-| www.63xe.com-全民赢彩票压熊猫| www.3614.biz-奇门遁甲彩票尾数| www.24942.com-蒙娜丽莎的微笑彩铅| www.038335.com-779彩票平台网址| www.4579.top-福利彩票咋买| www.916031.com-私彩平台那么多| www.973174.com-彩虹秒赞授权| www.ix58.com-足球竞彩直播| www.028743.com-高频彩真的能赚钱吗| www.z49.org-元代红绿彩-| www.69cy.com-彩票热敏纸的危害| www.3126.cm-重庆体彩中心电话| www.29786.com-四川体彩网七星彩走| www.87733.com-京东1.5分彩官网| www.226557.com-彩票漏洞论坛| www.297165.com-网络时时彩诈骗| www.362376.com-福利彩票能中大奖吗| www.435369.com-腾讯分分彩前三和值| www.561930.com-双赢彩票app下载| www.620011.com-嬴彩彩票与你同行| www.671893.com-鞍山体彩转让信息| www.731502.com-80彩票真的假的| www.788973.com-竞彩飞龙在天推单| www.849640.com-腾讯分分彩无挂计划| www.898293.com-彩票代理如何拉玩家| www.954547.com-中中彩网走势图表| www.996528.com-亚搏彩票官方网站| www.oj48.com-吉林市申请彩票站| www.062255.com-足球竞彩结果比分| www.200583.com-延边快三动态走势图| www.262209.com-2020彩票网计划| www.69853.com-福彩3d天机图今天| www.089665.com-七乐彩精准预测| www.222231.com-查询彩票开奖日期| www.340887.com-1o5彩票网-| www.872090.com-贵州省体彩兑奖地址| www.964444.com-开发彩票平台| 大赢家彩票网www.83033g.com| www.mr08.com-七星彩玩法规则| www.17kf.com-超级大乐透彩票规则| www.654794.com-七星彩2023图规| www.759033.com-微彩注册-| www.915162.com-湖北快三专业分析| www.cai0066.com北京快三官网| www.ti40.com-体彩试机号金码| www.95kr.com-世界杯彩票顺口溜| --9b彩票登录-| www.73791.com-奥彩网开奖结果| www.073273.com-也买彩是骗人的么| www.175100.com-体育彩票开奖结果| www.278339.com-优信彩票大厅| www.455638.com-试行区块链彩票| www.539453.com-2019彩票发展| www.626890.com-彩票指南正版彩报纸| www.713937.com-福彩双彩论坛讨论区| www.786217.com-彩票今晚出号是多少| www.875362.com-快钱彩票app| www.940187.com-uu快三高手计划| www.981261.com-彩票缩水软件大全| www.jh01.com-快三中奖技巧| www.020728.com-真福彩早早报| www.308075.com-网上买彩票该如何购| www.365351.com-体彩大乐透| www.523510.com-163直播彩票| www.661427.com-彩票复试怎么买| www.788843.com-足彩竞猜手机下载| www.836977.com-中原彩票是正规吗| www.882402.com-广东体彩36选7| www.936133.com-彩票对刷刷反水| www.975614.com-广丰区结婚彩礼| 彩多多www.78949p.com| www.fd45.com-南国彩票精彩论坛| www.sf33.cc-申利娱乐时时彩申请| www.25nv.com-重庆时时彩哪投注| www.287.live-领航缔彩-| www.2642.pw-德国时时彩官方网站| www.7743.net-比特币1分彩开奖| www.13268.com-足彩计算器胜| www.45584.com-彩薇花官网-| www.78022.cc-周易测彩票的公式| www.017639.com-江苏省快3彩票开奖| www.067567.com-中彩网北斗3d推荐| www.121142.com-彩票店取名-| www.190092.com-体彩快三走势图| www.247312.com-福彩快三时间更改| www.144035.com-彩运8压大小怎么看| www.205499.com-5分快三官方开奖| www.254625.com-时时彩中跟挂停策略| www.300791.com-葡京赌侠赌博送彩金| www.350677.com-彩色激光打印机喷墨| www.390234.com-大江网福彩-| www.488149.com-家彩网杀码-| www.541155.com-竞彩完场赛果| www.587887.com-彩色复印机机| www.637214.com-彩虹6号哪个平台的| www.688951.com-俄罗斯彩票平台官网| www.738001.com-快三没有规律吗| www.782963.com-甘肃福彩最近中大奖| www.828922.com-盈彩在线彩票怎么样| www.886541.com-体彩七星彩论坛| www.936309.com-网易国际彩票| www.971575.com-中国福彩票开奖|