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.15269.cc-彩虹周杰伦百度云| www.018971.com-足彩工具-| www.892922.com-全民彩官网下载苹果| www.8468.loan-七星彩2008年| www.68688.cc-p3是机彩宝网| www.082122.com-晨兴彩票app| www.183875.com-足球彩票开奖结果| www.aj29.com-体彩七星彩兑奖方法| www.498608.com-爱民彩vip快三| www.591159.com-男方不给彩礼钱| www.689208.com-下载彩名堂计划| www.779479.com-竞彩预测网易| www.867880.com-福彩开奖时间星期几| www.950728.com-家彩网最新双胆| www.cp727.com-体彩福彩开奖结果| www.965343.com-体育彩票多少个数字| www.zv45.com-上海福彩兑奖时间| www.761750.com-下载福彩群英会| www.978418.com-好彩店彩票ios| www.iz42.com-辽宁福彩网双色球| www.2xu.com-哪个黑彩平台靠谱| www.804.cn-彩虹代刷官方网站| www.654279.com-风之彩是传销窝点吗| www.756225.com-三分时时彩玩彩票| www.573935.com-彩之源彩票真假| www.686821.com-中彩那天课文概括| www.792822.com-彩票中奖了怎么联系| www.874421.com-今晚七里彩开奖结果| www.93mz.com-中彩票离婚后兑奖| www.000861.com-河南福彩一块三| www.92mp.com-078彩票黑-| www.5441.com-彩35的网址-| www.656763.com-博彩seo-| www.731702.com-彩钢板围挡规格| www.493112.com-私彩平台有哪些| www.259135.com-中国竞彩网客户端| www.5470.net-长春文彩-| www.17431.com-竞彩足球188| www.92129.com-江苏快三346| www.483821.com-河南福彩新快三| www.78qq.com-体彩大乐透和值| www.40xq.com-节假日卖彩票吗| www.793106.com-玩福彩快三能赚钱吗| www.877662.com-中国彩票网官网| www.968174.com-购彩计划群是真的吗| 500彩票www.979738.com| www.km76.com-彩票多久开一次| www.i15.biz-l彩票开奖查询| www.38yu.com-用彩铅画画-| www.892977.com-下载福利彩票app| www.96382.cc-福彩业务-| www.492996.com-人人众彩apk| www.my37.com-彩票游戏机-| www.159.date-彩虹网名是什么意思| www.751008.com-征途彩票平台app| www.816660.com-093彩票下载安装| 新盈彩www.xinyc3.com| www.ra82.com-快三长龙经验| www.31fm.com-福彩3d网站-| www.360464.com-优彩区-| www.685301.com-福利彩3d-中彩| www.818533.com-怎么去兑彩票大奖| www.887638.com-中国体育彩票开奖号| www.ij7.com-大赢家彩票-| www.rk57.com-广西快三查询结果| www.22bc.com-盛源彩票手机版登陆| www.382.date-牛彩下载-| www.319859.com-彩民福地登录| www.060303.com-天天种彩票可信吗| www.786100.com-体彩排三字谜汇总| www.899975.com-福利彩票站转让合同| www.807368.com-彩票在线投注app| www.957885.com-66彩票网登录网址| www.sn6.com-买彩票规则-| www.t50.top-118彩票iso-| www.57914.com-978彩票99单机| www.533103.com-吉林福利彩票官方| www.5999.bid-福彩宝石连线| www.7820.me-足彩规律-| www.59012.com-新世界幸运快三| www.551861.com-快三号码预测软件| www.959402.com-快三大小打法| 99彩票www.31047.com| www.cp2805.com-快三街机-| www.ra97.com-梦见买彩票的号码了| www.36nr.com-安然七星彩推荐| www.1542.vip-三地杀码胆码彩经网| www.0br.com-彩铅画作品人物| www.084424.com-天天赢彩票平台代理| www.596107.com-微信玩彩票-| www.137114.com-七彩语文杯获奖名单| www.52956.com-买福彩用什么软件| www.330828.com-彩票争霸是真的吗| www.395133.com-彩虹搭建主站官网| www.896268.com-足彩怎么看盘| www.958737.com-js518全彩漫画| 彩票坊www.022a.cc| www.fl30.com-彩票大厅投注区| www.ze97.com-极速快三投注技巧| www.16cc.cc-官方幸运彩苹果版| www.33327.cc-河南彩票481玩法| www.011055.com-福彩快乐十分倍率| www.73790.com-会员登录王者彩票| www.267714.com-地方彩票-| www.860076.com-大发快三全民彩票| www.932411.com-时时彩个位大小判断| www.981650.com-中国体彩报专家预测| www.ih3.cc-浙江快乐彩12| www.3181.in-特区彩票七星彩论坏| www.024986.com-彩票过滤器的原理| www.103041.com-大奖彩票网址| www.5915.biz-体彩大乐透中奖秘诀| www.99151.cc-时时彩怎样玩不会输| www.1416.in-皇室彩票是骗局吗| www.nn46.com-竞彩篮球投注app| www.79us.com-无锡市福彩兑奖地址| www.706199.com-江苏时时彩历史开奖| www.805989.com-郑州彩票店转让| www.880552.com-七乐彩开奖今天| www.963418.com-体彩竞彩澳客网| 500彩票www.35733.com| www.59wt.com-结婚彩礼顺口溜五金| www.881836.com-网络彩票计划群骗局| www.r67.net-体彩官网的好选择| www.67gz.com-彩票游戏机说明书| www.1473.xyz-优秀彩铅作品欣赏| www.033756.com-如意彩票官网网址| www.385316.com-体育彩票1360亿| www.501736.com-购买体育彩票广告| www.011136.com-彩票每周几开奖| www.472883.com-时时彩5码推波方案| www.752568.com-福利彩票客户端| www.850391.com-投入住比例彩客| www.910987.com-快三交流群是什么| www.977294.com-内乡结婚彩礼重吗| www.vd24.com-49彩票会员登录| www.22ch.com-彩票更改数据端数据| www.102.red-排列三预测家彩搜索| www.811531.com-彩票高频走势| www.876868.com-彩票规矩-| www.972195.com-印尼五分彩开奖号码| 开心彩票www.398793.com| www.823975.com-南京三彩折扣店在哪| www.8202.top-辉煌彩票怎么升级快| www.23ih.com-彩票代玩工资日结| www.93ew.com-彩色一寸免冠照片| www.75961.com-手机彩票投注站软件| www.i69.xyz-中彩吧更懂彩民| www.36xf.com-竞彩足球计算机器| www.813511.com-宁夏福利彩票微信群| www.889601.com-七乐彩票代理真假| www.949057.com-福彩在线手机版| www.993708.com-足彩2串1倍投技巧| www.cu97.com-彩票店和什么一起开| www.5gl.com-五分彩个位是哪个| www.2093.com-福利彩票东方6+1| www.xf4.cc-彩票快3选号技巧| www.x72.club-棋牌彩票全民代理| www.1829.cn-吉祥彩网站-| www.01270.com-大老人福彩推荐号| www.41ej.com-兰考彩礼风俗的真相| www.79ko.com-3d天吉彩票论坛| www.268712.com-2元彩票网走势图| www.431368.com-凯利方差算足彩概率|