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天

知道了
102彩票 www.921071.com-足球胜负彩推荐| www.445953.com-易彩可以提现吗| www.646258.com-竞彩高手心得| www.798568.com-广西体彩电话| www.397650.com-七星彩开奖几套| www.584792.com-皇冠足彩网址| www.720203.com-七星彩规则| www.931970.com-彩票数字栏目| www.cp7669.com-福利彩快3走势图| www.x11.in-500彩票包赚| www.9277.in-福乐彩被骗-| www.9258.site-彩票培训师那里有| www.d44.space-人工智能彩票算法| www.965254.com-tkcc彩天空-| www.11jg.com-新宝娱乐彩票| www.7881.com-彩票开奖号码三d| www.58995.com-600万彩票网登录| www.091927.com-百万彩票合法吗| www.497162.com-有没有彩票分析师| www.762978.com-福利彩票连环夺宝| www.942872.com-快三赚流水-| www.gj60.com-福彩网一分钟开奖| www.827.cm-中国彩吧首页天齐网| www.27ku.com-彩票怎么才能中一亿| www.72zf.com-圣地彩苹果怎么下载| www.69687.com-彩票半全场-| www.09150.com-神兽竞彩团队微信号| www.tr84.com-网上不能买足彩了吗| www.18cf.com-鲁豫有约彩票人生| www.597.in-彩汇纺织-| www.916758.com-彩铅画教程图片| www.dc22.com-全民快三彩票| www.4821.cc-彩六万公司-| www.92499.com-易彩计划导航网| www.981826.com-28彩票平台网址| www.tc83.com-时时彩五星单式视频| www.0314.vip-2019彩票发展| www.nq85.com-甘肃省体彩助手| www.567837.com-中国彩票分几种| www.388522.com-迷彩虎军事游戏| www.588311.com-波彩之家客服| www.817179.com-仑头福彩迷app| www.957240.com-福彩3d预算-| www.hc04.com-财神网络彩票正规吗| www.86wx.cc-657彩票网官方| www.977828.com-足彩3串1玩法介绍| www.126896.com-3d菠萝彩魔图| www.662019.com-南通彩票中奖者| www.529926.com-重庆时时彩九码| www.688180.com-大信彩票网址| www.841205.com-彩票布林线-| www.972874.com-足球彩客网-| www.ll05.com-台湾彩券app| www.1460.live-胜负彩半全场九场| www.63911.cc-澳客网足彩任选九场| www.125032.com-电影中彩票号码| www.219960.com-体育彩票e球彩| www.316890.com-幸福彩票-| www.77vg.com-网上代买彩票犯法吗| www.3234.in-彩票微商-| www.359911.com-体彩226断组| www.359157.com-世界杯足彩竞猜论坛| www.26044.com-佩奇彩票网址| www.941946.com-十一彩票-| www.wy51.com-苹果彩票网登录| www.67sr.com-熊猫彩滨-| www.736029.com-玩儿彩票能挣钱吗| www.020371.com-体育彩票怎么查询| www.950194.com-533彩票官方网站| www.97135.cc-足彩单关配什么意思| www.293566.com-彩票软件网站排行榜| www.cai6344.com今天江苏快三开奖| www.184755.com-湖北今天快三推荐| www.54sn.com-申请福利彩票销售| www.9378.shop-cc在线彩票-| www.848528.com-重庆时时彩新公告| www.957341.com-红牛福利彩票| www.hm7.com-湖北体彩新十一| www.1288.com-爱彩人靠谱吗| www.874703.com-七乐彩走势图代连线| www.689075.com-乐彩网双色球| www.27qp.cc-万家彩票可信吗| www.98997.cc-时时彩斗牛漏洞| www.67091.com-手机彩票兑换| www.59197.com-ai人工智能彩票| www.9603.vip-带有彩字的网名| www.167592.com-江苏快三害死多少人| www.83or.com-曼谷5分彩-| www.948724.com-北京快三预测群| www.57586.cc-ag数据彩票网| www.086020.com-买彩票能赚钱吗| www.195549.com-江西快三连线走势图| www.547696.com-河北曾中的彩票| www.22433.com-鸿鼎彩票登录| www.924907.com-非凡丹麦快乐彩计划| www.il25.com-澳客网足彩比分直播| www.060708.cc-聚华体彩店下载| www.l10.in-怎么看走势图买彩票| www.61757.cc-七星彩现场开奖直| www.897239.com-世界彩票巨奖号码| www.028806.com-快彩安卓下载| www.73iq.com-天天免费好彩大料| www.177658.com-北单足彩-| www.485683.com-彩93可靠吗-| www.740086.com-澳博彩票有限公司网| www.9883.top-财政部彩票二十分钟| www.77630.com-彩客彩票手机版下载| www.299958.com-两元彩票-| www.55813.cc-机选彩票双色球复试| www.964671.com-境外彩票网站有哪些| www.as03.com-研究彩票走势图| 大赢家彩票平台www.976981.com| www.771334.com-881彩票-| www.950231.com-彩宝彩票app安卓| www.021064.com-七乐彩走势图代连线| www.370050.com-分分时时彩源码出售| www.654666.com-手机港彩网投论坛| www.720411.com-七星彩开有没有规律| www.785212.com-福彩官员落网名单| www.843090.com-中国福利彩票董夫天| www.903100.com-彩票合买怎么买| www.956081.com-万豪彩票没有苹果版| www.991559.com-旺彩网彩票-| www.cp9522.com-好彩票安卓版下载| www.ju73.com-彩票选号摇奖神器| www.xl13.com-兰州福彩天地报纸| www.b86.net-吉林快三三不同推荐| www.66709.com-福彩兑奖怎么验奖| www.133530.com-易彩快3走势图| www.281236.com-五星彩是正规的吗| www.415099.com-七彩建盏是什么材质| www.89779.cc-宁波员工中彩票| www.7749.tv-华亿彩票是干什么的| www.34vk.com-七星彩两期重号| www.539979.com-花样快三-| www.099124.com-易彩测速福地| www.210905.com-彩神大发快三攻略| www.388095.com-彩票宣传海报| www.156466.com-五百万彩票苹果| www.299778.com-广西福利彩票助手| www.468101.com-彩票软件一分钱彩票| www.599600.com-中彩富坛-| www.728743.com-辽宁福彩网首页| www.890070.com-中国体育彩票nba| www.984428.com-彩虹8真的假的| www.576484.com-唐山市福彩中心电话| www.wx02.cc-连红彩票app下载| www.558503.com-彩客网彩票电脑版| www.cl39.com-福建快三一定| www.228805.com-福彩店提成多少| www.uw59.com-福彩双色球开奖| www.041967.com-外国有哪些彩票游戏| www.61619.cc-乐优彩票官方下载| www.066161.com-七煌彩票-| www.743470.com-复式彩票中奖双色球| www.2613.live-关于703彩票| www.53842.com-时时彩票后三组六| www.071371.com-竞彩彩票app| www.213513.com-快三跨1是什么意思| www.354799.com-幸运分分彩软件| www.37525.cc-中彩双色球预测擂台| www.052881.com-手机彩票投注平台| www.158157.com-彩通彩票-| www.305157.com-七星彩19037期|