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.dt99.cc-大发快三破解器软件| www.13xw.com-小小鱼版一彩吧图谜| www.9679.wang-福彩试机号彩宝网| www.87580.com-彩票造假事件刘亮| www.079702.com-彩票助赢在线计划| www.182295.com-佬牛胜负彩-| www.289120.com-大发快三做代理| www.552442.com-彩票选号绝妙技巧| www.696175.com-3d南方双彩网| www.803333.com-五彩戏娃全集百度云| www.885097.com-内蒙古体彩管理中心| www.hv80.com-众彩网火烈鸟| www.s22.cn-双阳区快三赌博案| www.73ds.com-彩帝包肖大论坛| www.3125.top-体彩中心查询电话| www.44570.com-网上彩票倍投| www.036331.com-e家彩票计划官方| www.245230.com-快三稳赚秘诀| www.940513.com-网易体彩开奖现场| www.01617.com-江苏快三走势图振幅| www.045155.com-彩票中奖利器| www.801925.com-福彩开奖青岛快三| www.917586.com-必赢彩票客户端| www.989391.com-818彩票是真的吗| www.fw02.com-时时彩赌博怎么报警| www.h32.space-七星彩兑奖期限多长| www.57na.com-7彩网怎么提现| www.0676.vip-长沙去哪里申请福彩| www.35666.cc-竞彩足球奖金优化| www.90003.com-7彩应用怎么下载| www.093638.com-为什么高频彩票调整| www.167635.com-上海快三开奖结果| www.288725.com-竞彩足球球赛改期| www.413890.com-网络彩播是什么意思| www.537790.com-服务大厅新浪爱彩| www.677311.com-高盛彩票-| www.791061.com-缅甸好彩蓝莓双爆珠| www.896001.com-彩票对打怎么能套利| www.994054.com-彩票分析软件合法吗| www.ed50.com-一分彩规律-| www.b95.club-福彩快3和值跨度表| www.44we.com-黄鹤楼大彩20元| www.3121.win-七星彩黑马赌王版| www.8847.com-专业彩吧走势图| www.78821.com-彩吧彩票注册邀请码| www.067281.com-3d中彩网带连线| www.183661.com-河南快三下载| www.293093.com-河南快三号码走势图| www.398285.com-博彩首存送彩金| www.529144.com-288彩吧精华布衣| www.652094.com-葡京彩票集团官网| www.778324.com-彩乐园2下载app| www.965794.com-体彩大乐透字谜汇总| www.jl94.com-陌陌彩票拖-| www.e93.top-中国福彩网3d开奖| www.59go.com-福彩3的之家| www.2975.win-日本彩票哪里查询| www.13140.cc-今日足球竞彩分析| www.79301.com-线上体彩合法吗| www.067163.com-新版彩经网走势图| www.171073.com-全国彩票开奖| www.272299.com-一分快三中奖规律| www.366146.com-92彩票网-| www.491989.com-黑彩规律能破解吗| www.566198.com-足彩任九错一场| www.637171.com-小米状态栏电量彩色| www.804879.com-七乐彩中7加1| www.885203.com-彩票代玩兼职可信不| www.996671.com-易彩票漏洞-| www.al49.com-七星彩500-| www.tq53.com-体彩投注站申请书| www.09dr.com-福建体彩彩民论| www.86hl.com-3d彩巴开机号| www.2565.cc-有人给我发腾讯彩票| www.8888.la-江苏南通竟彩团队| www.020923.com-中央2台福彩主持人| www.095555.com-中国彩吧更懂你| www.170007.com-金手指甘肃快三推荐| www.298289.com-体彩店装修图片大全| www.372581.com-用彩色造句二年级| www.478314.com-彩312-| www.562357.com-豪彩app安卓版| www.877902.com-彩迷朋友-| www.992304.com-七乐彩拖胆投注表| www.ir63.com-竞彩足球购买大厅| www.l49.cc-网上彩票走势怎么看| www.49al.com-天天赢彩票链接| www.2540.com-福彩之家-| www.05584.com-浙江福彩征召| www.66321.com-千禧彩票线路导航| www.028566.com-广西快三好运走势图| www.124028.com-老彩民心水论| www.815.win-中国彩票开奖作假吗| www.450023.com-pk10彩票-| www.559650.com-体育彩票收藏目录| www.641768.com-体育彩票门脸牌子| www.861088.com-好彩26选2-| www.911903.com-七彩世界app| www.973752.com-飞来福彩吧-| www.vg35.com-江苏福彩快三遗| www.13nh.com-时时彩后二技巧规律| www.77oj.com-陕西福彩快乐技巧| www.2556.live-黑红梅方单挑彩票机| www.036861.com-彩票榜软件下载| www.210814.com-大发快三赢钱的技巧| www.299305.com-爱彩乐推荐-| www.370989.com-中彩网址大全| www.613305.com-彩票注册送88| www.699301.com-竞彩足球直播吧| www.54lh.com-c16彩票安卓下载| www.3745.net-这期七星彩开什么| www.24633.com-彩铅品牌排行| www.82808.com-搜狐彩票图表频道| 快彩在线www.2632k.com| www.qy14.com-大奖分分彩人工计划| www.37ko.com-爱彩下载安装到手机| www.1325.me-七星彩历史同期号码| www.9141.cn-体育彩票金七乐开奖| www.56586.com-天下彩免费资料彩| www.048342.com-福彩7乐彩开奖公告| www.157122.com-快乐彩20选八| www.239700.com-福州快三查询| www.318130.com-福彩公告-| www.379211.com-招聘篮球竞彩分析师| www.567811.cc-全国性彩票有哪些| www.637504.com-海南七星彩注册网站| www.750472.com-福彩包星图-| www.812845.com-九亿彩票软件下载| www.883859.com-博瑞有彩票网站吗| www.981632.com-q彩网快3-| www.dt39.com-内蒙古彩控-| www.vi91.com-江苏快三对子号推荐| www.20qm.com-三晋福彩网手机版| www.1072.vip-时时彩改倍率骗局| www.9911.biz-众彩网排列三走势图| www.45139.cc-彩票pk10负盈利| www.86375.com-六彩开奖现场| www.029870.com-567彩票app-| www.094873.com-中国的彩票可信吗| www.620355.com-助赢彩票娱乐平台| www.775760.com-邯郸市福彩中心| www.980740.com-彩票资质-| www.ad7.com-福彩快三遗漏走势| www.nk33.com-彩票下载送18元| www.0rj.cc-7乐彩app-| www.54lh.com-c16彩票安卓下载| www.846.tv-极速快三稳定计划| www.4723.org-好像中彩票-| www.9658.xyz-3d开奖彩宝网| www.72334.com-福彩3d怎么算| www.028139.com-福利彩票高频彩计划| www.100403.com-金牛彩票网站安全吗| www.160513.com-排三个位乐彩网走势| www.267292.com-体彩中心官网| www.350717.com-diy贴彩膜-| www.419377.com-王牌彩票口碑怎么样| www.512742.cc-今天足彩比赛比分| www.577505.com-体彩排列五中四个号| www.640556.com-环彩国际app| www.765407.com-足彩500万电脑版| www.843961.com-中国体彩工资| www.902439.com-吉林快三一共多少期| www.961659.com-彩票分析专家app| 福彩www.16878m.com|