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天

知道了
彩票123现在叫什么名字 www.110065.com-8亿彩票平台| www.254067.com-福彩61生肖-| www.343368.com-大连彩票兑奖中心| www.445062.com-义乌市福彩网网址| www.538592.com-中国福彩彩报网| www.722009.com-爱彩乐彩票官方登录| www.499058.com-彩票平台源码| www.336938.com-微博世界杯彩票| www.499954.com-微信充话费送彩票| www.661365.com-合买彩票中奖新闻| www.964436.com-竞竞彩比分直播| www.ax0.com-彩票快3走势图长春| www.rj40.com-爱彩彩票正规的吗| www.450385.com-彩美旬果迅雷链接| www.594199.com-优乐彩合法吗| www.698946.com-3d开奖结果乐彩网| www.789793.com-竞彩高手打法| www.880044.com-彩票时间修改通告| www.rt29.com-有没有中发彩票被骗| www.283811.com-vr十分彩开奖历史| www.445419.com-上海天天彩开出号| www.553439.com-突尼斯人彩票| www.633320.com-内蒙时彩开奖记录| www.715211.com-彩票多少钱要交税| www.800117.com-查看福彩票开奖查询| www.882697.com-鸿彩网是真是假| www.zd9.com-体彩排列五中奖号| www.tr60.com-宁夏快三算号神器| www.11yx.cc-七乐彩开奖结果如下| www.768162.com-互联网彩票最新新闻| www.883863.cc-有没有办法攻击私彩| www.968280.com-福彩现在能买吗| www.bu60.com-彩63彩票app| www.st75.com-临沂彩票孙老师| www.23wb.com-什么是掌中彩| www.3426.vip-66好彩网-| www.9991.in-福彩3d小鱼图迷| www.64822.com-建群卖体彩违法吗| www.028581.com-彩票黑客联系方式| www.110671.com-七星彩开奖图片大全| www.185938.com-怎么玩快三-| www.261532.com-大发快三网址注册| www.382643.com-胜负彩中奖图片| www.509136.com-北京快三营业时间| www.584736.com-中国最大的彩票软件| www.664796.com-福彩在线开奖视频| www.744053.com-福彩代购可靠吗| www.819570.com-彩票的利弊-| www.892816.com-彩票游戏软件大全| www.964207.com-彩票追加与加倍| 网易彩票www.596709.com| www.jg62.com-265彩票app-| www.e03.com-8足彩八串一| www.40zc.com-龙虎时时彩代理提成| www.3726.biz-福彩江苏基本走势| www.9739.me-826彩票官网| www.59329.cc-爱乐透彩票预测| www.022067.com-安徽快三直播| www.097195.com-福彩3d今天小鱼图| www.168935.com-内蒙快三内蒙古快三| www.283254.com-七星彩奖表安装| www.369561.com-旺旺彩有中奖的么| www.465234.com-三十六技赢足彩| www.553532.com-竞彩篮球推荐258| www.622288.com-河北快三漏选号| www.696789.com-彩票霸主骗局| www.778465.com-釉中彩餐具有毒吗| www.966375.com-福彩排到七-| 快彩www.81678n.com| www.gh42.com-辽宁体彩网11| www.xy83.cc-七星彩中奖彩票图片| www.20qv.com-1122全国开彩| www.0004.xyz-什么彩票是6位数| www.6423.vip-分分彩跟长龙技巧| www.18987.cc-粤十一选五爱彩乐| www.62563.cc-全民星彩-| www.038136.com-c9彩票app下载| www.125272.com-彩16ios-| www.197694.com-甘肃快三计划软件| www.273926.com-有没有香港时时彩| www.381474.com-7星彩号码-| www.502844.com-胜负彩任九胆拖| www.gg38.com-江西彩票中心| www.z38.top-彩神8导师带玩| www.713844.com-彩乐漂胜负彩| www.799779.com-今天福彩票开奖| www.876137.com-福利彩票去哪里兑奖| 500彩票www.50052r.com| www.gn30.com-河南彩礼政府标准| www.vp07.com-湖北快三杀号| www.12iy.com-上海快三走势和值| www.83rv.com-彩票亭转让-| www.1896.com-时时彩组六投法| www.7469.vip-广州体育彩票站申请| www.23382.cc-彩票资讯中国足球网| www.66156.com-福彩幸运号码| www.174111.cc-江西体彩11选5| www.266299.com-拉人玩彩票的套路| www.355248.com-三d胆码彩易网| www.437992.com-体育彩票在哪买| www.528414.com-必发彩票手机app| www.633880.com-廊坊七彩坊-| www.736692.com-今日福彩三地谜语| www.821829.com-聚彩彩票赢了能提现| www.894477.com-彩票63手机app| www.954180.com-好彩三开奖奖金查询| www.999455.com-什么彩票网站好| www.al55.com-福彩了d图迷总汇| www.sv04.com-七星彩怎么算中奖| www.14vg.com-彩界过客四胆| www.94kw.com-手机上怎么买体彩| www.2680.cn-体彩61几点停售| www.8056.cm-创意简约水彩画| www.25424.com-彩铅人物简笔| www.66011.cc-3d手机彩吧-| www.060314.com-高频彩分析论坛| www.135031.com-彩金网-| www.205715.com-一分快三计划app| www.026431.com-快三跟计划怎么稳赚| www.113072.com-七乐彩奖金等级查询| www.183121.com-福彩开快3的app| www.254067.com-福彩61生肖-| www.353376.com-大发彩票一uu直播| www.440043.com-七星彩守号15年| www.530096.com-乐游彩票正规吗| www.708375.com-宝宝人工计划时时彩| www.yt28.com-我要中彩app下载| www.42yo.com-玩彩票怎么做好计划| www.576.tv-51彩虹登录入口| www.4425.net-久彩彩票ios| www.514528.com-什么是快三福彩| www.ab92.com-河北快三同号推| www.005823.com-时时彩票开奖| www.549518.com-体彩能打4串1吗| www.603521.com-长治市福利彩票中心| www.671837.com-体彩大乐透牛彩涂| www.752930.com-重庆彩票网手机报| www.923213.com-彩票站几点下班| www.977502.com-潘多拉8度彩妆| www.js15.com-火箭的彩票平台| www.a63.org-体彩七星彩开奖公告| www.26qr.com-正规的福利彩票店| www.1104.top-足彩输钱了怎么办| www.8924.net-天美彩票聊天室| www.47835.com-快三计划qq计划群| www.90955.cc-彩票大家赢走势图解| www.045698.com-彩6c彩票-| www.199472.com-体彩排三遗漏统计| www.268576.com-江苏快三三军怎么投| www.361690.com-易发彩真能赚钱吗| www.443659.com-小儿心脏彩超数据| www.530117.com-小鹿网络时时彩助手| www.629283.com-543彩票-| www.695032.com-常州福利彩票双色球| www.766669.com-江苏福彩一定牛| www.870183.com-易彩快三规律破解| www.947208.com-体彩乐选三票| www.991114.com-36码4s彩票-| www.cp318.com-人人彩票网手机版| www.kd87.com-福彩网平台是骗| www.zq97.cc-足彩竞猜比分值播| www.20yv.com-下载彩客网-| www.678.host-香港七星彩几点停售| www.4068.biz-合乐彩888官网|