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天

知道了
7星彩 www.2336.wang-好彩2赔率多少| www.21291.cc-268报彩神童| www.68646.com-乐彩网注册与登录| www.023624.com-七乐彩什么时候停售| www.3759.mobi-极速分分彩-| www.892186.com-牛彩3d网-| www.984011.com-彩99网络彩票| www.bb15.com-五分彩怎么稳赚不亏| www.0143.cc-彩色的造句子一年级| www.cz30.com-湖北快三官方手机版| www.k90.biz-人人彩票中奖福地| www.60nz.com-愽马彩票下载| www.230226.com-中国福利快三| www.308091.com-7星彩开奖直播| www.393956.com-福彩在手机上怎么买| www.717491.com-彩铅拓印画-| www.811047.com-彩笔生花-| www.881632.com-名气最大的黑彩平台| www.35327.cc-江苏快三红包群| www.010938.com-网彩开售吗-| www.121720.com-天天竞彩足球| www.201949.cc-彩票投注站-| www.288715.com-竞彩5700万大奖| www.87744.com-博彩属于诈骗吗| www.166846.com-uu快三技巧-| www.318216.com-开奖最快的彩票| www.398585.com-时时彩肋赢官方| www.733899.com-福彩3d几天开一次| www.89840.com-彩票投注额计划| www.rl24.com-体育彩票快乐十分| www.22pz.com-159福利彩票| www.341.in-色彩画简单-| www.5566.la-马来分分彩计划| www.604937.com-体育彩票旗舰店贴吧| www.757778.com-中彩网信誉-| www.906275.com-非法经营黑彩什么罪| www.978329.com-混凝土可以做成彩色| www.yl70.cc-南洋彩票-| www.321.red-金巴黎彩票平台| www.11119.com-中福彩票平台怎么样| www.015430.com-七星彩500走势图| www.85591.cc-顶呱呱彩票-| www.069960.com-温州快乐彩走势图| www.139041.com-同城彩票网站| www.966550.com-彩票开奖结果| www.cai3450.com一分时时彩骗局| www.qe63.com-彩票77原版-| www.887376.com-下彩彩票官网下载| www.968527.com-英国有什么彩票| www.cai7022.com大马彩票-| www.705813.com-发彩app是真的吗| www.795422.com-新加坡天天彩资料綱| www.898289.com-七星彩电动车被偷码| www.962618.com-大发彩票手机版下载| 网易彩票www.562602.com| www.9862.cn-中国古代彩画分为| www.96596.cc-泰国彩票如何中奖| www.088617.com-彩吧彩票单双大小| www.684029.com-49彩票集团风控| www.771767.com-重庆7时彩是什么| www.888974.com-彩店宝提现不好使| www.953514.com-竞彩奖金怎么计算| www.999395.com-蓟彩芝演过的警匪片| www.ei63.com-高频彩犯法吗| www.wt68.com-中国彩吧网一| www.784102.com-粤彩11选5小助手| www.63da.com-3d彩民乐图库| www.2451.org-spss彩票-| www.7938.cc-彩宝知识大全| www.6556.cc-彩87彩票app| www.41040.com-福彩3d杀码村| www.20tt.com-买彩票中奖几率| www.1382.net-福利彩票40万个税| www.221372.com-彩票软件破解论坛| www.334911.com-江苏快三不同号推荐| www.514505.com-吉林快三2同号规矩| www.619190.com-幸运五星彩有官网| www.701189.com-胜负彩对阵表| www.778420.com-精彩音乐汇下载| www.880700.com-如何做网上彩票代理| 三星娱乐www.sxyl8.com| www.583.cn-如何看待彩票套彩| www.5643.com-第19009期体彩| www.16861.com-彩票破解器是真的吗| www.019442.com-贵州体彩兑奖中心图| www.126759.com-菠萝彩论坛区| www.5668.gg-大丰彩票网9.9| www.03394.com-彩票22-| www.63301.com-飞彩体育网-| www.358631.com-梦见买数字彩票中奖| www.592183.com-彩票318网站| www.687720.com-福彩3d模拟器| www.772172.com-时时彩后三组六回血| www.897552.com-混合过关竞彩篮球| www.968284.com-玩彩票的微信群号码| 8号彩票www.81520a.com| www.fp42.com-足球彩票500万| www.zm22.com-福彩3b彩吧论坛| www.32ap.com-彩虹六号可达鸭头像| www.339.space-色彩简介-| www.150114.com-广东体彩中心官网| www.252094.com-中彩网论坛-| www.331674.com-彩票官网开奖号码| www.408722.com-大牌彩妆品牌| www.333358.com-豪彩vipapp-| www.458811.com-全彩漫画之大鲸| www.557075.com-阿里彩票和云霁科技| www.661611.com-乐彩投资计划| www.603527.com-山晋福彩双色球开奖| www.688718.com-最新版彩29app| www.757649.com-二分彩是正规的吗| www.819365.com-彩要怎样中大奖| www.880895.com-77彩票网-| www.936621.com-足彩进球彩玩法介绍| www.978040.com-猫彩铅画-| www.cp883.cc-刷彩票挣钱可靠吗| www.pb39.com-天津11体彩-| www.10lj.com-七星彩专家彩宝贝| www.200087.cc-体彩排列三开奖结果| www.03980.cc-十四彩网站-| 华夏彩票www.hx1183.com| www.33619.com-91彩神合法-| www.012907.com-七星彩最新-| www.085712.com-福彩自助下载| www.156437.com-中国体育竞彩足球| www.222773.com-五分快三内部计划| www.2512.top-51彩虹空间登录| www.15415.com-分分时时彩前三预测| www.68679.cc-至尊彩官网-| www.026101.com-十分彩玩法-| www.089357.com-360彩票网走势图| www.159213.com-彩八仙安卓版| www.221527.com-瑞彩祥云倒闭了吗| www.285766.cc-香港快三官方网站| www.427910.com-鸿彩网充值-| www.545936.com-怎么样申请彩票站| www.744363.com-彩宝网老版本| www.796417.com-今日彩票谜语| www.859911.com-体彩排列3d开机号| www.910827.com-英国彩票怎么查询| www.963770.com-彩虹羽泉歌词| 500彩票www.66653k.com| www.hl17.com-今日福彩3d字画| www.vx09.com-玩快三赚钱的| www.13xg.com-百世子彩票软件| www.859969.com-澳客赢家彩票手机版| www.921662.com-大发时时彩5码计划| www.984279.com-三不同福利彩票规则| www.ul8.com-彩票开奖七乐彩| www.033748.com-彩川ひなの好看的片| www.313610.com-彩票兼职群-| www.396760.com-福彩官网3d返奖率| www.031416.com-福利彩票是不是骗局| www.656305.com-计彩票计划网| www.767888.cc-旺彩3d高手预测| www.925182.com-彩代表什么生肖| www.975074.com-湖南彩控网快乐十分| 500彩票www.396477.com| www.886126.com-下载香港彩库宝典| www.964897.com-淘宝卖家送彩票| www.cai0909.com河南快三开奖走势图| www.00ic.com-七星彩直选一注推荐| www.6819.biz-新浪彩票图表频道| www.558181.com-澳门博彩在线游戏|