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.906730.com-福彩有哪些彩票开奖| 鸿运彩票www.hy5502.com| www.hd41.com-冀彩宝下载安装| www.xi82.com-优乐彩开奖网下载| www.322006.com-下彩彩网-| www.649360.com-博万通彩票app| www.bw12.com-网上投注快三违法吗| www.tj04.com-彩票166开奖结果| www.9fs.com-体彩七星彩在哪买| www.63dc.com-今天彩民乐树图| 必中彩票www.bizhong55.com| www.k13.online-山西体育彩票| www.249.cm-彩票下载app送金| www.044752.com-博发彩票是否违法| www.dn82.com-中彩票软件-| www.3940.cm-七星彩的对数是多少| www.643668.com-时时彩太假-| www.860860.com-河南中原丰彩走势图| www.994902.com-好彩网是什么| www.rg68.com-江苏快三和值大小| www.70pq.com-彩易画迷-| www.6867.biz-福彩3d怎么看两码| www.15286.cc-江苏福彩快三预测| www.495559.com-博彩怎么推广有效| www.578208.com-快三群名字大全| www.lo28.com-内蒙快三遗漏统计图| www.49zz.cc-绝对可靠的足球彩票| www.0878.date-博彩专业论坛| www.52815.cc-好彩投app靠谱吗| www.97543.com-彩票怎么看几等奖| www.094338.com-加州彩票45秒一开| www.160821.com-彩票天天乐怎么下载| www.246969.com-福彩快三怎么买大小| www.355789.com-手机投够彩票| www.458298.com-吉林快三最后一期| www.120368.com-彩票手机机选下载| www.093131.com-内蒙时时彩开奖号码| www.213952.com-湖北快三人工计划| www.295177.com-彩票开奖查询排列3| www.365504.cc-大发快三倍数| www.451842.com-10年老彩票网| www.160667.com-乐彩网工具图表下载| www.240170.com-北京快三走势图今天| www.443833.com-江苏彩票开奖| www.541244.com-体育彩票中奖秘诀| www.620312.com-彩票能不能赚钱| www.694365.com-头奖彩票群-| www.785831.com-各地福彩快三合法吗| www.863548.com-时时彩高频接口申请| www.929075.com-桃彩骗局-| www.983604.com-幸运时时彩软件下载| www.fu9.cc-福彩时时彩开奖结果| www.467342.com-足彩开奖公告竞彩| www.550985.com-福彩3d追号怎么样| www.622765.com-快乐网彩票平台| www.699050.com-谁有吉林快三的群| www.783997.com-105时时彩app| www.860035.com-福利彩票秘密| www.933333.cc-广东省彩票兑奖中心| www.989888.com-重庆时彩计划| www.aq99.cc-大发快三官方下载| www.22805.com-网易彩票可靠吗| www.85466.com-彩票投注员兼职网站| www.35729.cc-竞彩技巧-| www.12vt.com-彩民村网址-| www.203.in-彩铅画秋景-| www.4976.tv-彩票合买贴吧| www.975465.com-彩票带赚团队| www.pi55.com-彩金鲨鱼游戏机修改| www.112.club-福利彩票百家号| www.227160.com-快三秒奶茶小时候| www.442381.com-足彩11248计划| www.944212.com-88彩票官网站| www.cai91.cc-11彩票5甘肃| www.bf36.com-大发快三稳赚计划| www.l99.top-七乐彩票主页| www.88wa.com-幸运彩票网是真是假| www.10521.cc-足彩14开奖走势图| www.605061.com-体彩足球中奖图片| www.312069.com-湖南福彩福彩天地| www.051813.com-安徽快三有多少组| www.161692.com-天津福运快三走势图| www.510365.com-彩票平投玩法| www.617160.com-彩票领奖照片| www.724816.com-普通人能中彩票吗| www.842306.com-福彩30周年纪念| www.940206.com-黑彩怎么赢钱| 500彩票www.175904.com| www.up67.com-内蒙快三综合| www.80ls.com-彩票招聘-| www.7446.vip-上海申请体彩开店| www.52956.com-买福彩用什么软件| www.598152.com-今日足彩结果查询| www.912798.com-新浪彩票双色球数字| www.970367.com-ag博彩论坛-| www.599.cc-重庆五分彩开奖记录| www.ot96.com-时时彩长龙只追不反| www.43ec.com-福彩万能七码吗| www.820619.com-福彩双色球参选数据| www.883436.com-彩票工具开发| www.999395.com-蓟彩芝演过的警匪片| www.4pi.com-500彩票新版| www.0502.cm-福l彩双色球开奖| www.8622.wang-彩票机和电视连接图| www.68881.com-彩票玄学算法| www.34773.com-今晚开什么奖七彩奖| www.558987.cc-彩虹的约定钢琴谱| www.814908.com-体育彩票投诉电话| www.937210.com-五福彩彩票软件| 159彩票www.159888a.com| www.zj57.com-网上快3彩票靠谱吗| www.851156.com-时时彩是几分钟| www.902233.com-福彩3d黑彩-| www.955888.com-彩票有作弊的可能吗| www.996587.com-哈尔滨福利彩票| www.cx2.cc-彩票的宗旨-| www.029037.com-彩票代打账号兼职| www.167648.com-内蒙古快三开奖| www.47894.com-甘肃快三的买彩方法| www.922255.com-彩票365购彩| www.768249.com-诚信中彩网-| www.bl7.cc-北京体彩网-| www.i87.bid-福彩3d形态论坛| www.794.mobi-溢彩是什么意思| www.7671.cc-福彩3d走势带坐标| www.rt5.com-快开彩票平台| www.tk92.com-福利彩票在线游戏机| www.12el.com-肥东体彩中大奖| www.67ew.com-七乐彩历史开奖查询| www.0061.vip-cp533彩票下载| www.sh00.com-彩神8app下载| www.15ym.com-武汉体彩竞彩转让| www.480070.com-彩云网盘官网| www.3328.cn-2元彩票最高中奖多| www.10284.com-彩票代买法律法规| www.86229.cc-凤彩字谜手机版字谜| www.105278.com-竞彩足球即时比分| www.339433.com-深圳福彩投诉| www.720224.com-足球彩票预测中心| www.599626.com-现在哪里买彩票| www.404.cx-请说快三开奖结果| www.436089.com-四川省福彩中心网站| www.592062.com-大中华彩票网靠谱吗| www.722055.com-七乐彩走图-| www.654714.com-福彩网怎么注册账号| www.746668.cc-彩票工具奖金计算器| www.815878.com-燕赵福彩网排列7| www.875319.com-qq群福彩快三骗局| www.930669.com-梦见彩票中大奖| www.982148.com-360彩票基本走势| 500彩票网www.676065.com| www.52233.cc-爱乐彩票骗局| www.200706.com-福利彩票七星彩| www.275601.com-北京时时彩正规吗| www.460095.com-炫彩油画是传销么| www.255988.com-时时彩龙虎玩法规则| www.902548.com-彩票即开-| www.979236.com-好彩混合型-| www.sc.com-网上快三是真的吗| www.b83.pw-彩678首页-| www.0197.xyz-镇江体彩11885| www.5223.wang-新版南方双彩网首页| www.04304.cc-微信支付投注彩票| www.40311.com-eg彩票平台注册|