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.100338.com-乐彩3d下载-| www.504762.com-福利彩票领奖照片| www.638825.com-体育彩票游泳夺金| www.778401.com-揭密时时彩合买大厅| www.931229.com-足彩大神跟单app| www.ir1.cc-极速快三官网| www.362548.com-赞美雨后彩虹的诗句| www.464256.com-类似好彩爆-| www.549308.com-彩客网开奖查询| www.245996.com-今日足彩资讯| www.583315.com-搭建时时彩网站| www.784331.com-叫停网络售彩| www.cp7715.com-红快三开奖-| www.34946.com-福建快三走势一定牛| www.002208.com-中国体育彩票竞足| www.092331.com-福建体彩兑奖时间| www.175891.com-安徽省快三形态| www.260658.com-福彩快三算赌博吗| www.335934.com-体育彩票大乐透买法| www.301323.com-旺彩彩票平台| www.570044.com-开空彩票与你同行| www.657684.com-易彩堂是什么| www.737638.com-红旗彩票怎么下| www.807219.com-温州福彩店转让信息| www.879117.com-新浪彩票3d走势| www.947815.com-安微省福彩发行中心| 凤凰VIIIwww.www.fh2622.com| www.cc90.cc-彩票规律计算公式| www.sm14.com-竞彩足球害了多少人| www.35ca.com-e赢彩是官方吗| www.102.me-彩汪汪-| www.4088.net-77彩票ios下载| www.9919.date-瑞彩祥云怎么充值| www.48881.cc-辛运时时彩-| www.89827.cc-日本彩票中大奖| www.070298.com-彩神8vii-| www.149858.com-甘肃快三最新规则| www.229795.com-鸿彩网坑人的吗| www.311659.com-红牛彩票网页版| www.465813.com-彩票代刷流水| www.553333.com-为什么足彩老是输钱| www.621636.com-彩影手机版官网| www.699958.com-彩客app是真的吗| www.776622.cc-重庆时时彩停业通知| www.851728.com-哪里有时时彩软件买| www.915369.com-淘宝彩票手机| www.981733.com-2019彩票网停售| www.db91.com-贵州快三走势图号码| www.uu28.com-高频彩平台合法吗| www.09ks.com-一起博彩票官方网站| www.80uw.com-新粤彩藏宝图| www.2368.in-七彩云盒苹果版下载| www.7955.wang-730彩票软件下载| www.1525.org-彩票兑奖后多久到账| www.09328.com-中奖吧彩票-| www.70770.cc-舟山福彩快二| www.061213.com-李维伟亿德彩票| www.151913.com-福彩3d字谜天气网| www.231312.com-快三单双算法| www.311165.com-神圣彩票的网址| www.377848.com-德州福利彩票店转让| www.479103.com-竞彩足球历史最大奖| www.566176.com-和彩放题能吃到几点| www.635513.com-自助彩票售卖机投放| www.703920.com-彩票狂人王成周视频| www.775052.com-香港数字彩票有几种| www.841813.com-中国福利彩票新彩网| www.902102.com-黑彩平台如何搭建| www.962596.com-跑马彩票全天计划| 8号彩票www.60108r.com| www.fn88.com-贵州彩票11选5| www.xd40.com-澳洲300彩票网| www.15bg.com-因为彩礼钱分手微信| www.pq22.com-中国福彩有app| www.93hp.com-彩票怎么才算违法| www.5609.vip-宁厦体彩中心| www.29939.cc-福彩数字三开奖结果| www.97332.cc-古建筑荷花彩绘图案| www.220322.com-乐彩网官方app| www.331478.com-高手网免费港彩资料| www.481487.com-3d彩吧网开机号| www.7832.loan-彩票开奖一个半小时| www.48448.com-可压球的竞彩app| www.020076.com-体育彩票拖胆玩法| www.129742.com-收中奖彩票被调| www.258192.com-吉林快三三同号遗漏| www.375129.com-福彩3d怎么算准确| www.561005.com-红彩会下载安装| www.664754.com-今天七乐彩开奖吗| www.780331.com-美术作品彩铅画| www.903888.cc-高频彩平台出租源码| www.606951.com-时时彩中奖号码| www.706021.com-发彩在线下载| www.812979.com-华彩咨询怎么样| www.913536.com-彩票双色球预测精准| www.997447.com-重庆福彩自助精灵| www.ki79.com-快三稳赚秘诀| www.8xq.com-怎样下载凤凰彩票| www.1698.cn-大财神彩票网| www.9392.cm-彩票超级大奖| www.77335.com-好彩客彩票下载安装| www.112263.com-腾讯分分彩计划辅助| www.225725.com-英国官方时时彩| www.332073.com-鸿运彩票网是否合法| www.441197.com-百宝彩注册免费账户| www.558720.com-下载彩库宝典老版| www.657295.com-凤凰福彩快3| www.758308.com-快彩刷流水的方法| www.887367.com-特彩吧之高手| 500彩票www.500021.com| www.op06.com-彩吧导航-| www.31ox.com-漫画彩虹-| www.1053.cn-彩票分析师是骗子吗| www.66236.cc-福彩3d走势彩宝| www.052741.com-网上购彩票-| www.132412.com-河南叶县结婚彩礼| www.353884.com-彩票直播间3d教父| www.461914.com-3d彩天天彩报| www.567706.com-七彩本草安神方价格| www.634889.com-博彩mg游戏-| www.747118.com-505彩票几年了| www.818987.com-彩票打票的教程视频| www.890539.com-福建坤彩邓玉红| www.970037.com-中国官方体彩下载| 福彩天下www.805836.com| www.k13.bid-中国新彩吧网| www.92le.com-导师带领买彩票倍投| www.618534.com-体育彩票终端机操作| www.686768.com-彩票中奖彩民| www.760517.com-高频彩票团队计划网| www.828733.com-福彩3d怎么挣钱| www.943404.com-时时彩长龙经验| www.995531.com-竞彩之家官网| www.xg3.com-上海快三软件| www.ui55.com-高频彩为什么要调整| www.33643.com-专家说彩李迎| www.71813.com-购彩堂是骗人的吗| www.054693.com-竞彩分析预测| www.112801.com-大众彩票会员计划群| www.189339.com-彩神8官网app| www.259867.com-河南新快三一共几注| www.344172.com-163彩票网网站| www.555069.com-什么彩票可以中上亿| www.668544.cc-初玩彩票怎么玩法| www.764786.com-933彩票网站| www.889141.com-彩神网是不是骗局| 网易彩票www.9356p.com| www.gj93.com-一分钟快三是官彩吗| www.d11.in-彩票开奖神器| www.285652.com-安徽快三计划哪里有| www.546666.cc-彩票中的ag是什么| www.638220.com-竞彩上海宝山网点| www.863335.com-腾讯彩票夹娃娃| www.913185.com-彩客网五分快三| www.983194.com-彩票代玩账号群| www.cp6398.com-竞彩-| www.ru08.com-奇门测彩密法| www.04jt.com-竞彩冷门规律| www.782.website凤凰微彩店-| www.5023.org-福利彩票买号| www.09108.com-福彩3d输了-| www.63044.com-足彩分析新浪体育| www.022492.com-梦见买彩票没中奖| www.108583.com-彩票怎么赢钱|