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天

知道了
百盈PK10 www.jp12.com-河北快三形态开奖| www.214.vip-排列五彩票大赢家| www.6887.net-彩票负盈利合作| www.44080.com-中彩游戏-| www.035886.com-梦想彩票站官网| www.284916.com-体彩481开奖通知| www.442003.com-香港十分彩玩法| www.551401.com-粤彩网诈骗| www.671127.com-幸运彩票外挂| www.768839.com-时时彩最高倍率网站| www.906718.com-雅彩彩票正规吗| www.982098.com-彩彩app下载| www.hg03.com-甘肃快3购彩小贴士| www.i61.bid-安装南方双彩网| www.55mc.com-pc蛋蛋彩票app| www.1583.cn-彩票收藏交流群| www.36392.cc-福利彩票几个号码| www.90210.com-恒大彩票赢钱犯法吗| www.080933.com-大吉网买彩票| www.163896.com-彩票别害人了| www.292837.com-王牌彩票下载app| www.935091.com-星空彩票官方| www.cp61.cc-上海天天彩走势图| www.d22.net-彩票开奖7位数今晚| www.44op.com-中国竞彩足球360| www.3156.xyz-玩彩赚钱-| www.9331.loan-诺基亚彩球滑梯| www.82297.com-彩票走势图-500| www.039904.com-新生彩票官方网站| www.143822.com-福彩迷是什么平台| www.226688.cc-易彩票下载苹果| www.307706.com-派彩481-| www.374377.com-河南彩票大奖谢俊峰| www.564440.com-东方彩票平台注册| www.641060.cc-体育彩票广告标志| www.750408.com-福彩保底-| www.824160.com-广州三彩实体店地址| www.901532.com-福彩3d今天出奖号| www.970869.com-腾讯分分彩开奖号码| www.et76.com-快三追号计划软件| www.xw00.com-天津福彩一定牛| www.23xg.com-盛彩注册-| www.977.red-七星彩中俩号多少钱| www.6815.biz-四季彩中秋| www.21385.com-体彩欢乐大乐透玩法| www.66578.cc-福利彩票44期3d| www.054499.com-众赢彩票是骗局吗| www.139198.com-天天彩票助手推荐| www.220410.com-三分时时彩破解软件| www.299306.com-彩票怎么看走势入门| www.379811.com-黑客更改彩票| www.538976.com-快三如何选号| www.627306.com-篮球彩票让分规则| www.703097.com-福彩预测最新最准| www.783532.com-旧版爱乐透彩票图表| www.863197.com-彩票挂机软件怎么用| www.933924.com-彩票网站代理佣金| www.990887.com-4s彩票论坛-| www.bn2.com-湖北快三时间| www.pf07.com-1分快三彩票网址| www.04gl.com-手机玩快三app| www.75eh.com-91竞彩联盟寄居蟹| www.1607.cc-505彩票下栽| www.9889.wang-什么部门管彩票站| www.54108.com-篮球博彩app| www.99287.cc-爱彩票是正规的吗| www.067688.com-三分时时彩是假的吗| www.135208.com-彩票担保人-| www.216731.com-彩宝网首页-| www.291209.com-苏州快三爱彩乐| www.365810.com-彩票刑事案件| www.461577.com-彩壹万app下载| www.552678.com-时时彩采集软件出租| www.710097.com-加网友教彩票| www.777012.com-免费下载彩六| www.887185.com-6hck模拟购彩| www.980498.com-两分钟开一次的彩票| www.sp0.cc-网彩投注代理平台| www.qx83.com-5分快三玩法| www.05uz.com-蜡质彩铅和蜡笔| www.74lw.com-五百万彩票苹果版| www.1329.com-七星彩往期开奖记录| www.9283.vip-七乐彩奖金二等奖| www.82106.com-968彩票app-| www.032395.com-十大彩票巨奖| www.108886.com-彩票统计学概率学| www.175353.com-快三软件免费下载| www.292302.com-uu快三谁开的| www.362067.com-群英会彩乐乐| www.445433.com-杏彩是大骗子| www.535054.com-福利时时彩玩法| www.650339.com-创意水彩笔画| www.733345.com-彩500vip-| www.803979.com-华人测速彩票合法吗| www.877764.com-福彩票3d黄金杀码| www.972075.com-豪门彩票-| 500彩票网www.922109.com| www.iy74.com-浙江省体彩走势图| www.zq03.com-足球胜负彩对阵表| www.23wr.com-盛彩彩票假的吧| www.882.pw-手绘日落彩铅画| www.4888.vip-足彩大数据分析| www.9925.me-新浪爱彩十四场投注| www.63589.com-今日竞彩足球唯彩| www.021720.com-福彩20选8走势图| www.089888.cc-体育彩票七位数唯一| www.151960.com-福彩双色球智能选号| www.257802.com-彩票屠龙概率多少| www.325831.com-福彩3d过滤缩水| www.392808.com-重庆竞彩彩客网| www.530056.com-玩彩票输光所有积蓄| www.610059.com-微信买彩票怎么扫码| www.676155.com-今日中奖彩票号码| www.749904.com-腾讯分分彩官网下载| www.813663.com-宁夏彩票最大奖| www.881994.com-01彩票合法么| www.986413.com-竞彩兰球比分直播| www.cai8807.com长春快三怎么玩| www.js54.cc-福利彩票官网手机版| www.zt69.com-竞彩篮球推荐玩法| www.20tb.com-福利彩票采集器| www.738.live-时时彩和值预测| www.4318.biz-鑫彩网的玩法| www.9289.org-重庆时彩违法吗| www.56644.cc-盈彩网登录-| www.007007.cc-河北快三三十期开奖| www.069522.com-双色球命中中彩专栏| www.129633.com-众彩彩票官方app| www.197809.com-乐彩3d论坛网| www.260830.com-竞彩足球500| www.327372.com-七乐彩的中奖概率| www.388552.com-数码迷彩图片| www.565559.com-成都体彩店申请条件| www.627598.com-新乐彩平台下载安装| www.689398.com-齐鲁福彩-| www.758380.com-双龙彩票app| www.868368.com-七星彩第二位走势图| www.932391.com-护肤彩妆视频加盟店| www.982402.com-分分时时彩开奖查询| www.km4.cc-江苏快三计划网址| www.no87.com-彩票专业在线选号器| www.y65.com-彩票真能中奖吗| www.47dl.com-竞彩店利润-| www.263.cc-体彩排列三藏机图| www.2953.biz-彩金狮子单机| www.7854.pw-网易十四场足彩预测| www.21963.com-彩票刷子群-| www.58355.cc-5分快三官网| www.062945.com-彩票挂机吧-| www.193198.com-韩国福彩-| www.255681.com-快三彩票平台送彩金| www.318185.com-360彩种大厅| www.376281.com-彩家园彩票-| www.518449.com-炫彩弹射ios| www.577073.com-好彩香烟有什么味| www.636565.com-特殊符号彩虹| www.732993.com-淮安市福彩中心| www.793708.com-彩票一夜暴富| www.858876.com-体彩33期开奖号| www.913200.com-彩客网怎么提现不了| www.966807.com-彩票双色球最近几期| 吉利彩票www.80065h.com| www.dg68.com-众赢彩票的骗局| www.sd42.com-时时彩走势分析软件|