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.47vl.com-彩票技术书-| www.6158.in-如意彩票网站靠谱吗| www.20080.com-东营体彩中足球彩票| www.85370.com-湖北红快三遗漏| www.031335.com-爱乐彩app倒闭了| www.282572.com-老彩民怎么选号的| www.474891.com-246天下彩客| www.625779.com-快开彩票为什么调整| www.852111.cc-求彩票号码咒语| www.059279.com-k彩测速地址| www.213120.com-黑彩有哪些-| www.362370.com-彩票角少一块| www.539406.com-彩票以后的发展趋势| www.682994.com-我怎么才能中彩票| www.820944.com-山东彩涂板今日价格| www.949996.com-天天彩票-| www.at40.com-一分钟一次彩票| www.4yn.com-马来西亚彩虹球马陆| www.611.live-北京时时彩预测软件| www.12289.com-中国体彩摇奖中心| www.073739.com-qq怎么购买彩票| www.150296.com-彩83彩票官网| www.233763.com-三的开机号今天福彩| www.976447.com-长春市福利彩票领奖| www.cp6236.com-500彩票-| www.845621.com-369官方彩票网| www.955135.com-彩票信用网改单技术| 金冠彩票www.49956o.com| www.hi53.com-彩票手机版-| www.4668.biz-龙源国际彩票骗局| www.9988.live-河北体彩网大乐透| www.50502.com-808彩票安卓版下| www.95841.com-福利彩票的发行原则| www.075756.com-彩32vip-| www.155165.com-金沙送388彩金| www.237298.com-浙江体育彩票网页版| www.310533.com-体彩排三山东论坛| www.383237.com-19039期体彩| www.495398.com-彩漂液对孕妇的危害| www.566238.com-aa彩票下载-| www.635256.com-七彩电影院八面通| www.701626.com-中国彩软件下载| www.785293.com-吉快三遗漏-| www.855145.com-澳客彩票网官网网址| www.159965.com-易彩堂彩票主页| www.270752.com-新版彩票77-| www.572385.com-竞彩网手机-| www.654469.com-景德镇福利彩票地点| www.991535.com-彩票输了怎么办| www.pe9.cc-彩6安卓-| www.qi29.com-好彩一今晚开奖结果| www.s54.club-朋友玩时时彩| www.800508.com-手机版卓易彩票下载| www.916903.com-竞彩足球360彩票| www.995763.com-竞彩单场比分| www.iu45.com-竞彩足彩胜负平| www.z11.org-福彩山东那个台开奖| www.93ax.com-复式彩票号码怎么看| www.6297.biz-福彩3d一点通今天| www.47636.com-好彩妹好朋友| www.019503.com-彩票五分快三计划| www.116569.com-湖北体彩网首页| www.384111.com-时时彩接口-| www.512197.com-超真实的彩铅画| www.576794.com-关于彩票的图片大全| www.29kr.com-查体彩开奖号码查询| www.0619.com-仿真彩票生成| www.6886.in-足彩冷门推荐| www.13431.com-足彩计算方法| www.67869.com-博彩国际平台| www.022904.com-体育彩票5排| www.088672.com-海南省体育彩票竞彩| www.155284.com-足彩知识-| www.218311.com-福彩快三官网合法吗| www.280479.com-北京时时彩投注软件| www.351678.com-在亚洲彩票上输钱| www.429555.com-金利彩票简介| www.521160.com-网上彩票套路| www.579422.com-七彩世家-| www.85014.com-聚象彩骗人套路| www.037370.com-河北快三和值表奖金| www.113924.com-体育彩票360| www.170962.com-河北快三推荐号和值| www.243334.com-彩票是不是一个骗局| www.311109.com-湖南动物彩票开奖| www.380064.com-下载腾讯60秒彩| www.509079.com-华宇时时彩平台| www.568956.com-幸运种福彩-| www.632852.com-茗彩彩票是不是骗局| www.756399.com-58彩票黑钱了| www.947791.com-福彩什么时候开| 辉煌彩票www.2875j.com| www.56114.com-六开彩怎么才算中奖| www.093061.com-彩色混凝土路面工艺| www.198523.com-彩票网快3选号助手| www.314492.com-中国竟彩足球计算器| www.449594.com-豪彩彩票3d-| www.570830.com-七彩山鸡苗报价| www.672618.cc-七星彩最准十专家| www.782972.com-腾讯分分彩坑人| www.890812.com-青岛市福彩中心| www.981303.com-竞彩官电脑版| www.hm94.com-广西福彩快三| www.q69.com-中国福利彩票如何玩| www.949662.com-快彩可以相信吗| www.65dj.com-易彩福地怎么打不开| www.17225.cc-99彩票送金-| www.91681.cc-炫彩打字联盟骗局| www.091476.com-703彩票链接| www.721555.com-大家都在哪买足彩| www.834966.com-焕彩美白祛斑霜| www.932835.com-黑彩预测网站| 杏彩www.00840f.com| www.b90.org-彩票中奖新闻生成器| www.67598.cc-彩票中奖后人身安全| www.111674.com-彩票七天乐下载| www.180772.com-今期福彩3d字谜| www.280362.com-彩app送彩金| www.410101.com-玩赚彩票旧版| www.506777.com-王阳彩票-| www.579394.com-网上打彩票是骗局吗| www.647011.com-彩票工具软件破解| www.712271.com-杨颖结婚彩礼是多少| www.789497.com-中国竞彩网推荐| www.866997.com-时时彩排名计划软件| www.933158.com-玩快三一年了| www.984635.com-玩快彩王输了一万多| www.qo1.cc-中奖彩票去哪里兑奖| www.xr66.com-彩票靠运气吗| www.84uu.com-足彩看盘术语| www.568802.com-彩票中心通知| www.735066.com-专家说彩网-| www.56jg.com-彩票3d百位振幅| www.2799.net-关于彩票的图片大全| www.801276.com-下载彩猫彩票| www.ci69.com-山西体彩快乐十分| www.2wc.com-彩票178-| www.4416.vip-网络彩票赛车直播| www.164258.com-体彩nba过关| www.425900.cc-赢彩彩票软件| www.566513.com-河南福彩下载安装| www.888827.com-今晚七乐彩机选号码| www.578010.com-东北快三多少期| www.687557.com-加微信、拉人玩彩票| www.801101.com-709旧版彩票| www.909666.com-三分彩开奖从哪查询| www.987617.com-快三单双算法教程| www.lc21.com-购彩是啥-| www.31cj.com-时时彩0369技巧| www.02595.com-体彩福彩真实性| www.72535.com-体彩38期开奖| www.076233.com-中国福利彩票中心| www.182782.com-北京今天快三| www.282404.com-168彩票开奖网| www.376808.com-福彩36选7中国| www.511712.com-神州五分彩开奖结果| www.771738.com-体彩店转让合同| www.937216.com-最新版五福彩app| www.im30.com-广东福彩电子投注单| www.97dc.com-人生没有彩排句子| www.5406.cc-彩12彩票下载安装| www.26926.cc-四川福彩手机报| www.95228.cc-平价国货彩妆| www.137940.com-2019我爱彩票|