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天

知道了
1分快三 www.231570.com-必中彩票下载| www.6586.in-聚财网购彩大厅| www.56582.cc-邯郸体彩-| www.029399.com-体彩大乐透购彩大厅| www.133194.com-彩钢板围挡铁皮厚度| www.250593.com-天天中彩彩票| www.789192.com-竞彩app推荐| www.877032.com-六开彩玩法-| www.953932.com-好彩柠檬双爆| 55彩票www.755745.com| www.lp59.com-高频彩票倍投技巧| www.x21.xyz-中体彩购票-| www.676014.com-我彩票图纸-| www.772454.com-广西体育彩票客户端| www.878058.com-上海福彩网官方| www.988453.com-广东体彩中心地址| www.ab72.com-江苏快三开奖的结果| www.3167.xyz-2元的彩票几位数字| www.726525.com-香港彩宝典app| www.078598.com-盈彩在线是不是真的| www.70280.com-玩运彩讨论区| www.054416.com-微彩看球-| www.227342.com-彩八彩票168| www.187137.com-老时时彩五星走势| www.131496.com-河南彩票弃奖| www.385439.com-吉祥彩票是骗钱的吗| www.564277.com-深圳东方亮彩厂| www.700559.com-7星彩开奖时间| www.664728.com-七乐彩开奖在哪里看| www.770289.com-好彩四色爆-| www.872069.com-七星彩宝贝开奖结果| www.940337.com-北京市福利彩票快8| www.994729.com-谁有中福快三邀请码| www.aw31.com-湖北快三开奖时间| www.668233.com-tt彩票-| www.99332.cc-时时彩统计分析软件| www.104629.com-牛5彩票-| www.227558.com-众彩app下载| www.174038.com-安徽体彩十一选五| www.555148.com-时时彩会不会作弊| www.868803.com-七乐彩杀号秘笈| www.365386.cc-福彩4码遗漏| www.471163.com-我想做网络彩票代理| www.163419.com-国彩app官方下载| www.53659.com-凤凰彩票官网方网址| www.616849.com-河北快三号码统计| www.33941.com-彩票分析师-| www.767154.com-彩界联盟怎么下载| www.985374.com-老时时彩下载手机版| www.uh60.com-快三输了怎样回血| www.83pz.cc-金彩游戏兑换码| www.812058.com-吉林快三属于赌博吗| www.977241.com-濮阳结婚彩礼多少钱| www.a35.club-体彩中奖者-| www.215763.com-体彩十一夺金开奖| www.796946.com-数字流运预测彩票| www.968543.com-瑞彩网论坛-| www.fs90.com-宝马彩票彩种| 鑫亿彩www.196103.com| www.ga88.com-快乐彩12选5直播| www.wc99.cc-快三中奖中多少| www.18yv.com-亿乐彩是黑平台吗| www.347780.com-彩虹的微笑-| www.595955.com-彩鑫网-| www.791655.com-宁夏福彩中奖记录| www.881960.com-湖北快三遗漏统计表| www.996807.com-双色球彩票机选一注| www.dy39.com-吉林快三盘有鬼吗| www.tp75.com-博发彩票诈骗套路| www.06dq.com-彩铅手绘写实狗| www.77ou.com-彩票诈骗立案标准| www.1949.cn-佛山体彩普君店| www.539464.com-体育彩票转让费多少| www.869494.com-今天七星彩老鼠精图| www.945629.com-福彩双色球福建中奖| www.32kc.com-福彩四码最大遗漏| www.0351.live-花式快三分解姜丽口| www.553504.com-要怎么戒掉赌足彩| www.71272.com-福彩双色球频道直播| www.079968.com-彩票税收-| www.460099.com-大中华彩票安卓版| www.773766.com-彩票排列五开奖查询| www.77xt.com-足彩也是赌博吗| www.1917.net-彩票15期倍投计划| www.7200.biz-怎样做时时彩代理| www.639544.com-长治福彩中心在哪| www.21888.com-七乐彩选号技巧| www.808426.com-地方彩票开奖查询| www.sx83.com-福彩三d开奖走| 华彩www.71399g.com| www.054813.com-金山国彩app| www.962489.com-济宁福利彩票首页| www.iw.cc-河北快三走势图一| www.7263.xyz-彩虹4多少钱一架| www.691888.cc-足彩14场奖金查询| www.551278.com-彩票走势图下载大全| www.779993.com-瑞彩网开挂-| www.890731.com-彩票亏的倾家荡产| www.981538.com-博众彩票平台| www.jz48.com-新浪彩票下载| www.671157.com-p三彩经网走势图| www.736231.com-无极彩票可靠吗| www.654225.com-彩票淘宝走势图| www.420261.com-中国竞彩网实时比分| www.968722.com-怎么加时时彩群| 博创彩票www.558403.com| www.521512.com-体彩中了怎么兑奖| www.69312.com-胜负彩开奖任九开奖| www.02pc.com-惠民福利彩票| www.65au.com-体彩7彩星开奖结果| www.0360.cc-双色球杀号彩吧网| www.7141.net-江苏快三怎样买大小| www.17646.com-北京快三中奖号码| www.356593.com-彩票没买却中了| www.921508.com-甘肃福彩一定牛开奖| www.aa31.com-历史彩票开奖查询| www.177599.com-百胜中国福彩快3| www.685300.com-87彩店是正规的吗| www.360.com-爱彩乐助手下载| www.11502.com-体彩七位数预测| www.536176.com-给几组彩票号码| www.669768.com-彩色通道下载| www.968425.com-举报时时彩电话| www.hb9.cc-安徽快三遗漏走势图| www.381274.com-福彩摇球机-| www.954623.com-豹赢彩票app下载| www.088706.com-福彩官方网站电脑版| www.563277.com-福利彩查询-| www.676664.com-下载彩吧图库第一版| www.775822.com-邯郸体育彩票站| www.140016.com-彩16网址-| www.380396.com-彩金锁骨链套| www.566536.com-北京和彩放题哪家好| www.202756.com-黑彩票平台排行榜| www.38655.cc-彩运宝下载-| www.142438.com-爱乐彩票app下载| www.cai1230.com福彩快3开奖结果| www.733670.com-微信上快频彩的| www.807173.com-竞彩之王的博客| www.874288.com-彩票平台刷流水任务| www.934163.com-高频彩预测神测网| www.977011.com-河南出台彩礼| 淘彩票www.tcp969.com| www.ev94.com-体彩开奖结杲| www.xi34.com-七彩链接-| www.03ai.com-中国福利彩票怎买| www.56sd.com-彩票历史数据下载| www.39367.cc-软件上玩彩票| www.948747.com-下载新版万彩吧| www.cai7567.com江西多乐彩-| www.318972.cc-三分时时彩有官网吗| www.3180.cc-全能中彩彩票可靠吗| www.82873.com-新浪彩票名家双色球| www.695827.com-四亿彩票41com| www.820256.com-燕赵福彩排列七开奖| www.938719.com-5亿彩赚钱-| 新盈彩www.xinyc3.com| www.177807.com-上海福彩时时乐玩法| www.278068.com-牛彩票是什么| www.881394.com-博彩类app开发| www.975284.com-彩票奖号-| www.482.pw-重庆时时彩进群| www.8363.biz-七星彩论坛下载安装| www.73776.cc-f福建体彩11选5|