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天

知道了
1分快三 www.361732.com-博大彩票是骗局麻| www.370076.com-vivox23炫彩| www.5578.pw-d8彩票网-| www.45624.com-上海福彩网正规网站| www.708031.com-幸运快三预测大小| www.050091.com-做个黑彩庄-| www.52vv.com-瑞彩祥云是真的吗| www.607227.com-网上彩票加盟条件| www.731212.com-金誉彩票网址| www.885820.com-福利彩票选号机| www.984953.com-彩运网骗局解析| www.hs65.com-海南快三走势图| www.4xx.com-职业竞彩玩家| www.67bq.com-竞彩让球平技巧| www.0751.wang-福彩三地布衣图库| www.494054.com-一定牛胜负彩推荐| www.712726.com-网赌中福一分快三| www.964106.com-买彩票圈钱-| www.gp34.com-36选7好彩三开奖| www.14bn.com-最新彩金宏辉| www.96802.com-竞彩中奖概率最高| www.276100.com-爱彩是合法的吗| www.478819.com-乾特商城火箭彩票| www.616496.com-7彩网安全吗| www.778244.com-竞彩早上几点兑奖| www.925175.com-彩有是什么意思| www.cai6606.com快三技巧玩法宝典| www.b01.net-十字彩赌博怎么玩的| www.88gn.com-体彩大透开奖| www.44st.com-a7娱彩官网注册| www.1352.vip-苹果pk彩票正规吗| www.812.pw-彩票计划软件安卓| www.312512.com-怎么开一个彩票网站| www.484804.cc-福彩3d杂六-| www.576439.com-福利彩票倍数和注数| www.684307.com-彩票代投是骗局揭秘| www.775014.com-快三245出完出啥| www.852453.com-c27彩票下载| www.961483.com-大奖彩票到底怎么样| www.cai8123.com今天快三开什么| www.tq09.com-福彩快三交流群| www.253246.com-广东好彩一预测| www.380051.com-体彩开奖时间| www.9cb.com-七星彩沼泽怎么办| www.4529.me-七星彩19028| www.us42.com-中福快三骗局揭秘| www.397937.com-澳门全天彩骗局| www.169010.com-湖北快三走势图今天| www.025891.com-德信彩票网007| www.367378.com-足彩胜负彩姜山| www.356117.com-微信分分彩合法不| www.486981.com-体育彩票如何选号| www.575883.com-6288彩票靠谱吗| www.650723.com-陈飞虎水彩写生视频| www.730638.com-吉林快三倍投方案| www.353337.com-广东新粤彩每期报纸| www.449815.com-猫扑宝乐彩下载| www.615900.com-彩609彩票-| www.722266.cc-舟山飞鱼彩票怎么玩| www.798016.com-足彩14场开奖公告| www.872727.com-天天爱彩票合法吗| www.982558.com-同城彩票下载| www.mj99.com-青海快三预测一定牛| www.22968.cc-中彩那天课文作者| www.306.cx-乐彩33软件可靠吗| www.gr24.com-新彩吧字谜-| www.i49.win-乐彩论坛h5版| www.54dk.com-彩吧助手违法吗| www.2045.tv-建彩票平台-| www.7669.top-体彩标志五色意思| www.26161.cc-带彩虹的成语| www.823456.cc-易拉罐彩涂-| www.899829.com-下载彩81彩票软件| www.976892.com-漳州彩礼-| www.cai2311.com快3彩票网站| www.ih66.com-体彩app-| www.zz27.cc-太原体彩店如何申请| www.27yy.cc-福利彩票注册| www.946.date-极速快三中奖规律| www.53780.com-和盛娱乐时时彩平台| www.057868.com-福利彩票、彩吧图| www.497857.com-金利彩票手机版官网| www.638300.com-色彩图片风景| www.811826.com-彩坛至尊六合网| www.950594.com-体彩胆码预测| www.cai9800.com河南快三连线走势图| www.w77.biz-足彩310的意思| www.167239.com-快三计划导师骗局| www.251786.com-台北快三一分钟开奖| www.6885.com-大玩家彩票攻略| www.71589.com-网络彩票作弊器| www.253875.com-青海快三遗漏号码| www.346788.com-李彩桦单身部落吻戏| www.425600.com-1050彩钢板板型| www.497365.com-首彩灰皮诺白葡萄酒| www.094504.com-竞彩足球14场| www.493698.com-网上私彩怎么赚钱的| www.155045.com-胜负彩开奖奖金结果| www.236021.com-竞彩网500比分| www.877315.com-彩票五行属什么| www.954470.com-体彩彩票软件哪个好| 凤凰彩票www.77801c.com| www.21.gg-海南私彩庄家是谁| www.93hv.com-小彩牛彩票靠谱吗| www.3354.me-福彩中彩股份| www.897553.com-竞彩足球计算器| www.978284.com-广元彩钢厂-| www.yi43.com-彩票榜计划官方下载| www.897227.com-竞彩足球胜负平开奖| www.966707.com-宝马彩票安卓下载| 500彩票www.652251.com| www.kc75.com-168彩票靠谱吗| www.zx23.com-东方亮彩怎么样| www.611028.com-梦见猪彩票买几号| www.684659.com-查福彩3d中奖| www.755985.com-查7星彩开奖结果| www.865857.com-艾彩论坛登录| www.914100.com-全民中彩票快三| www.964424.com-福彩中心幸运快三| 福彩www.2109l.com| www.ch27.com-三分快三能玩么| www.sm89.cc-世界杯足球彩票规则| www.pj79.com-幸运五星彩开奖号码| www.2uw.cc-时时彩上瘾了| www.54vz.com-南宁福彩自助投注机| www.198777.com-彩票玩法介绍大全| www.150109.com-国民彩票手机皈| www.997450.com-浙江体彩11选| www.gr97.com-快三网赌-| www.c64.mobi-百宝彩怎么注册啊| www.059810.com-老彩民快三经验| www.017953.com-彩投彩票app| www.078037.com-中福彩票代理| www.129700.com-南京彩票店吧| www.428655.com-彩博网站大全| www.577746.com-昨天福利彩票中奖号| www.gl3.com-彩票店转让能过户吗| www.li62.com-306手机彩票| www.yv31.com-香港中彩宝典| www.59kj.com-体育彩票七星彩定位| www.270037.com-快三速查表图片| www.277.in-ac彩妆价格表| www.5073.vip-长沙体彩地址| www.11660.cc-彩乐网最新软件| www.wq0.com-彩票开奖号码公告| www.tz02.com-彩票最搞笑宣传语| www.12py.com-江苏福彩i5选5| www.802543.com-彩坛皇后胆码| www.390299.com-大地彩票官方彩票网| www.176893.com-单机快三-| www.584054.com-江苏体彩即开订票| www.660626.com-金彩网怎么进不去皮| www.759562.com-app中华彩票| www.832297.com-七彩视界最新版本| www.936613.com-中国福彩自助彩票机| www.987142.com-辽宁大连快三查询| www.fv20.com-英国时时彩-| www.b06.net-东方彩票网投| www.232111.com-大发快三诀窍| www.363350.com-重彩画-| www.464986.com-懂球帝足彩怎么领奖| www.440133.com-彩8彩票怎么样| www.464708.com-基诺型彩票高频吗| www.561755.com-彩神计划账号|