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天

知道了
彩票256平台 www.974166.com-七乐彩奖池余额查询| www.fl43.com-进球彩-| www.0rh.com-七乐彩真的假的| www.78pd.com-招财猫彩票计划| www.2837.org-彩吧论坛体彩试机号| www.39672.cc-彩票爱乐透天天中彩| www.014125.com-七星彩前4个号码| www.097880.com-福彩3的大赢家| www.173626.com-福彩快三玩法技巧| www.356119.com-体彩游戏规则| www.449774.com-神州娱乐跟彩票| www.551299.com-三星彩票有诈吗| www.659841.com-时时采彩基本走势图| www.757489.com-购彩代赚领佣金团队| www.851984.com-彩票七位数中前六位| www.924224.com-好彩香烟价格60万| www.985105.com-竞彩打水软件| www.ri75.com-自己做庄5分快三| www.96.com-爱投彩票无法提现| www.74wx.cc-多彩娱乐是真是假| www.1713.cn-今天彩票3d推荐号| www.9779.cm-七星彩专家上官燕| www.53654.com-如何申请体彩销售点| www.000482.com-彩乐乐江苏快3| www.072912.com-穷人买彩票中奖| www.144549.com-腾龙时时彩做号| www.268880.cc-快三什么是全骰| www.358490.com-体育彩票那几天开| www.447559.com-福彩票三d电子晚报| www.541342.com-彩票网怎么下载| www.652165.com-体彩开奖直播电视台| www.739323.com-玩吉林快三犯法吗| www.815685.com-石家庄福彩中心地址| www.889307.com-如意彩票怎么登陆| www.962380.com-福彩3d试机号分析| 500彩票www.500021.com| www.iw36.com-竞彩比分直播新浪| www.c00.net-爱彩乐一分快3技巧| www.36bh.com-七星彩2000期| www.1215.pw-全民彩票手机版苹果| www.7772.win-七乐彩有什么窍门| www.28258.cc-江苏彩票中奖纪录| www.72449.com-彩运网cy123| www.057809.com-3d彩报第一版| www.139506.com-五彩海棠-| www.218077.com-网络私彩代理判几年| www.292596.com-彩45彩票app| www.365923.cc-彩铅幼儿海滩画| www.463351.com-体育彩票微信群公告| www.555099.com-华彩人生1点通下载| www.626902.com-福利彩票好运快三| www.700494.com-竞彩比赛延期怎么算| www.782098.com-7天彩苹果下载| www.860996.com-广东好彩1最新开奖| www.929716.com-时时彩三星和尾| www.60100.com-数字彩大数据统计| www.523457.com-绍兴市福利彩票| www.on17.com-极速时时采彩官方| www.182053.com-共享彩票快三| www.255109.com-大平台彩票排行榜| www.329955.com-快三把我给坑死啦| www.399913.com-星期三什么彩票开奖| www.553254.com-中国竞彩研究团队| www.609899.com-手机qq彩色字体| www.669230.com-天彩计划软件| www.743131.com-人人中彩票网易| www.802658.com-彩界精英独胆双胆| www.867728.com-手机摇彩票-| www.920776.com-36选7好彩怎么买| www.972854.com-彩客网旧版app| www.c99.org-好运来时时彩平台| www.30nh.com-新浪彩网是骗人的吗| www.349.in-求一个福彩3d网站| www.3833.pw-好彩分手歌词意思| www.8986.cn-3g彩票app-| www.55943.com-福彩3d开奖日期| www.98675.com-一分钟彩有假吗| www.059016.com-篮彩比分直播新浪| www.155724.com-重庆肘时彩开奖直播| www.239696.com-玩大小单双彩票| www.311759.com-福彩3d彩报-| www.376165.com-52幸运彩票-| www.563657.com-湖北快三怎么买| www.629611.com-188彩-| www.693556.com-足球竞彩比分赛果| www.769506.com-盈彩彩票真的假的| www.878512.com-彩神通代理会员三码| www.954251.com-下载八亿彩应用| 爱彩www.00ac.com| www.cd27.com-体彩五开奖结果| www.sy69.com-彩票7位数-| www.15uy.com-江苏快三倍投计划表| www.93mq.com-英国皇5分彩| www.2141.vip-时时彩广告词| www.7368.cc-福彩基金-| www.21225.cc-体彩足球-| www.58682.com-3d彩报大花猫| www.044601.com-福彩3d专家预恻| www.123217.com-彩票店怎样合法转让| www.188291.com-河南幸运彩-| www.254060.com-澳客彩票官方网站| www.318541.com-七星彩七开奖结果| www.379573.com-福彩天地3d-| www.531926.com-带菩萨中彩票| www.606186.com-足球彩票停了| www.669818.com-彩色沥青混凝土比重| www.737323.com-香港好彩网-| www.801019.com-彩金铂金黄金价格表| www.869552.com-唯彩会旧版本| www.966383.com-快三倍投方式| 500彩票www.26299d.com| www.cs46.com-全民快三网址| www.sf68.cc-腾讯分分彩平投盈利| www.12vz.com-3d彩票定胆杀号| www.74vp.com-类似好彩爆-| www.0827.date-足彩害死多少人| www.7933.com-七彩椒能活几年| www.22334.cc-拒绝高价彩礼承诺书| www.59825.cc-彩票赢钱-| www.024203.com-双色球中奖彩票照片| www.089575.com-台北快三下载| www.143574.com-长城彩票官方网站| www.210775.com-北京快三走遗漏| www.275667.com-天津市彩官方网站| www.386744.com-老时时彩360开| www.497800.com-彩票单双必胜| www.559149.com-内蒙古福利彩票中奖| www.618984.com-打彩票是啥意思| www.678693.com-足球胜负彩凯利指数| www.744033.com-01官方彩票苹果| www.802770.com-黑龙江好彩快三| www.866970.com-星期一什么彩票开奖| www.919949.com-彩票软件彩缘| www.971127.com-乐米彩票是小米的吗| www.np62.com-福彩中奖规则查询| www.h69.com-火箭彩票平台app| www.27eg.com-599彩票计划| www.201.vip-久盈娱乐四季彩| www.3110.cn-500彩票安全吗| www.7752.pw-足彩胜负走势图| www.18691.cc-大唐平台彩票登陆| www.53412.com-彩票开奖查询25号| www.90735.com-彩票做号软件图片| www.033829.com-神彩争霸ll-| www.162489.com-128彩票网下载| www.293889.com-现在有几种彩票| www.357171.com-多肉情景彩铅画| www.429163.com-苏州彩票中奖案例| www.518026.com-双色球凤彩网钓叟| www.582163.com-重庆分分彩开到几点| www.648811.com-纵彩网一彩种| www.820411.com-足彩即时指数| www.884164.com-五行3d图彩票| www.969419.com-中彩彩票挂机| 500彩票www.786587.com| www.hc27.com-彩8骗局-| www.vm87.com-快三出长龙预兆| www.61.me-怎么戒掉时时彩| www.61vr.com-白菜网送彩金平台| www.701.cn-官网时时彩助赢计划| www.4138.cn-彩虹电影台-| www.040594.com-广西彩票没对大奖| www.189754.com-十分快三技巧单双| www.268017.com-随州福彩社区论坛|