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.798155.com-四川快三下载| www.932772.com-官方购彩软件| www.996198.com-足彩十四场即时比分| www.bj67.com-甘肃省快三开奖号码| www.353989.com-澳客网彩票官网首页| www.936093.com-速8彩票真假| www.51dw.cc-足彩比分app下载| www.025043.com-彩票5app下载| www.137412.com-竞彩任选九开奖时间| www.264655.com-网络彩票新规定| www.338514.com-湖北体彩彩票官网| www.688327.cc-福彩3d预测讨论群| www.827697.com-世界杯彩票去哪里买| www.910505.com-看彩72变双色球| www.28440.com-彩票计划群里的老师| www.4780.me-彩票脏了能兑奖吗| www.165085.com-中彩在线总经理| www.73er.com-帝之彩美容学校评价| www.409877.com-米彩和昭阳第一次| www.772998.com-彩票代购网站的图片| www.893801.com-安徽快三平台下载| www.993470.com-足彩任选9复式技巧| www.mx16.com-中彩网怎么注册| www.353350.com-京彩挂机群-| www.416813.com-扬州彩虹冰淇淋机| www.590212.com-星彩网怎么下载| www.0123.space-彩色的东西-| www.022205.com-河南福彩幸运彩走势| www.134508.com-南通体彩网-| www.223215.com-3d福彩中心开机号| www.303896.com-一分快三稳赢公式| www.302031.com-5分快三开奖号码| www.81tn.com-彩票双色球29期| www.672512.com-足彩推荐分析app| www.5917.xyz-体彩中心张弛籍贯| www.52og.com-招远彩礼标准| www.1594.net-懂彩帝彩票-| www.716889.com-初学者彩铅画画教程| www.813828.com-快三黑幕-| www.892367.com-九州彩票下载安装| www.962049.com-超级快三精准计划| www.ab7.cc-内蒙快三开奖一定牛| www.139414.com-共享彩票靠谱吗| www.811484.com-福彩3d万能四码表| www.620577.com-彩票开奖93期| www.702686.com-绵阳盛澳竞彩| www.20ng.com-彩票头奖在哪领| www.0517.wang-炫乐时时彩-| www.579672.com-巨龙国际彩票| 幸运彩票www.5095i.com| www.204411.com-彩票极速快3开奖| www.551846.com-福彩3d老师-| www.671501.com-福彩三弟独胆预测| www.782733.com-甘肃福彩网中奖信息| www.917066.com-彩票33群-| www.986559.com-皇冠足彩网-| www.ko16.cc-体育篮球竞彩网| www.499654.com-福彩三十六选七| www.974491.com-一分快三可以么| www.68eu.com-足球竞彩网258| www.540590.com-福彩校验码-| www.732655.com-彩票三d和尾图| www.77128.com-体彩分析预测| www.092355.com-足彩串关玩法表| www.05145.com-时时中彩-| www.074308.com-彩富天下网-| www.82552.cc-彩票走势图图片| www.119503.com-发彩网是怎么赚钱的| www.xp01.com-澳门快三-| www.996030.com-网易彩票开奖手机版| www.bl14.com-神州彩票app| www.wr78.com-掌上购彩七天彩| www.153288.com-大公鸡七星彩奖表| www.2663.site-网上哪里买竞彩| www.006828.com-彩金宏辉游戏机厂家| www.905318.com-竞彩足球推荐骗局| www.977192.com-河南各地彩礼钱| www.xn0.cc-贵州体彩十一| www.290111.cc-大赢家彩票是真的么| www.355494.com-旺角彩票网址| www.722792.com-好彩票正规网站| www.785516.com-彩家园平台可靠吗| www.840890.com-竞彩店主举报外围| www.892316.com-快乐彩22迭1| www.956018.com-乐彩双色球字谜总汇| www.998281.com-福彩实业有限公司| www.i49.com-中彩吧一更懂彩吧| www.376837.com-福彩36期开奖号码| www.692033.com-中国福彩中心电话| www.814587.com-体彩招聘-| www.952645.com-幸运彩票有规律吗| www.458089.com-四位数福利彩票| www.579376.com-彩票谜底-| www.361124.com-彩吧彩报图第五版| www.443466.com-中国福彩3b彩图| www.635595.com-彩宝哪个品牌好| www.753512.com-彩票守号十二年| www.862816.com-当天全部彩票开奖| www.958829.com-19年福彩初几开售| www.cp8698.com-人人彩票网-| www.9812.com-彩票数据大全| www.585299.com-存一块送18元彩金| www.2680.com-牛蛙彩彩票开奖现场| www.760348.com-彩票团队人工计划| www.921044.com-彩票查询七星彩开奖| www.cp5776.com-戒掉彩票的最好办法| www.27py.com-彩票免费天天送| www.65996.cc-体育彩票选号助手| www.752014.com-中彩了app-| www.874850.com-拉菲国际彩票| www.968292.com-河南福彩3d申奖号| www.qq65.com-七乐彩没人敢买了| www.1548.cm-彩票网走势图首页| www.5992.biz-19002期足彩| 凤凰彩票www.77803z.com| 发彩www.50732w.com| www.859418.com-彩票山东十一选五| www.980362.com-体彩篮球竞猜规则| www.pw96.com-彩民彩票提现不了| www.52xq.com-福彩停止销售时间| www.783580.com-彩吧vip首页登录| www.9jr.com-七星彩趣味图网址| www.322200.com-福利彩票在线投注| www.393221.com-时时彩全包法| www.1576.vip-粘彩宝是什么平台| www.373725.com-好彩香烟爆珠蓝莓味| www.611820.com-雨后彩虹说说| www.0899.cn-华夏亿成彩票平台| www.65421.com-福彩2018150| www.978557.com-福建体彩票网| www.ch98.cc-分分快三开奖记录| www.358667.com-体彩有几个号码| www.19926.cc-免费的彩票网站大全| www.00947.com-凤彩网首页彩吧| www.413141.com-五分彩真的能赚钱吗| www.935717.com-幸运彩票破解app| www.cai4344.com快三胆拖玩法及奖金| www.057702.com-3d福利彩票怎么玩| www.191915.com-福彩快三和值表| www.665083.com-欢迎使用078购彩| www.xe32.com-3d彩票跨度和值表| www.097756.com-内蒙古快三微信群| www.713673.com-时时彩后二从不连挂| www.821849.com-乐彩网可以买彩票吗| 500彩票www.342177.com| www.5714.biz-体彩七位数能中多少| www.56851.cc-香港彩乐网网址| www.97928.cc-即开型彩票返奖率| www.5103.cc-买彩票机选号吗| www.79655.com-339彩票官网| www.050898.com-重庆时时彩5分| www.122999.cc-梅州彩票中奖新闻| www.223630.com-e球彩走势图进球数| www.523945.com-e彩票网站-| www.602787.com-竞彩推荐稳-| www.875942.com-财神5分彩开奖结果| www.381704.com-泰安彩票店转让信息| www.720155.com-七星彩大奖直码中| www.541194.com-江苏快三投注站| www.279338.com-彩票qq群是真的吗| www.733566.com-越南时时彩走势图| www.429075.com-体彩排5走势图| www.66ut.com-彩巴巴彩票-| www.ub3.cc-甘肃快三玩法|