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天

知道了
江苏11选5 www.054123.com-万宝彩票app下载| www.050439.com-河南幸运彩最新开奖| www.965327.com-手机购彩uu快3| www.843171.com-慈善福彩-| www.239529.com-分分彩害得我好惨| www.833963.com-彩票返水最高的平台| www.972540.com-彩铅艺术画图片大全| www.05ep.com-彩29彩票违法吗| www.c99.la-福利彩票开奖大厅| www.892732.com-成化有珐琅彩瓷器吗| www.cp3669.com-河南福彩快三一定牛| www.01mu.com-鸲力七星彩-| www.610765.com-福彩3b开奖码| www.355431.com-彩友会网站是多少| www.86612.cc-聚丰彩票网址| www.404358.com-彩票5000万网页| www.9597.cc-今天七星彩预测号码| www.116408.com-彩票分析师证怎么考| www.256885.com-快三走势图软件下载| www.412362.com-中彩彩票苹果| www.45ug.com-七星彩打奖规律表| www.78946.cc-史上最大彩票资讯网| www.958269.com-福彩快3查询| www.464256.com-类似好彩爆-| www.jc53.com-足彩比分直播5oo| www.od57.com-湖北快三未出统计号| www.71511.cc-河南省福彩中心电话| www.824542.com-聚丰彩票下载| www.bb19.com-快三挣钱方法| www.2rs.com-彩票投注站的利润| www.4366.in-中彩票后的生活| www.63712.cc-竞彩比赛投注量| www.930381.com-广州佛山快三查询| www.8412.pw-头头彩票下载安装| www.019459.com-江西福彩软件app| www.794.date-九宫飞星预测彩票| www.315383.com-建盏七彩如何养成| www.602071.com-买彩票不给钱人跑了| www.nj38.com-湖北快三精准计划群| www.82973.com-彩票拉手合作| www.669835.com-体彩有几号码| www.508045.com-唐龙三d推荐彩吧网| www.654142.com-江苏快三三不同计划| www.098912.com-福利彩票大奖| www.180340.com-大发快三是否合法| www.4518.xyz-体彩19039期| www.82863.cc-彩站彩票欢迎光临| www.136969.com-旺彩双色球科学预测| www.337457.com-时时福彩下载安装| www.87411.com-go彩票漏洞-| www.8447.pw-带人玩彩票输了包赔| www.989715.com-大同邮局彩票平台| www.7bh.cc-金凤凰彩票| www.848.in-彩头是什么动物| www.233574.com-体育彩票专家预测| www.75jv.com-河南体彩481彩友| www.098819.com-快5彩-| www.79.vip-重庆时时彩一天几期| www.249.in-天津福彩快乐十分钟| www.7340.top-彩虹民用无人机| www.85363.com-湖北快三遗漏表| www.040300.com-派彩手机版吗| www.595098.com-京东快彩能买吗| www.305408.com-福利彩票35期开奖| www.417736.com-彩53彩网-| www.530117.com-小鹿网络时时彩助手| www.610533.com-玫瑰彩铅画教程图解| www.685712.com-体育彩票p3图谜| www.768654.com-天猫彩票正规的吗| www.850266.com-比特币3分彩| www.934320.com-智博彩票是真的吗| www.996078.com-福彩pk拾项目| www.ga47.com-酷发财团队彩票计划| www.zp14.com-时彩怎么玩-| www.37lr.com-鑫彩晨-| www.656.in-北京时时彩群| www.54702.com-网上投注高频彩票| www.746260.com-网络购彩骗局| www.887236.com-选三型彩票中奖揭秘| 豪彩VIPwww.073818.com| www.wd72.com-沈阳快三是官方的吗| www.98qy.com-福利彩票处长| www.987525.com-彩29彩票com| www.fl04.com-黑彩靠什么盈利| www.h91.com-49彩票平台软件| www.33kn.com-云南快三一定牛| www.307767.com-167彩票-| www.9858.biz-彩票吉利七个数字| www.642325.com-旧版彩吧助手| www.757672.com-亿彩票靠谱么| www.839291.com-贵州快三走势图遗漏| www.902733.com-鸿运彩票网可信吗| www.961042.com-福齐天甘肃快三推荐| 天天中彩www.505151.com| www.ja09.com-微信群里玩吉林快三| www.zp01.com-时时彩为什么害人| www.29bl.com-福建体彩在线投注| www.97ei.com-优惠彩金网址| www.616447.com-竞彩过关对照表| www.42665.com-白菜网送新年彩金| www.033568.com-凤凰网彩网址| www.224338.cc-湖北福彩网开奖公告| www.907907.cc-七乐彩选号技巧公式| www.968414.com-希腊时时彩软件| www.eb98.com-怎么注册快三账号| www.yk83.com-长春彩报-| www.86ph.com-中国福彩招聘| www.8595.org-ok精彩朱正廷| www.42020.com-彩票概率学公式| www.375752.com-刘醒彩虹六号围攻| www.367349.com-彩铅蔷薇少女图片| www.246373.com-江苏省体彩投诉电话| www.357516.com-错过彩票大奖| www.cai3833.com吉林省快三开奖走势| www.9749.cn-彩宝预测-| www.70257.com-网上可以开彩票店吗| www.062391.com-天天乐彩app| www.167498.com-快三走势图今天湖北| www.279111.cc-快三可复式吗| www.318924.com-福利彩票3d推见号| www.101439.com-张路最新足彩分析| www.337810.com-孕妇梦见彩票中奖| www.500314.com-彩票包赢计划| www.666191.com-七星彩票开奖今天| www.vh02.com-江苏福彩网首页登录| www.944.org-澳门五分彩怎么玩| www.184606.com-北京福彩快三开奖数| www.254358.com-爱乐彩怎么样| www.396669.com-国际财富彩票| www.525519.com-彩票服务器多少钱| www.600070.cc-5a彩票网安卓下载| www.192028.com-3分快三走势图今天| www.704228.com-彩票256官方下载| www.07466.com-派彩甘肃快三| www.987400.com-彩票往期查询| www.382185.com-彩仙阁自动挂机安卓| www.531471.com-快三第一个人门户| www.638300.com-色彩图片风景| www.805375.com-七乐彩二等奖三等奖| www.904744.com-免费买彩票-| www.984856.com-网赌高频彩怎么赚钱| www.fq34.com-至尊彩一分快3| www.j40.xyz-福彩今天中奖号码| www.1441.org-大赢家彩票怎么玩| www.17286.cc-代刷时时彩兼职| 彩票3www.891079.com| www.h21.net-七星彩众彩网预测| www.53213.cc-彩乐彩票下载| www.378648.com-幸运彩网福-| www.6659.cm-双色球乐彩字谜图谜| www.606089.com-买彩票号码-| www.ua29.com-怎样安装人人中彩票| www.033692.com-易彩怎么下载| www.799.cc-福建官方体彩网站| www.42317.com-彩票12靠谱吗| www.607639.com-北京多乐彩怎么投| www.679585.com-人人中彩是真的吗| www.659.red-微信关注看快三| www.4692.biz-彩票可以伪造吗| www.12sm.com-彩帝彩票正规吗| www.947821.com-竞猜彩票怎么买| www.62qg.com-今晚足彩专家推荐号| www.019656.com-o1彩票-| www.261744.com-福彩快三未出号码|