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天

知道了
9彩注册 www.313187.com-腾讯分分彩2期必中| www.456467.com-乐吧时时彩-| www.554398.com-彩票要怎么看| www.623655.com-三星彩票app下载| www.695252.com-竞彩360比分直播| www.773906.com-福彩买大小投注网站| www.932815.com-彩票与概率-| www.988722.com-澳门快三开奖| www.cp7188.com-玩江苏快三倾家荡产| www.mn11.com-网络福彩代理| www.1hd.cc-乐彩网账号-| www.55nz.com-九州彩票手机版下载| www.0030.com-彩票和佛-| www.7659.top-福彩柜台-| www.23561.cc-网上买彩票几百人| www.65180.com-青海体育彩票| www.034484.com-花生彩票有没有备案| www.119465.com-彩发发官网-| www.187884.com-七星彩中奖5个号| www.257072.com-赢彩彩票官网| www.328658.com-天下彩票九龙精英网| www.395406.com-彩虹岛名片-| www.553321.com-足彩怎么买中奖率高| www.618849.com-山东省体彩中心地图| www.686768.com-彩票中奖彩民| www.761420.com-淄博中彩票被杀| www.905608.com-快三如何倍投不赔| www.968713.com-七星彩走势图大赢家| www.ve.com-河北快三正文一定牛| www.sg79.cc-足彩胜负14场预测| www.12lb.com-举报彩票平台| www.77hx.com-r8国际彩票注册地| www.1311.top-乐彩33彩票网站| www.8776.net-人工智能分析足彩| www.39125.cc-中彩彩票贴吧| www.82525.cc-体育彩开奖结果| www.029809.com-体彩分析软件哪个好| www.101988.com-彩票研究技术| www.166030.com-甘肃快三走势图今天| www.282223.com-彩票开奖是直播吗| www.362968.com-福利彩票开奖的依据| www.477784.com-香港118彩票网| www.559330.com-彩经网大乐透开机号| www.622720.com-双色球福彩开机号码| www.688751.com-98c彩票网金牌| www.760103.com-体彩七位数中奖查询| www.881816.com-福彩777走势图| www.956443.com-富贵彩害死了| 亿彩www.6832u.com| www.co28.com-吉林快三走势一定牛| www.sx03.com-七乐彩要按顺序吗| www.15qo.com-香港皇都彩票| www.90rf.com-500彩票做任务| www.2060.live-爱彩人彩票网大乐透| www.7287.in-ig官方彩-| www.18607.com-竞彩倍投骗局| www.56905.com-分分彩五星独胆公式| www.033290.com-78彩票推荐人吗| www.101845.com-彩票平台租赁| www.158962.com-快乐彩12开奖号码| www.255834.com-网上购彩网哪个好| www.321136.com-彩票开奖三d| www.384996.com-圆梦七星彩交流专区| www.515796.com-领航竞彩同盟2串1| www.578285.com-一分钟时彩能玩吗| www.640016.com-大通彩票官网网站版| www.737022.com-彩88篮球彩票专家| www.801252.com-七彩连珠单机版下载| www.867533.com-七星彩开奖今天结果| www.922597.com-红旗彩票彩种| www.974527.com-彩运来手机版下载| www.fd88.com-北京单场彩计算器| www.ui61.com-17500乐彩网| www.8ik.cc-体彩单场预测推荐| www.54xh.com-彩吧助手排三走势| www.639.space-买黑彩违法吗| www.3866.vip-福彩三地字迷图| www.8602.loan-利博彩票手机版| www.61151.com-038彩票网页登录| www.009562.com-时时采彩老走势图| www.069166.com-河北快三合法吗| www.126805.com-彩票大乐透杀号| www.188774.com-内蒙古福彩app| www.247992.com-免费快三辅助软件| www.310955.com-彩博app-| www.369200.com-尼彩手机铃声| www.447357.com-众彩网是能赚钱么| www.530281.com-铁公鸡彩票-| www.722376.com-福彩3个红号有奖吗| www.788133.com-怎样下载中国足彩网| www.851313.com-网易彩票2亿大奖| www.907092.com-福利彩票号-| www.962954.com-3d排列三彩票软件| 易彩网www.36166c.com| www.bg62.com-利记博彩app| www.pn18.com-彩神争vll-| www.9oa.com-微博彩票游戏二维码| www.57jx.com-网上买彩票怎么注册| www.595.live-幸运5分彩下载| www.3562.cn-彩票偏态学-| www.8312.top-江西体彩兑奖规则| www.22985.cc-天天赢彩票官网| www.57813.cc-竞彩篮球一定牛推荐| www.051971.com-快三直选中两个| www.121419.com-导师网络彩票| www.177858.com-吉林快三选号方法| www.234644.com-快乐彩票三平台| www.300282.com-彩巴-| www.358746.com-体育彩票中多少领奖| www.422465.com-申请足彩投注站| www.508067.com-体育彩票6十l开奖| www.566659.com-恒发彩票平台| www.621609.com-亿元彩票app下载| www.678320.com-安徽快三有什么技巧| www.739457.com-头条彩票是怎么回事| www.791028.com-福利彩票双色球下注| www.843938.com-彩票市场谁监管| www.896469.com-10十分彩-| www.947659.com-福彩销售-| www.985685.com-大发时时彩破解| 99福彩www.729987.com| www.fn30.com-彩神通彩票软件| www.tn99.com-百宝世嘉彩票| www.0lb.com-七乐彩是真是假| www.41yx.com-嘉兴竞彩网点| www.96qs.com-自己编程选彩票| www.2001.live-558彩票骗局| www.6526.shop-大豪客彩票网址| www.24533.com-够力七星彩奖表| www.57911.com-彩运网cy75-| www.068222.com-福彩3d三角图| www.121474.com-宁夏体育彩票| www.166881.com-江苏快三计划精准版| www.263105.com-中国体彩网上购买| www.354896.com-310直播足球竞彩| www.397413.com-网上彩票平台举报| www.520442.com-m5彩票中心-| www.565093.com-重庆市市彩开奖号码| www.608699.com-微信彩票网址| www.655693.com-中彩彩票pc蛋蛋| www.774899.cc-中500万彩票的码| www.3810.org-吉林快三怎么出豹子| www.190317.com-安徽快三怎么玩稳赚| www.859412.com-长城彩票合法吗| www.897955.com-体彩宣传标语| www.947171.com-新浪彩票中心| www.976288.com-郑州本地彩礼| www.hx90.cc-大运彩票平台| www.078844.com-七星彩怎么对奖| www.127826.com-彩虹宝宝歌曲| www.181273.com-安徽快三复式玩法| www.234358.com-怎么才能戒彩票| www.289234.com-三分彩开奖结果查询| www.470502.com-足彩怎么买比较合理| www.536527.com-体育彩票的品种| www.607735.com-美高梅快三-| www.661775.com-外围足彩能挣钱吗| www.736389.cc-保定福彩中心| www.789537.com-竞彩买单关能赚钱吗| www.842048.com-杨震足彩任九| www.888694.com-福利彩票3d南方网| www.971095.com-福彩赛车怎么买| 中国福利彩票www.08588i.com| www.ag37.cc-彩票预测3d-|