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.155673.com-微彩网投-| www.785851.com-花人彩票登录| www.277791.com-90在线彩票骗局| www.307706.com-派彩481-| www.860057.com-时时彩系统彩源码| 天天彩票www.2373x.com| www.937088.com-彩福大厦带学位吗| www.07py.com-上期福彩-| www.13sm.com-山东体彩官方电话| www.809.org-七乐彩免费预测网| www.82043.com-信用盘彩票平台| www.594808.com-多乐跑得快三人规则| www.500951.com-希腊5分彩走势| www.69ca.cc-金冠彩票注册| www.990394.com-福利三分彩开奖结果| www.718915.com-彩虹是如何形成的| www.926587.com-快彩3计划-| www.cp3803.com-新快三算号器| www.961573.com-彩票黄金分割确定号| www.052909.com-买彩网双色球| www.869181.com-七星彩选号器免费| www.281848.com-彩民之家-| www.8760.in-名人彩票登录网页| www.775838.com-分分时时彩五星计划| www.971414.com-彩88软件下载| www.ty5.com-五分快三走势图| www.202597.com-贵州福利彩票双色球| www.10635.com-双色球乐彩网开机号| www.031225.com-迅盈彩票破解| www.076518.com-被高频彩票害惨| www.360.tm-香港皇冠彩票| www.zj18.com-彩票斤形票开奖| www.l60.top-爱购彩app下| www.56mc.cc-天天中彩票怎么领奖| www.1843.vip-55887彩民论| www.669754.com-怎么研究海南私彩| www.816080.com-河北快三技巧视频| www.899463.com-彩神通四码免费资料| www.036331.com-e家彩票计划官方| www.561073.com-时时彩出豹子征兆| www.678579.com-中福快三网彩票吧| www.793955.com-贵州快三预测开奖| www.948776.com-彩票有什么软件| 杏彩www.00840o.com| www.875226.com-网络彩票可以玩吗| www.128451.com-福彩快三官方直营店| www.93zx.com-易彩堂公司地址| www.318653.com-3分时时彩计划在线| www.22qo.com-购彩之家993| www.785837.com-世界杯彩票怎么买法| www.880904.com-黑单彩票-| 老彩票www.775704.com| www.88774.com-新乐彩彩票-| www.15yz.com-体育彩票19035| www.588079.com-竞彩十四场比分直播| www.869485.com-教你七星彩的规律| www.241556.com-17年七星彩-| www.604574.com-希望彩票官网多少| www.735335.com-美彩票-| www.33234.cc-彩宝分分时时彩| www.0291.cm-江阴体彩机转让| www.09877.com-福彩微信公众号账户| www.723621.com-常州彩票-| www.197018.com-马来三分彩开奖直播| www.271163.com-今晚好彩1开奖结果| www.345940.com-十四场足彩分析| www.512961.com-爱购彩网址-| www.092881.com-快三害人吗-| www.25699.cc-彩乐乐杀号定胆| www.56793.cc-时时彩龙虎具体玩法| www.884730.com-重庆肘时彩开奖历史| www.30707.com-彩票3d没人中过吗| www.718987.com-广州福彩快乐十分| www.575022.com-彩票在线下载| www.825708.com-山西大清快三走势| www.961608.com-各种釉彩大瓶海报| www.jj60.com-彩客网彩票客户端| www.483055.com-香港好彩堂资料| www.66oi.com-七星彩头尾资料| www.86756.cc-福彩牛彩图谜汇总九| www.275279.com-香港快三是什么| www.538131.com-利彩彩票是什么意思| www.99155.cc-时时彩为什么输| www.081089.com-彩票能中大奖的咒语| www.c25.loan-澳门博彩在线彩票| www.386100.com-帝豪彩票负盈利| www.521308.com-快开彩票群-| www.608866.com-网络彩票停售原因| www.729583.com-神彩通是真的吗| www.837538.com-立彩佳美缝剂多少钱| www.947526.com-体育足彩14胜负彩| www.qw28.com-快三奖金表图片| www.3810.com-承德市体彩中心地址| www.067946.com-多赢吉林快三计划| www.67jx.com-第一台熊猫彩电| www.98183.cc-今天晚上彩票出奖号| www.188065.com-时时彩最新技巧| www.290347.com-内蒙古体彩领奖地址| www.400512.com-福彩3d怎么看号| www.cai3453.com时时彩高手方案| www.931120.com-犀牛彩票平台| www.15ac.com-如何手机购买彩票| www.61685.cc-大胜彩票是真的吗| www.w64.com-3d200期双彩图| www.881816.com-福彩777走势图| www.275377.com-中国彩票网站大全| www.94gq.com-体彩排列三和值字谜| www.028604.com-五行3d图彩票| www.437.in-极速快三和值技巧| www.984714.com-动爻算港彩一肖法| www.0411.com-易彩彩民登录福地| www.30630.cc-桃屋猫3d全彩本子| www.966305.com-体彩图谜第二版| 聚彩网www.269707.com| www.7061.vip-天下彩免费手机资料| www.766658.com-体彩兑奖期限| www.947256.com-北京福建快三助手| www.cp0928.com-江苏快三破解器下载| www.ga05.com-浙江省快乐彩走势图| www.93ln.com-体育彩票业中外对比| www.025151.com-福利体彩幸运选号| www.729293.com-江苏体彩7位数开奖| www.800431.com-香港幸运彩-| www.881642.com-彩票走势图新浪网| www.941189.com-阿里彩票怎么回事| www.981878.com-从网上可以买彩票吗| www.cai2833.com快三专家预测| www.112543.com-彩票源码手机版| www.182109.com-大发彩票北京快3| www.682509.com-彩票公益金使用范围| www.147654.com-4码彩票-| www.222767.com-福彩app下载| www.291094.com-江苏快三遗漏速查| www.401618.com-703六给彩-| www.8103.com-彩运8下载app| www.317182.com-彩九平台怎么下载| www.421600.cc-如何退出四亿彩票网| www.443759.com-七星彩中奖专业户| www.528300.com-时时彩买什么挂什么| www.610376.com-福彩老板微信| www.121603.com-百合网娱乐彩票游戏| www.936562.com-彩客网310-| www.979810.com-彩票导航123| www.cp9718.com-北京福彩快3官网| www.56871.com-重庆时时彩五星玩法| www.970642.com-福彩3b基本走势图| www.126066.com-手机购彩客户端下载| www.vh40.com-苏州福彩双色球开奖| www.73ov.com-米兜彩票转型| www.802715.com-北京福彩app| www.509409.com-博彩包网接口| www.491100.com-5000万彩票平台| www.605911.com-福利彩票是怎么买法| www.679986.com-2m2元彩票网| www.741755.com-南京彩票培训| www.907042.com-今日快三出奖号码| www.970480.com-分分彩胆码技巧| www.cai0700.com福彩快三app下载| www.1604.vip-福彩3d今晚预测| www.875097.com-258竞彩网手机版| www.940128.com-重庆福彩公告| www.984804.com-福利彩双色球预测| www.c9.me-安徽快三坐标走势图| www.99sa.com-双色球彩票历史|