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天

知道了
大发快3 www.062625.com-牛彩3d图谜汇总九| www.207725.com-喜盈门彩票app| www.300991.com-排五彩票九宫图| www.386567.com-韩国15分彩app| www.563891.com-福彩3d今日图迷| www.651928.com-刷彩平台-| www.763188.com-广西淘宝快三体彩| www.867152.com-体彩六码最大遗漏| www.948496.com-体彩福利彩票双色球| 网易彩票www.36788g.com| www.je67.com-3d福利彩票下载| www.o09.com-体彩三句话试机号| www.56gp.com-手机版彩票刮刮乐| www.1184.xyz-数字型彩票演算规律| www.10040.cc-齐鲁七乐彩30选7| www.61133.com-乐赢彩票网站| www.036982.com-足彩让主负什么意思| www.131415.com-河南双色球中奖彩票| www.220041.com-体彩排列三预测网| www.306198.com-彩6app官网下载| www.384799.com-状元彩票网平台| www.551417.com-体彩排五合买网| www.644119.com-大千娱乐是黑彩吗| www.740014.com-品彩-| www.821883.com-七星彩30期走势图| www.901910.com-四川省福彩中心地址| www.975426.com-福快三-| www.b64.me-三分时时彩时间| www.41mm.cc-哪些彩票网站送彩金| www.880.cm-彩票怎样止损| www.5653.wang-马来西亚福彩字光| www.17281.cc-北京三快彩票| www.66183.cc-御彩轩计划网页版| www.079063.com-彩票专用计划网| www.153387.com-重庆时时彩包胆技巧| www.260809.com-3d中彩娱乐-| www.344453.com-甘肃彩票开奖查询| www.438984.com-竞彩足球选4场| www.539287.com-体彩机器能过户吗| www.664256.com-下载天津爱彩乐网站| www.749666.com-彩票3-| www.825385.com-竞彩猫合买吧| www.905652.com-yy彩票登录| www.973502.com-有关彩虹的歌词| www.fl29.com-各种釉彩大瓶简介| www.yk81.com-网上买彩票的app| www.27vj.com-分分彩什么玩法最稳| www.0402.org-彩票大赢家排列五| www.7301.cn-彩虹六号电话妹壁纸| www.27299.cc-彩票投注机键盘| www.72wk.com-梦见买很多倍的彩票| www.5447.vip-彩38领导者app| www.30443.com-七星彩是体育彩票吗| www.76884.com-老彩民快三-| www.043195.com-富贵彩票真实吗| www.229499.com-7彩洗墙灯-| www.315084.com-彩35元-| www.397035.com-彩票脚本-| www.555381.com-重生报电脑彩| www.633123.cc-竞彩篮球让分怎么玩| www.713311.com-体彩快报有七星彩| www.798827.com-福彩快3每天几期| www.878657.cc-体彩网七星彩解码| www.997231.com-快三二不同13| www.ax48.com-体彩基诺-| www.uh53.com-网上的彩票是真的| www.14pb.com-网络竞彩平台合法吗| www.655.tv-分分彩输钱了怎么办| www.5226.xyz-宝马派彩是什么意思| www.945061.com-彩票容错预测专家| www.cb8.com-广西快三推测| www.su76.com-快三倍投什么意思| www.46jw.com-北京pk10彩票网| www.1194.com-时时彩走势k线分析| www.16217.cc-福利彩票3d定位胆| www.66312.cc-排3试机号乐彩网| www.077883.com-福彩充值可靠吗| www.157355.com-91竞彩之家官网| www.537323.com-彩票总类-| www.631104.com-下载新濠环彩网| www.711055.com-135345赢彩天| www.791041.com-三分彩技巧规律| www.871573.com-福彩双色球计划软件| www.971893.com-九万彩票改什么网址| www.je3.com-河南快三电视走势图| www.tt95.cc-万豪福彩苹果版下载| www.38ki.com-8亿彩真的赚钱吗| www.1317.wang-106官网彩色版| www.8007.pw-休彩足球-| www.28935.cc-彩票是否合法| www.77128.com-体彩分析预测| www.028388.com-彩票能用密码兑奖吗| www.107090.com-买彩黑客-| www.174524.com-哪些省份有快三| www.302409.com-快三走势图怎么看透| www.374992.com-3d彩票计算器下载| www.686566.com-彩500网址-| www.766300.com-15分钟开奖的彩票| www.866860.com-篮球彩票app下载| www.932032.com-中彩网带单盈利| www.985431.com-竞彩网三地开奖直播| www.fx3.com-江苏爱彩乐快三| www.pe49.com-众彩之家下载| www.55.vip-甘肃快三遗漏图表| www.66vx.com-七乐彩每天几点开奖| www.1638.in-时时彩四星缩水软件| www.9841.xyz-怎样投诉福彩中心| www.50855.com-幸运天天中福彩| www.92800.com-在微信上能买福彩吗| www.049477.com-黑彩流水返点| www.147133.com-掌中彩网址-| www.234084.com-体彩5d开讲奖结果| www.305032.com-足彩结果查询| www.369974.com-酷彩假货怎么分辨| www.461599.com-牛彩网图迷总汇大全| www.548238.com-立彩软件苹果版| www.668057.com-cc国际彩票-| www.739262.com-彩票杀号定胆| www.807386.com-彩博士计划软件官网| www.878702.com-彩神通内部四码代理| www.993690.com-彩票靠谱计划| www.dk7.com-怎么玩快三-| www.mx78.com-彩票大数据定律| www.1ir.com-玩彩票开两号对压| www.52fw.com-丰彩漆乳胶漆| www.723.website时时彩任选二怎么玩| www.4567.me-天天爱彩票怎么提现| www.9568.bid-3d彩票猜谜语| www.71796.com-今日银海彩票工作室| www.029849.com-国民彩票下载手机版| www.104708.com-犀牛彩票代理注册| www.166883.com-快三单期计划| www.268449.com-利彩工具彩吧助手| www.956354.com-彩票学-| www.31121.com-彩票小助手官网| www.556291.com-为什么买私彩总是输| www.6kp.com-数学算法买彩票3d| www.57ii.com-360彩票购彩| www.828.com-体彩开奖直播平台有| www.4270.vip-87彩店云登录| www.8985.loan-彩吧论坛千禧试机号| www.59744.com-彩虹哥cf买号官网| www.071339.com-红8彩票app-| www.129510.com-中奖彩票软件下载| www.193823.com-彩民论坛高手| www.255239.com-网络福彩3d骗局| www.320077.com-二元彩票-| www.380128.com-彩鸾归令的意思| www.557512.cc-微信彩票在哪里添加| www.608901.com-彩宝贝官网下载| www.669292.com-下载够力七星彩长条| www.732367.com-许昌彩礼2017| www.796483.com-9彩票网站-| www.861028.com-字谜十藏机一彩吧图| www.917438.com-必赢彩票论坛| www.969944.com-燕赵福彩网网页版| www.rd34.com-众博时时彩-| www.u57.club-九九彩吧-| www.38dx.com-时时彩大全-| www.789.gg-海南彩票规律福连得| www.3873.xyz-竞彩交易量合成交比| www.8527.cc-易彩集团软件下载| www.47670.com-买彩票中大奖的八字| www.85387.com-5oo彩票网下载|