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.775695.com-和竞彩有关的网名| 千百万彩票www.qbwc7.com| www.hr69.com-新浪彩票网走势图| www.o10.in-体彩三d走势图| www.64sf.com-505彩票怎么玩法| www.18638.cc-竞彩网比分澳| www.86408.com-彩票预测下期号码| www.087276.com-福田彩福大厦怎样| www.174062.com-新快三在线-| www.310591.com-彩票图片大全| www.400905.com-竞彩最佳盈利计划| www.617670.com-快三刷分器-| www.704564.com-779彩票正版| www.799036.com-长城彩票官网下载| www.877735.com-买境外足彩算赌博吗| www.ab7.cc-内蒙快三开奖一定牛| www.ri59.com-七乐彩复式计算器| www.23jq.com-天天彩票492ok| www.1315.top-广东体彩顶呱刮新票| www.45643.com-冬马来彩-| www.008106.com-超级大乐透彩票开奖| www.097798.com-武汉福利彩票机转让| www.211638.com-全民彩票-| www.311149.com-快彩在线主页| www.735555.com-吉祥彩票0500| www.21379.cc-网上买彩票别人带| www.77269.cc-重庆彩票怎么玩| www.044427.com-王牌彩票是真的吗| www.186872.com-分分彩规律技巧| www.262951.cc-福彩双色球百度贴吧| www.445539.com-3d彩民乐图库| www.570811.com-七彩山鸡苗那里有卖| www.660567.cc-天空彩素免费资料| www.826279.com-体彩3开奖-| www.908913.com-中福利彩票双色球| www.995381.com-英国5分彩开奖网站| www.kr90.com-袁老师说彩双色球| www.t35.pw-彩尊手机版安装包| www.65fi.com-经典说彩双色球预测| www.1711.in-一彩票网-| www.215776.com-中国福利彩快3开奖| www.366048.com-体彩奖金规则| www.509861.com-第三代彩先知| www.590405.com-七星彩杀四位| www.669682.com-四位数字彩票| www.754442.com-送彩金白菜网| www.906997.com-双色球彩票组号宝| www.974551.com-众彩网手机端| www.ks4.com-福利彩票开奖结果查| www.rf44.com-香港行政快三| www.14el.com-手机七星彩直播频道| www.201.org-彩铅动物简单图片| www.4200.vip-七彩股份-| www.9775.loan-休闲快三九寨红叶| www.73496.com-足彩超级必发指数网| www.026994.com-新加坡快三开奖| www.105350.com-大红鹰彩票网站| www.177528.com-快频彩湖北快三| www.253069.com-好彩快三-| www.325092.com-彩票吧吧-| www.396460.com-釉上彩的缺点| www.583748.com-彩之乐-| www.659807.com-腾讯分分彩开奖| www.764449.com-中国彩软件-| www.855211.com-河内五分彩有托吗| www.923561.com-秒速快三技巧| www.982420.com-互娱彩票注册| www.rd87.com-五分时时彩是骗局么| www.7ok.cc-多肉情景彩铅画| www.64xh.com-澳门三分彩计划网站| www.0795.in-彩票共赢-| www.8799.in-海南七星彩特区| www.42832.com-王牌彩票可靠吗| www.88645.cc-神彩1下载到手机| www.044503.com-一分钟快三怎么赚钱| www.149861.com-彩票精准分析软件| www.236525.com-彩票系统的规律| www.312384.com-快8彩票官网| www.382627.com-彩票兑奖金额| www.525511.com-lol博彩app-| www.610055.com-福利彩票1月2号| www.680232.com-彩票应用下载| www.759344.com-彩票60下载app| www.870321.com-被阿里彩票骗了咋办| www.951687.com-红彩直播邀请码| 酷彩网www.5177.cc| www.hc83.com-彩运8平台安全吗| www.yc06.com-韩国彩票领奖| www.24xn.com-长红彩票平台| www.0532.tv-绍兴玲珑湾彩票| www.6854.me-大奖彩票的登录口令| www.18523.com-陕西快乐十分彩派| www.83361.cc-体彩高手-| www.033538.com-彩店宝合法吗| www.110452.com-3d彩票分几种| www.219341.com-福建彩票网-| www.337227.com-双色彩票一注守号| www.497149.com-福彩手机投注后拿票| www.616961.com-彩票黑客预测| www.738824.com-江苏快三的红号| www.849527.com-黔南州体彩中心地址| www.915478.com-官方淘彩平台| www.974188.com-卓易彩票下载| www.tb33.cc-哪种彩票比较好| www.02fy.com-彩虹有哪几种颜色的| www.69ez.com-皇冠彩票首页| www.0601.com-澚淘彩票-| www.7724.vip-信彩网-| www.16597.cc-福彩三地玩法介绍| www.50975.com-好运彩app安全吗| www.91477.com-好彩烟种类-| www.043147.com-竞彩广告语-| www.193867.com-极速快三稳赚技巧| www.262076.com-快三最高中奖多少钱| www.356743.com-国内彩票哪个最好| www.435855.com-福星七星彩长条下载| www.524888.com-天下彩網址-| www.624127.com-彩神争vii-| www.688634.com-牛彩快三如何做规划| www.762171.com-足球在哪买竞彩| www.866166.cc-网彩开售吗-| www.923285.com-补偿公告腾讯彩票| www.977219.com-濮阳市结婚彩礼| www.rw3.com-正规十大搏彩网站| www.oq97.com-彩票怎么中奖| www.4pd.cc-台湾时时彩计划软件| www.60re.com-大盘娱乐福彩预测| www.983.org-金球彩票-| www.8838.vip-彩网站汇总-| www.38217.cc-网络售彩举报平台| www.78139.com-3d彩票技术培训| www.023783.com-彩票客户端哪个好| www.089849.com-彩票套利对冲打法| www.146618.com-中国彩票预测咨询网| www.348655.com-同乐彩是什么平台| www.432186.com-彩票一等奖号码| www.520245.com-吉林快三合值推荐| www.581908.com-藤井有彩48小时| www.645998.com-网络彩票心得体会| www.768991.com-亚博彩票靠谱吗| www.848526.com-c61彩票平台| www.904012.com-姜丽谢俊娟花式快三| www.963375.com-彩色水磨石地坪施工| 中国福利彩票www.33588m.com| www.de43.com-买体育彩票几位数| www.sl97.com-时时彩二星走势| www.13ff.com-微彩彩票骗人| www.73et.com-彩亿彩票app下载| www.0572.space-刘文彩-| www.7758.cn-一分快三破解规律| www.19314.com-彩发发app官网| www.59281.cc-彩票代售点怎么申请| www.027129.com-078彩票平台登录| www.091897.com-京彩集团彩票安全吗| www.144802.com-百胜彩票首次送彩金| www.240887.com-澳洲时时彩人工计划| www.306499.com-摇彩票软件-| www.365338.cc-现金彩票app官网| www.437178.com-中奖几率最高的彩票| www.520068.com-大发快三计算规律| www.578208.com-快三群名字大全| www.636884.com-彩虹电影台源| www.775675.com-奔腾彩票安全吗| www.840868.com-深圳彩妆美甲学校|