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天

知道了
5分快3 www.431.tv-31选7彩宝网| www.7298.shop-分分彩做号软件下载| www.14432.com-看七星彩规律的方法| www.48940.com-瑞彩祥云x-| www.81398.com-昨晚彩票出什么数字| www.034937.com-网上有几个彩票平台| www.238371.com-快三赚钱方法大全| www.307877.com-解梦七星彩号码| www.368626.com-七星彩规律拆奖图规| www.452367.com-附近的彩票站在哪里| www.536116.com-体彩是多少数字| www.639261.com-上海福彩查询| www.714133.com-彩票资讯彩客网| www.781311.com-微彩平台骗局揭秘| www.845171.com-下载360彩票官网| www.905539.com-足彩世界杯-| www.984027.com-快3购彩大厅| www.hw04.com-北京福彩中心在哪里| www.yh42.cc-福彩十五选五开奖| www.14aj.com-五分⑥和彩特尾计划| www.76rk.com-jz彩票-| www.0817.xyz-足球彩票哪里能买| www.8035.top-十字彩怎么玩| www.23047.cc-手机彩票买大小单双| www.59654.com-赢彩彩票是真的吗| www.019129.com-彩票达人中奖秘密| www.079028.com-9彩票网-| www.132987.com-竞彩2串1什么意思| www.199575.com-福建快三推荐号| www.260655.com-福彩3d输几十万| www.322564.com-竞彩足球最多穿几场| www.383108.com-体彩有几等奖| www.533622.com-大乐透彩票怎么看| www.602400.com-彩票破了一点点小角| www.666190.com-今天开什么奖七星彩| www.731316.com-易彩堂平台安全吗| www.793961.com-职业博彩玩家| www.859330.com-彩票历史对比器| www.910236.com-彩神全能计划软件| www.964471.com-竞彩普及日强胆推荐| 幸运彩票网www.33598m.com| www.ce27.com-有人买快三亏钱吗| www.qp84.cc-pc彩票是啥意思| www.33oo.cc-3d彩库图吧-| www.206.cm-秋天彩铅画图片落叶| www.2778.biz-河北福彩全部开奖| www.7271.top-彩虹r台分享码| www.17411.com-亚洲杯足彩比分竞猜| www.52999.cc-春节时时彩停运时间| www.91261.com-好彩蓝莓爆珠产地| www.036602.com-竞彩足球串关大奖| www.155512.com-开什么彩票店最赚钱| www.227599.com-go彩-| www.287800.com-网站合买彩票| www.365523.cc-彩铅桃花林怎么画| www.441134.com-澳门赛马结果及派彩| www.521023.com-彩票产品的定义| www.579322.com-燕照风采福利彩票| www.627051.com-福彩体彩网互动专区| www.684114.com-恒大彩网下载| www.734977.com-上海福彩快三赚钱吗| www.785085.com-小米福彩-| www.829811.com-彩票大师于海滨| www.889182.com-福彩3d胆码预测王| 大赢家彩票平台www.917787.com| www.ga83.com-河北燕赵福彩排列七| www.vf40.com-彩票投注网站正规吗| www.30.vip-今日开什么七星彩奖| www.52wf.com-时时彩追号技巧| www.498.cm-时时彩彩票群qq群| www.3167.cm-大通彩票线路导线| www.7826.shop-如何让彩票提前开奖| www.17666.com-什么彩票8位数| www.53066.cc-重庆时时彩走势| www.87234.cc-星彩网app-| www.027933.com-彩友多软件合法吗| www.922261.com-2365彩票网-| 500彩票网www.61655p.com| www.iu83.com-竞彩网首页计算器| www.vs45.com-乐购彩票合法吗| www.2ln.com-竞彩输了好多| www.32ux.com-足彩竞猜网结果| www.3093.cn-成都福彩中奖规则| www.6798.in-香港彩天下了78| www.03118.com-佛说彩票-| www.75819.com-香港赛马彩票平台| www.006254.com-湖北快三一牛| www.058387.com-汤姆克兰西彩虹六号| www.177174.com-福彩快三大奖| www.232483.com-足彩规则-| www.286398.com-快彩网下载-| www.365166.cc-重庆三分彩怎么玩法| www.429016.com-极彩在线登录| www.508563.com-9万彩票下载app| www.563588.cc-彩球提现靠谱吗| www.617061.com-买彩票怎么看中奖| www.671051.com-全国农村彩礼法| www.730157.com-彩尊登录原版| www.787567.com-竞彩篮球怎么买| www.839688.com-彩色耐磨硬化地坪| www.889370.com-神彩网24码-| www.932956.com-一分快三靠谱吗| www.968454.com-福彩中心作弊事件| www.mp72.com-彩票送彩金20| www.zo88.com-贏钱彩-| www.12bf.com-浙江七乐彩走势图| www.65qm.com-福彩3d鑫马快报| www.778.cn-彩神l外挂-| www.3549.vip-福彩3d九宫格图| www.7888.pro-中发彩票官方网站| www.15753.cc-动漫彩铅颜色搭配| www.45240.com-彩票十选五网址| www.77538.com-e彩票投注网正规吗| www.019123.com-利彩一分快三稳定性| www.070803.com-足彩咨询师-| www.121070.com-福利彩票聊天群| www.173671.com-快三哪个平台倍率高| www.367276.com-新彩吧网站新彩吧| www.434383.com-雅彩彩票提现安全吗| www.512525.com-儿童彩铅画花朵| www.565162.com-703彩票应用下载| www.613271.com-体育博彩论-| www.665415.com-北京彩票店转让| www.719311.com-广东福利彩票| www.777283.com-宝盈彩可靠吗| www.890049.com-快三猜大小单双技巧| www.944933.cc-百信彩票网址| www.979853.com-恒大彩票下载安装| www.cai8555.com彩神大发快三| www.gu09.com-梦想彩票官方网站| www.tn41.com-彩票七乐彩开奖结果| www.w28.vip-快三盈利-| www.31qp.com-七乐彩每周开几次奖| www.500.la-怎么在黑彩网站赢钱| www.2414.top-好彩足球彩票正规吗| www.6398.biz-大富贵彩票群计划| www.01675.com-易彩网双色球走势| www.55305.com-时时彩平刷方法| www.86862.com-山西快三54期查询| www.024716.com-竞彩奖项-| www.079852.com-55彩票官方最新版| www.126601.com-七星彩彩票结果| www.176115.com-快三平台哪个返点高| www.279898.com-手机时时彩app| www.339474.com-最专业彩票分析软件| www.388639.com-购买快三月入30万| www.493266.com-幸运彩票网是真是假| www.544300.com-黑彩代理怎么返点| www.609581.com-全彩助手app| www.661712.com-足彩庄家永远赚钱| www.730872.com-南粤风采好彩三| www.783563.com-国际福彩5分钟| www.833789.com-大家赢彩票下载安装| www.879214.com-亿彩网-| www.954695.com-彩票宝贝-| www.986405.com-彩票课堂-| 冠赢彩票www.035989.com| www.bd76.com-快三单双大小规律| www.nf10.com-手机破解彩票平台| www.m16.shop-玩彩票输了十几万| www.21qw.com-688.cc彩下载| www.84el.com-花生娱乐彩票| www.0379.xyz-李承红休闲快三教学| www.5113.net-中彩网大擂台|