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天

知道了
9彩注册 www.909894.com-乐彩1分快3规律| www.812384.com-178彩票客户端| www.980833.com-彩票源码论坛| www.od44.com-欢迎来到彩票米聊| www.011102.com-体彩屋是合法的吗| www.333.org-魔方彩票国王皇后| www.225925.com-刷彩票赚钱-| www.439962.com-美国大学彩票| www.9414.cc-非凡彩票网走势图| www.130238.com-中国体彩中奖号码| www.702707.com-盛澳竞彩会赚钱吗| www.801377.com-富彩票-| www.585449.com-彩寶網-| www.699819.com-五分时时彩计划网址| www.796894.com-体育竞彩赛事公告| www.875404.com-每分钟开一次的彩票| www.963331.com-胜负彩500比分网| 众彩www.670665.com| www.nn6.cc-五分快三怎么看走势| www.xl49.com-福彩瑞app-| www.43ga.com-篮球体彩奖金| www.0011.space-什么彩票四个数字| www.933909.com-彩票指南电子版订购| www.756765.com-全民彩网址-| www.909627.com-今天福彩三d彩报图| www.cp780.com-手机摇快三出号规律| www.84qo.com-银川仟彩-| www.eu34.com-彩神计划破解版| www.cp1252.com-快三倍投盈利表图片| www.562723.com-中国福利彩票34期| www.4847.xyz-做梦刮彩票中奖| www.55vl.com-招行开工利是抽彩票| www.4024.com-形婚彩礼规矩| www.642821.com-汪汪时彩-| www.618142.com-福彩中的幸运彩| www.766567.com-彩票赚钱倍投方法| www.954327.com-排三彩票网-| www.ne05.com-vip彩票网正规吗| www.69vz.com-只有两家网络彩票| www.066280.com-重庆彩票网-| www.305577.com-去实体店买彩票过程| www.762419.com-竞彩哪里买-| www.872328.com-快三长龙最多| www.gn89.com-江苏快三有人控制吗| www.909468.com-唯彩会彩票-| www.967695.com-招聘彩票计划导师| www.dy21.com-澳客彩票电脑旧版| www.145377.com-3d彩票吧百度贴| www.262812.com-彩票团购群靠谱吗| www.906.cm-彩铅星空眼睛画法| www.345075.com-手游彩票软件| www.323773.com-众彩彩票是骗局揭秘| www.455511.com-乐彩彩票论坛| www.4644.com-彩票运气-| www.33776.cc-e乐彩票官网下载| www.140342.com-快三营业时间| www.882596.com-韩国快三开奖时间| www.950997.com-立彩是合法的吗| 全民汇彩票www.52303x.com| www.543316.com-福彩3d一句定三句| www.610670.com-郑州竞彩快三查询| www.684307.com-彩票代投是骗局揭秘| www.759087.com-重庆时彩彩开奖结果| www.822059.com-彩票双色球红球杀码| www.897246.com-澳洲彩票怎么买| www.960169.com-彩票平台哪个最大| 全民汇彩票www.52303g.com| www.dq89.com-快彩平台官网| www.ve11.com-彩票软件过滤分析| www.266449.com-福彩排3-| www.1861.org-5分快三砍龙| www.7536.pw-如何发展竞彩彩民| www.42008.com-安卓版玩彩票| www.796098.com-幸运快三能赚钱吗| www.190455.com-安徽快三彩票| www.3963.org-中彩堂原創料| www.192967.com-派彩网-| www.081062.com-计划彩票老师带单| www.315130.com-彩虹儿童画-| www.817600.com-彩票与你同行| 1号彩票www.yi695.com| www.82lw.com-500万彩票吧| www.807989.com-彩票一360彩票| www.pm82.com-彩圣字谜今天| www.230092.com-福彩3d试机号码| www.547709.com-易彩堂快3技巧| www.0460.cc-零零彩票-| www.029974.com-好运来彩票网网址| www.39lk.com-人工彩虹的物理原理| www.1674.org-幸运快三怎么买| www.672930.com-e8cc发彩网-| www.740045.com-福彩主任什么级别| www.803165.com-足球彩票怎样看中奖| www.61.me-怎么戒掉时时彩| www.366705.com-二年级好看的彩铅画| www.577308.com-时时彩中奖查询| www.688286.com-彩票站能卖时时彩吗| www.894.live-八卦九宫图用于彩票| www.6866.cn-彩运宝体彩店下载| www.17223.cc-彩票黑平台没法提现| www.59221.cc-福彩三d计算方法| www.842848.com-昨晚胜负彩有冷门吗| www.9921.bid-彩店云系统-| www.074527.com-金彩网是正规平台吗| www.962874.com-广东十一选主彩乐乐| www.015771.com-海南七星彩投注网址| www.245320.com-易彩快三免费计划| www.103106.com-彩票任三开奖结果| www.886805.com-彩61可信吗-| www.957924.com-体育彩票改革| www.mb17.com-ct彩投彩票-| www.10be.com-中博彩票下载安装| TT彩票www.526031.com| www.317290.com-玩时彩输了六十万| www.503817.com-彩神8软件靠谱吗| www.581920.com-48cfcc彩富网| www.7189.org-彩虹七-| www.25981.cc-彩虹蓝色-| www.123838.com-体彩专家-| www.045813.com-彩81彩票官方网站| www.bw14.com-快三百分百计划| www.te35.com-时时彩黑彩票骗局| www.8bo.com-匕星彩开奖结果今天| www.83ug.com-信彩人工计划app| www.1215.pw-全民彩票手机版苹果| www.225936.com-快三高级追号| www.316900.com-福彩3d坐标图| www.456793.com-时时彩精准杀码技巧| www.bg94.com-01彩票兼职骗局| www.rw35.com-快三定胆奖多少钱| www.00xs.com-福彩三d丹东全图| www.175061.com-广西好运快三走势图| www.94ww.com-一一一彩票平台| www.657383.com-网络卖彩票-| www.766895.com-学生彩票赚十几万| www.888080.com-福彩三d彩报| www.998108.com-官方澳客彩票网| www.lp29.com-12彩票-| www.15cm.com-彩票店对联-| www.1500.me-高级彩虹屁文案| www.6159.com-如意彩是合法网站吗| www.06600.com-福彩天吉网-| www.39531.cc-豪彩娱乐网址平台| www.286148.com-快三猜骰子猜和值| www.386631.com-韩国联赛足彩| www.754611.com-存送彩金-| www.949876.com-8炫彩是什么彩票| 500彩票www.50024.com| www.222959.com-贵州省彩票中心| www.975617.com-老版够力七星彩奖表| www.339677.com-彩票中奖可靠吗| www.51ju.com-足彩大富翁手机版| www.622445.com-全天时时计划彩神| www.704157.com-体育彩票足球高频| www.4764.biz-中国福体彩开奖信息| www.400439.com-拉人进彩票群话术| www.326153.com-cb8彩软件-| www.900043.com-福彩开店距离| www.2604.cc-江苏彩民-| www.k19.org-网上买竞彩足球| www.90864.com-傲赢彩票下载安装| www.82588.com-足彩19036期| www.049948.com-福彩就发一个独胆| www.700076.cc-2d彩票中奖规则|