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天

知道了
必赢3D www.jw22.cc-关于彩铅画的技巧| www.32ib.com-我想开个福利彩票店| www.635.cm-福彩东湖社区网址| www.4781.vip-梦想彩票提现| www.13023.com-竞彩篮球开奖| www.63595.com-七乐彩中奖票样图| www.113312.com-彩票中奖绝招| www.192806.com-快三河北开奖结果| www.266776.com-快三和值图片| www.457101.com-中彩缘试机号| www.561390.com-彩票5950-| www.629718.com-足彩14場比分直播| www.699867.com-彩票人工计划客户端| www.787668.com-江苏体彩500| www.864122.com-新版132彩票| www.928855.com-银河乐彩客户端下载| www.992694.com-中彩国际可以提现吗| www.pc5.cc-最正规彩票平台| www.sk60.com-彩票福彩3d走势图| www.20yb.com-每天买两块钱彩票| www.546.live-福彩鬼六神算子字谜| www.5168.website双机彩票站转让信息| www.11585.cc-高频彩对冲套利方法| www.59951.cc-现金百乐彩-| www.055662.com-彩票容易中奖类型| www.143030.com-福利彩八-| www.224539.com-兼职帮投福彩游戏| www.307407.com-赌场派彩什么意思| www.375267.com-福彩主播-| www.614771.com-全天三分快三| www.681293.com-国内合法彩票| www.758111.cc-最稳定的彩票计划| www.947832.com-福彩助手最新版下载| www.997485.com-彩票哪一个比较好| www.um7.com-马来三分彩开奖直播| www.sf20.com-网赌分分彩忠告| www.16ds.com-幸运彩票app苹果| www.114.me-福彩3d绝杀下一码| www.3983.cc-49c彩票提款不了| www.9770.biz-昨天彩票开什么码| www.67917.com-贵州快三计划网页版| www.031244.com-迅盈彩票官网| www.111785.com-大资本网络彩票真假| www.185501.com-快三有没有假| www.263010.com-福彩追加-| www.381914.com-体彩站生存状况| www.508558.com-大乐透手机购彩| www.583850.com-彩票如何购买| www.662678.com-免费彩票计划网页版| www.739827.com-福彩3d能不能中| www.816364.com-快三豹子通选多少钱| www.895296.com-华彩赢家彩票靠谱吗| www.959619.com-彩票稳定计划团队| 500彩票www.50051k.com| www.fw11.cc-彩票微信群怎么加| www.yt73.com-亿网彩票下载安装| www.24zy.cc-梦见彩票开奖没中奖| www.0544.cn-彩票481属于什么| www.7385.biz-色彩斑斓女神款微信| www.25152.cc-彩铅自学难吗| www.69276.com-足彩即时开奖| www.053885.com-足彩递增买-| www.135624.com-cp12彩票官网| www.214079.com-一分快三精准计划| www.2qz.cc-金利彩票是干啥的| www.062992.com-体彩机要折旧费吗| www.127052.com-迪丽热巴彩铅真人画| www.192269.com-鑫彩网是正规网站吗| www.948784.com-万彩吧双色球| www.994151.com-上海快三全天多少期| www.fj1.com-时时彩平台排名| www.009939.com-时时彩平台网站| www.082873.com-福彩3d组三-| www.150133.com-首彩51-| www.301026.com-澳门送彩金网址大全| www.373718.com-中国竞彩足球网| www.520826.com-7星彩几点开奖时间| www.581310.com-新看彩啦3d-| www.642477.com-福利彩票店面| www.766330.com-牛彩app真的吗| www.868538.com-七星彩最小值走势图| 聚彩网www.707519.com| www.iw10.com-足彩复试计算器| www.zs49.com-彩票各类玩法| www.25io.com-竞猜足球胜负彩奖金| www.0175.xyz-宝利彩票平台下载| www.6649.org-38彩票网址是什么| www.16357.cc-彩客app正规吗| www.57788.cc-中彩票706-| www.027963.com-鸿彩邀请码-| www.103130.com-快三如何精确到数字| www.168293.com-江苏快三形态走势图| www.274586.com-快三驾吗-| www.357692.com-福利彩票要几个号码| www.443778.com-大庄家彩票注册| www.532707.com-彩票平衡定律| www.636188.com-彩虹六号无人机| www.720079.com-新浪彩票机选一注| www.792761.com-领奖彩票平台| www.865641.com-下载易网彩票网| www.929531.com-七乐彩胆拖选号器| www.975665.com-重庆时时彩骗局模式| www.pj86.cc-足彩胜负概率计算| www.x18.com-大连体彩兑奖地址| www.48wq.com-全明星彩票下载| www.590.in-天桥底老王彩票| www.4002.cm-竞彩输钱了千万| www.9141.loan-彩虹玫瑰多少钱一支| www.68859.com-彩票魔术-| www.025950.com-3号彩票网-| www.095372.com-彩票作假案-| www.156437.com-中国体育竞彩足球| www.261142.com-竞彩推荐-| www.326596.com-彩票这么看-| www.389301.com-杨哥说彩今天字谜| www.527367.com-福彩时时彩试号机| www.606822.com-属羊人买彩票的数字| www.671842.com-彩宝网是正规的吗| www.740060.com-彩票香港-| www.803732.com-牛彩三d图谜总汇九| www.873904.com-天空下下彩免费资料| www.978462.com-好彩客网站-| www.cp023.com-购彩大厅-| www.jw94.com-牛彩网站-| www.zc81.com-乐享彩票合法吗| www.17px.cc-彩票提现投注量| www.524.site-彩票500强-| www.3721.live-彩库之家香港高手坛| www.8790.pw-体彩排列三直播| www.51813.cc-分分彩计划一期| www.90657.com-彩票没有二维码| www.038869.com-陕西快三查询| www.135176.com-凤凰计划彩票| www.202978.com-湖北福彩网30选5| www.266257.com-内蒙古快三跨度振| www.365569.cc-彩铅教程视频| www.445432.com-竞彩网开奖结果报码| www.528040.com-彩票预测专业网站| www.677863.com-下载星彩-| www.746363.com-8亿彩app苹果| www.806339.com-送彩金彩票网站| www.872106.com-湖北彩票中奖图片| www.969132.com-网易专家预测足彩| 55世纪www.202115.com| www.ep34.com-新华彩票下载| www.tx99.cc-足彩8串1技巧| www.6pn.com-计算彩票的公式| www.52ho.com-足彩欧赔哪里最准| www.503.biz-时时彩单双大小历史| www.3570.cc-双色球下载彩票平台| www.8412.net-五福彩彩票软件下载| www.95996.com-体彩专管员压力| www.048300.com-百宝彩票公司| www.138043.com-重重时时彩开奖号码| www.206188.com-易彩兼职是不是骗局| www.266591.com-福彩3d香港图| www.360424.com-广西福彩快乐十分开| www.432896.com-用彩票大数据赚钱| www.516227.com-体彩有江苏快三吗| www.575723.com-安卓版火箭彩票网站| www.635418.com-七彩阳光视频全集| www.755303.com-网易彩票社区| www.826558.com-彩论坛首页高手| www.885051.com-彩票代玩兼职可靠吗|