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.488.red-澳洲3分彩开奖| www.09291.com-银彩通平台-| www.72941.com-h广西体育彩票网| www.56055.com-网上快3彩票违法吗| www.143455.com-快3彩票在哪买| www.090368.com-彩33-| www.dg08.com-瑞彩祥云彩票网址| www.k21.net-体育彩票双色球预测| www.686061.com-五百彩app-| www.988400.cc-甘肃快三怎么中奖| www.hx59.com-微信快三玩法规则| www.4dr.cc-娜彩快开双色球| www.4851.vip-山西体彩诚招投注站| www.74966.com-9号彩票下载| www.152550.com-崔永元说彩票| www.301498.com-520彩票邀请码| www.794307.com-北京快中彩奖池| www.900206.com-乐彩购彩票app| www.978103.com-七星彩高手图规| www.1345.me-体彩11选5浙江| www.7449.cm-体育彩票站申请流程| www.234455.com-义乌福利彩票报名| www.323617.com-新加坡福利彩票| www.jl43.com-有一种套路叫彩票托| www.7ho.com-安徽快三开奖结婚果| www.84by.com-旭彩玩具车-| www.4894.vip-浙彩12选5开奖号| www.06944.com-中国福利彩手机下载| www.65228.com-福彩3第八图谜| www.08wq.com-尼彩手机游戏下载| www.20899.cc-01彩票合法吗| www.000424.com-太原快三彩票| www.14zx.com-开奖结果查询彩宝贝| www.2063.com-甘肃快三杀号定胆| www.67991.com-九州彩票真能赚钱吗| www.023349.com-福彩基诺奖金对照表| www.113430.com-在手机上如何买彩票| www.216311.com-520快三网-| www.298260.com-时时彩大小稳赚法| www.402488.com-足彩二串一猜对比分| www.545606.com-福彩开店需要多少钱| www.553113.com-分分彩赌输-| www.558308.com-彩票33软件下载| www.111163.com-体育彩票站-| www.684089.com-湖北快三杀号公式| www.60278.com-大发分分快三软件| www.046347.com-天天彩票注册送88| www.137568.com-尊彩网官方官网| 盈彩www.890751.com| www.700709.com-彩票可以跨店兑奖| www.875717.com-时时采彩app| www.966932.com-彩票网手机客户端| www.cp01.cc-吉林快三预测一定牛| www.9lf.com-体彩的号码是多少| www.133214.com-彩钢板围墙图片大全| www.6qi.com-智慧彩软件挂机| www.85bx.com-足彩中奖怎么去兑奖| www.2040.xyz-彩神l平台网址| www.98or.com-盛彩娱乐官网| www.7879.hk-智胜彩票骗人| www.39815.cc-彩8万下载-| www.92775.com-立彩彩票的可信度| www.432077.com-彩票行家高手论坛| www.9624.org-彩票3d选胆图| www.83755.cc-合买彩票的好处| www.398744.com-搜狐体彩福彩开奖| www.503228.com-鸿彩灯光怎么样| www.ev30.com-快三看号技巧| www.k12.red-旧版中国彩吧更懂民| www.571.me-时时彩开豹子的规律| www.248739.com-江苏福彩彩票| www.54899.cc-元角分模式彩票网| www.012286.com-算局七星彩奖表划归| www.089234.com-易彩快三怎么玩| www.839515.com-足彩最大推荐平台| www.957433.com-连中彩票软件靠谱吗| www.lf7.com-一分快3彩票网| www.008430.com-点击更多精彩| www.099819.com-彩78计划-| www.163124.com-福彩之家走势图| www.375756.com-彩虹六号刘醒图片| www.523926.com-时时彩五星走彩经| www.5548.cm-大乐透彩票几号开售| www.20304.cc-四川省福利彩票| www.65528.cc-绚彩的意思-| www.747574.com-爱上彩票-| www.824599.com-搞彩票倾家荡产| www.911776.com-快三和值大小判断| www.974799.com-中国体彩篮球| www.ad08.com-福彩3d开奖奖号| www.89ax.com-时时彩私彩平台运营| www.5940.vip-福彩3d的开奖结果| www.09098.com-广东体彩软件下载| www.67767.com-如何举报彩票平台| www.8773.live-足彩人工智能分析| www.691037.com-足彩159-| www.796047.com-字谜彩票-| www.892269.com-彩票榜app-| www.967183.com-竞彩兑奖多久超期| 凤凰彩票www.66652i.com| www.557939.com-海南四加一彩票| www.669982.com-彩色童话故事| www.771710.com-融信彩票是真的吗| www.912087.com-彩票站买私彩| www.cp8258.com-江苏福彩双色球开奖| www.82602.com-中国网彩票-| www.102276.com-103彩票-| www.180097.com-快三胆码1组合| www.243923.com-福彩开奖双色球时间| www.306018.com-买彩票后没给钱跑了| www.594119.com-竟彩足球500| www.678922.com-福彩201-| www.599226.com-欢乐彩软件下载| www.727474.com-大爆奖彩票谁注册过| www.005356.com-昨天体彩出的什么号| www.142600.com-彩8iphone版| www.770924.com-嗨彩之家是谁办的| www.961801.com-qq好友让玩彩票| www.ih4.com-乐彩网首页福彩3d| www.xd68.cc-福彩快三一天开几次| www.bx6.com-彩票132官网| www.zc84.com-红牛彩票网址下载| www.51jv.com-苏州彩票中奖名单| www.536992.com-霸气的彩票名称| www.81318.cc-香港高级彩图| www.502888.com-口袋彩店最新版本| www.648947.com-绿色彩宝都有哪些| www.i81.net-福彩3d分析与预测| www.80md.com-体育彩票可信吗| www.2188.com-彩票新闻报道| www.500056.com-345彩票直播秀| www.627336.com-多乐彩走视图| www.916728.com-私彩举报电话| www.981952.com-9彩娱乐平台| www.tl3.com-易彩娱乐登录福地| www.yk24.com-长春逸彩-| www.20oe.com-彩票店从哪挣钱| www.240611.com-怎样才能跳好快三| www.329895.com-旺彩双色球彩票软件| www.444489.com-赌生肖的是什么彩| www.670632.com-国际色彩体系| www.735794.com-快三计划软件哪个准| www.796185.com-福彩选号方法| www.852007.com-老杨说彩的文章成绩| www.904220.com-网上彩票如何代理| www.954575.com-彩票发展国外| www.989899.com-重庆时时彩中奖助手| www.cp850.com-河南快三投注平台| www.322319.com-128彩票平台| www.404136.com-7星彩兑奖查询| www.140027.com-贵州福彩网首页| www.267312.com-胜负彩19045| www.450077.com-华彩天地-| www.550624.com-什么彩票能中一千万| www.779914.com-福彩3d选号规律| www.847784.com-彩票作弊是真的吗| www.897566.com-过年不能买足彩| www.953514.com-竞彩奖金怎么计算| www.986561.com-彩票256安卓下载| www.cai3511.com快三屠龙技巧| www.ne47.com-安微福彩快3| www.b57.me-中国体彩助手江西| www.303079.com-好彩三中奖规则| www.385109.com-吉祥彩票网址|