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.87sj.com-大地彩票黑钱| www.916792.com-彩票举报平台登录| 500彩票www.66653z.com| www.883693.com-彩之王下载安装| 豪彩VIPwww.838552.com| www.257413.com-什么是黑彩-| www.589221.com-福彩预测总汇| www.751348.com-今日彩怎么样| www.876694.com-彩票天罡八卦图| www.963003.com-彩铅画山水图片大全| www.cai9600.com精彩十分玩法| www.5al.com-黄好彩爆珠多少钱| www.455345.com-皇冠彩票合作改单| www.479701.com-如何看赔率买足彩| www.3215.cn-天天乐彩票是真的吗| www.24577.com-彩铅百合-| www.86382.cc-彩票中心待遇| www.075298.com-乐和彩票靠谱吗| www.179916.com-湖北快三走势跨度| www.205715.com-一分快三计划app| www.37633.cc-7星彩基本走势图| www.200502.com-江苏快三遗漏号| www.202396.com-网易购彩恢复了吗| www.326700.com-要体彩排三试机号| www.93eq.com-竞彩计划单图表制作| www.3924.me-竞彩14场分析| www.02828.cc-ok彩票安卓下载| www.715316.com-四季彩登录地址| www.819.cx-四季彩网站-| www.5998.site-体彩大乐透誉京华| www.17750.cc-竞彩推荐app| www.59967.cc-彩经彩票走势大全| www.3634.biz-彩票大师免费安装| www.9706.org-亚博彩票快三| www.45702.com-彩票的可以筛号| www.315836.com-手机版2d彩虹六号| www.407220.com-七星彩在线随机网上| www.543881.com-杨彩熙-| www.66253.com-时时彩做号器| www.059376.com-三分时时彩官网| www.141298.com-太湖字谜3b鳳彩网| www.099871.com-休育彩票开奖排5| www.180398.com-甘肃快三开奖结果| www.276403.com-彩之源平台合法吗| www.357696.com-如何陪老公戒掉彩票| www.443887.com-正常心脏彩超报告单| www.615755.com-体彩七位数技巧| www.237246.com-天天彩票大全| www.224411.com-全发国际彩票是什么| www.338983.com-快三甘肃快三走势图| www.434688.com-基诺型彩票破解方法| www.vz2.com-排3彩经网-| www.wz95.cc-七星彩今天预测号码| www.71jq.com-彩票励志图片大全| www.2634.xyz-时时彩漏洞改单| www.8853.me-128福彩网-| www.951324.com-信誉最好的网络彩票| www.cp814.com-代理快三怎么拉人| www.234076.com-体彩11选五宁夏| www.365224.cc-乐购彩票是什么平台| www.567164.com-彩虹6号季票价格| www.655605.com-网易彩票摇奖结果| www.785035.com-中彩票的几率有多大| www.868393.com-七星彩近十期的号码| www.939966.com-彩吧图谜第二版| www.999163.com-金碧汇彩app| www.et36.com-快三昨天开奖号码| www.36875.cc-福彩胆王-| www.494896.com-湖北快三加奖介绍| www.592577.com-合乐彩888官网| www.707654.com-玩乐彩网真的挣钱吗| www.789726.com-买竞彩最长黑几期| www.868477.com-01彩票官网网址| www.970633.com-迷彩兔怎么打不开| www.nn2.cc-五分快三技巧走势图| www.1hs.com-千百万彩票可靠不| www.799076.com-彩运8官网app| www.905031.com-快三一分一开| www.981078.com-七彩杯有害-| www.ag89.com-澳客网足彩-| 中国福利彩票www.6364g.com| www.sy37.cc-7星彩6个号多少钱| www.ep35.com-百盈快三开奖结果| www.981496.com-福建体彩网牛材网| www.rg12.com-万彩吧福彩3d预测| www.332787.com-中国彩票创始人| www.959454.com-彩票微信群二维码| www.763168.com-兰州彩票店几点开门| www.894782.com-7星彩开奖结果直播| www.rz61.com-体彩e球彩3场全包| www.886370.com-彩票大赢l家| www.968336.com-福彩是真的吗| www.la5.com-大发快三怎么赚钱| www.183977.com-河北福彩3d预测| www.317124.com-火箭彩票网vip版| www.397238.com-穿越福利彩票| www.662087.com-实时彩平台-| www.736926.com-彩迷网百度资料| www.812478.com-ok彩票最新消息| www.561587.com-网上买彩-| www.286255.com-福利彩票在线游戏机| www.398639.com-有什么竞彩参考软件| www.563369.com-最新双色球彩民乐图| www.578049.com-中国福彩网幸运彩图| www.660346.com-易经与彩票中的规律| www.795783.com-卖什么彩票中奖率高| www.872478.com-彩票11选五贵州| www.980694.com-利彩平台软件| www.qn9.cc-红旗彩票极速快三| www.121432.com-刚力彩芽-| www.656954.com-时时彩不赔绝招| www.247448.com-上海快三时间段| www.471622.com-小鱼版彩吧图库背面| www.554997.com-亿彩彩票官网首页| www.620512.com-七乐彩票违法吗| www.682632.com-高频彩票官方网站| www.879567.com-福彩都有哪几种玩法| www.01aa.com-法国买彩票-| www.794877.com-重庆彩票网公示| www.893775.com-犀牛彩票主页| www.974842.com-南京体彩中心余主任| www.bp62.com-时时彩缩水专用工具| www.019882.com-支持花呗的彩票软件| www.592395.com-七星彩最新规律表| www.734545.com-凤彩网双色球字谜| www.822792.com-彩票网页版-| www.910074.com-3d银海彩票-| www.083759.com-双色球彩经网杀号| www.233734.com-江苏e球彩规律| www.348080.com-江苏快三作弊软件| www.089646.com-台湾快三计划| www.939015.com-58彩票苹果下载| www.1015.com-香港跑马彩票走势图| www.447233.com-彩票视频讲座| www.297985.com-上海快三历史开奖号| www.372531.com-无彩色系没有| www.592667.com-博众彩票软件下载| www.345775.com-查看福彩开奖结果| www.063999.com-时时彩送注册38| www.870937.com-彩票缩水助手| www.991924.com-时时彩定胆不错方法| www.ci35.com-一分快三赢了| www.wn77.com-下彩网客户端下载| www.17kj.cc-怎样才能卖好彩票| www.3120.vip-世界杯彩票计算方法| www.8697.cc-php博彩源码| www.863.site-时时彩买法稳| www.5656.bid-扎彩什么意思| www.08689.com-荣一彩票首页| www.48447.com-竞彩足球手机客户端| www.03978.com-豪彩彩票注册| www.77329.cc-手机彩票犯法吗| www.67683.com-福彩3g开奖结果| www.021634.com-信彩票安全吗| www.z38.top-彩神8导师带玩| www.428448.com-大赢家足彩缩水| www.538757.com-香港和彩开奖走势图| www.599186.com-福利彩票怎么买中奖| www.664983.com-福彩35开j-| www.720900.com-彩票2元彩-| www.777474.com-网络彩票app下载| www.506538.com-福彩双色球字谜诗谜| www.568366.com-京彩官网-| www.618444.com-优中彩票正规吗|