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天

知道了
58福彩 www.792294.com-广东福彩黄严冰| www.941011.com-合法网络购彩平台| 大赢家彩票网www.83033g.com| www.ld76.com-购彩竞彩-| www.4cf.com-彩票版区开开开| www.76xe.com-双色球授渔看彩杀码| www.2634.cm-香港百彩网免费料k| www.8543.top-福利彩票消消乐规则| www.061408.com-地下网络黑彩| www.225141.com-彩票计划群里全是托| www.315968.com-今天彩民乐图| www.183838.com-银川福彩3d-| www.302027.com-福彩快3安全吗| www.372062.com-体育彩票日进斗金| www.491303.com-福彩3d精华布衣5| www.576645.com-购彩v下载安装| www.662175.com-竞彩冷门神单| www.834913.com-炫彩油画联盟骗局| www.917939.com-七乐彩票大发快3| www.977305.com-吉利彩票登陆| www.th12.com-浙江彩票有快三吗| www.13lu.com-万彩吧c8com| www.94es.com-现在体育彩票挣钱吗| www.3794.com-篮彩比分直播188| www.9944.cc-体彩五排开奖| www.79015.com-开头带彩字四字成语| www.038956.com-大将军网投彩票| www.144183.com-买彩为什么会连输| www.246527.com-酷站全民彩票| www.329661.com-美国彩票十大巨奖图| www.461652.com-乐彩网重庆市彩走势| www.570949.com-钟嘉欣好彩妹图片| www.654688.com-重庆时时采彩5星| www.799402.com-一品堂彩票提不了款| www.882649.com-外围体彩哪个好| www.976520.com-河南体彩中心建行| www.ef.com-中国竞彩足球计算器| www.qd13.com-彩票093-| www.11or.cc-五分钟时时彩| www.85to.com-7乐彩开奖日期| www.3069.pw-进球彩app客服| www.9177.loan-七星彩长春-| www.71011.com-qq彩票怎么没有了| www.061117.com-彩票2元网杀号定胆| www.146255.com-资讯567彩票| www.234264.com-微信卖彩票合法吗| www.310617.com-美国彩票销售额| www.381201.com-七乐彩周末开奖吗| www.525338.com-中国手机彩票客户端| www.610293.com-做梦买彩票数字中奖| www.681303.com-龙江风彩22选5| www.761782.com-买竞彩-| www.870099.com-澳门彩票手机版下载| www.950398.com-8亿彩合法吗| 金彩www.984jc.com| www.cx99.cc-河北快三走势图旧版| www.vy03.com-中国体育彩票排列三| www.13sk.com-福彩今天开机号| www.689.cc-你蒙古快三-| www.4636.top-大家都买什么彩票| www.9921.cm-彩票25期开奖| www.62621.cc-雪园缘足彩比分直播| www.022262.com-注册送彩金-| www.092550.com-体彩18214期| www.157977.com-竞彩足球app排行| www.265939.com-银川体彩十一选五| www.352691.com-雅彩彩票真的吗| www.437448.com-陕西省福彩中心图片| www.529300.com-最近体彩店在哪里| www.630168.com-缅甸好彩柠檬爆珠| www.701129.com-夏门如彩纺织工艺品| www.776185.com-必赢彩票登录不了| www.878330.com-百盛彩票官网| www.948906.com-百度百度彩票| www.988684.com-期期中彩票app| www.cp889.cc-百姓彩票官方网站| www.lr84.com-彩票专家-| www.h24.link-沈阳快三走势图| www.35ay.com-3号彩票注册码| www.0766.cc-迁西彩票中奖| www.7017.biz-体彩篮球中奖规则| www.18857.cc-m5彩票注册-| www.60664.com-快三秒胶水百科| www.029680.com-东莞利彩-| www.101152.com-运彩-| www.162761.com-好彩自然来女主角| www.318372.com-全国统一开奖3分彩| www.388301.com-福彩3d杀号王杀码| www.519120.com-彩票专家预测靠谱吗| www.586657.com-完善资料自助领彩金| www.656835.com-常州竞彩店转让| www.757544.com-河南人彩礼是多少| www.837916.com-岩棉彩钢板防火吗| www.901994.com-找黑彩坐庄的老板| www.964832.com-中国的彩票有假吗| 网易彩票www.36788y.com| www.da54.com-人人中彩网客户端| www.sw13.com-反跟导师买彩票| www.21at.com-9万彩票下载苹果| www.031.online-588彩票官网下载| www.3017.vip-易购彩票官网| www.8176.org-贵州快三和尾振幅| www.26622.com-七星彩内部透露| www.66860.com-3d彩吧第一版| www.056046.com-搜狗七星彩梦册解梦| www.131726.com-彩礼最低的省份| www.200330.com-彩票福彩3d彩报纸| www.267010.com-中国体彩下载| www.365209.cc-十三亿彩票-| www.445261.com-彩票网站怎么维护| www.530117.com-小鹿网络时时彩助手| www.626756.com-本期管家婆彩图库| www.691021.com-足彩十二月赛程| www.765097.com-金凤凰彩票可信吗| www.885917.com-内蒙福利彩票站利润| www.962304.com-百度体育彩票| 网易彩票www.092wy.com| www.ca29.com-爱乐彩彩票官方网站| www.rs21.com-魔方彩票可靠吗| www.10ds.com-1分快三是官方彩吗| www.71yt.com-福彩快三容错软件| www.0578.cc-星彩网怎么样| www.7711.vip-香港分分彩走势图| www.21251.com-今天体彩大乐透领奖| www.60430.com-凤凰彩票能提现吗| www.025823.com-河南高频彩害人| www.090816.com-南国彩票论l坛| www.144250.com-竞彩稳串三串一| www.239800.com-福彩3d太假了| www.309785.com-河北体彩快乐扑克4| www.370744.com-新启航彩票平台| www.451533.com-分分彩计算软件| www.533115.com-澳门十大博彩官网| www.646995.com-胜负彩心得-| www.720578.com-七星彩姓名幸运号| www.785946.com-体彩字迷打印版| www.852274.com-5分彩不定位胆| www.909100.com-大发快三稳赢诀窍| www.957329.com-北京单场新浪爱彩| www.992501.com-七星彩多期怎么玩的| www.cai6799.com江西快三常规走势图| www.iw18.com-浙江体彩首页| www.xl28.com-湖南动物彩票| www.08np.com-玩高频彩的人多吗| www.70dj.com-快彩走势图更新不了| www.0305.top-釉上彩瓷器碗| www.8716.biz-亿乐彩票交流群群号| www.34374.com-招商银行彩票| www.71725.cc-三d天天彩报纸| www.029008.com-鳄鱼网彩票-| www.092475.com-福建体彩app| www.141819.com-山西福彩公众号| www.206061.com-彩票中奖是骗局| www.266696.com-快三几分钟开一次| www.376542.com-百盈快三和直播吧| www.475996.com-体彩5加2范围| www.543611.com-迅盈彩票是真的吗| www.622387.com-明发彩票官网| www.680088.com-二元彩票下载| www.751602.com-今天晚上有什么彩票| www.798635.com-c彩16安卓版| www.856236.com-百信盈福彩-| www.896557.com-博彩套利大神| www.947532.com-福彩王素英图片|