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.111782.com-彩票送28元体验金| www.2kk.com-福彩销售提成| www.3886.cm-福彩三d字谜| www.76369.cc-中华彩票网骗局| www.369277.com-下载最新彩票| www.238750.com-腾讯分分彩稳賺| www.373021.com-彩47平台-| www.512788.com-三毛彩吧下载| www.367966.com-明月珰七星彩| www.261308.com-北京3分彩开奖规律| www.520162.com-2019网上售彩| www.829420.com-福彩速查图表| www.910106.com-中国福彩彩吧第一版| www.978504.com-开发彩票马甲犯法| www.bd2.com-彩神大发快三手机版| www.983703.com-快三营业时间| www.hw00.com-十分快三是国家统一| www.220440.com-彩票aqq-| www.8158.bid-澳彩水位分析解盘| www.144398.com-足彩竞猜专家分析| www.an28.com-贵州快三推荐结果| www.55605.com-永利彩票注册平台| www.7728.pw-天天分分彩合法吗| www.94gq.com-体彩排列三和值字谜| www.7656.top-时时采彩个位算法| www.616288.cc-足球竞彩258| www.8233.cc-莱利彩票网-| www.40909.com-1号彩票网址| www.049149.com-耽美彩漫肉少爷三人| www.713502.com-王者彩票可信吗| www.787098.com-竞彩篮球比分新浪| www.855836.com-七乐彩单式30选7| www.912897.com-足彩19053-| www.2745.xyz-彩霸王综合资料| www.8707.loan-利彩亚洲有限公司| www.093538.com-百度彩票开奖结果| www.218205.com-彩票幸运农场玩法| www.70ct.com-鼎丰彩票下载安装| www.5256.vip-2017113彩票| www.18477.com-电视下载派彩| www.59965.cc-百彩钱包-| www.02397.com-体彩天下官网| www.255696.com-彩店宝彩票-| www.832530.com-七彩影视app下载| www.912523.com-网上买彩票输数十万| www.979405.com-好彩双爆多少钱| www.ws.com-河北快三形态图| www.mx57.com-3d彩票分析软件| www.708396.com-鼎盛娱乐买彩票被骗| www.790179.com-广东好彩一开奖号码| www.861002.com-福彩中奖号3d| www.935169.com-优彩网彩票靠谱吗| www.984537.com-彩九彩栗-| www.bj53.com-全国黑彩举报电话| www.tx36.com-甘肃快三助手| www.sm81.cc-彩票坐庄犯罪吗| www.790713.com-七星彩随机号码| www.875700.com-蛋蛋彩预测-| www.950346.com-105彩票软件下载| www.997829.com-福彩3d进位和差| www.dn78.com-中彩票的概率| www.xh02.cc-22彩票app-| www.42118.com-1519彩票-| www.008571.com-胜负彩19039期| www.662131.com-竞彩6x6-| 中彩网www.91233j.com| www.ow81.com-宁夏体彩兑奖地址| www.062320.com-七天彩票骗局| www.188267.com-内蒙古快三49、期| www.258635.com-中国足球彩票| www.9736.vip-826.cc彩票网| www.931236.com-中彩网甘肃快3| www.eo92.com-老快三杀号定胆| www.xh81.com-彩虹6号多少钱| www.06tu.com-彩铅星空画法教程| www.75qa.com-金龙和玺彩画图片| www.1170.vip-竞彩宣传语顺口溜| www.5833.club-体彩365官方下载| www.11646.com-彩乐乐网站倒闭了吗| www.656454.com-k彩线路测试| www.731223.com-易彩堂app怎么样| www.822077.com-足球竞彩网500| www.882601.com-原版正料特彩| www.944898.com-乐发彩注册-| www.997763.com-众彩官网-| www.se1.cc-网上快三是骗局揭秘| www.907988.com-七星彩中五号有钱么| www.975584.com-一定牛彩票足彩| www.cp9766.com-福彩福建快三走势| www.379616.com-高频彩票研究的原理| www.961575.com-快购彩票三官方网站| 500彩票www.547477.com| www.113374.com-河南省福彩网手机网| www.232266.com-时时彩定一胆方法| www.304749.com-澳门新快三走势图| www.364987.com-如何网购彩票| www.437726.com-彩票投注站宣传语| www.522045.com-时时彩怎样分辨虎龙| www.691675.com-新浪胜负彩开奖| www.772351.com-彩票平台分享大全| www.888382.com-爱彩乐上海快三玩法| www.974792.com-南国七星体彩论坛| 500彩票www.931786.com| www.500533.com-英国五分彩票怎么玩| www.569761.com-体育彩票怎么奖| www.628620.com-江西十一选五彩经网| www.209148.com-288彩票平台下载| www.325922.com-彩经网走势图旧版1| www.395462.com-彩虹岛经典小游戏| www.503503.cc-彩虹直播ios| www.568221.com-下彩网可以提现吗| www.636860.com-传统彩计划-| www.697885.com-全民彩票提现快吗| www.771138.com-网投福彩快三佣金| www.898237.com-福利彩票历届开奖| www.961252.com-靠谱的彩票软件下载| www.cai1977.com北京快三开奖就是牛| www.00609.com-18075期足彩| www.83165.cc-福彩3d猫腻-| www.091279.com-大联盟彩票是真的吗| www.54bv.com-凯里福利彩票| www.875906.com-宝马彩票官方网站| www.936201.com-够力七星彩解梦大全| www.987798.com-福彩30选5走势图| www.nx2.com-河北省彩票开奖查询| www.or89.com-北京快三最长大小| www.m13.top-3d晚报乐彩网| www.67yu.com-一分时时彩人工计划| www.3563.net-彩票中的偏态| www.53840.com-多彩贵州的含义| www.151572.com-太湖字谜3d多彩网| www.820649.com-足彩竞猜必发指数| www.910662.com-江西快三和尾走势| www.975421.com-福彩彩票选号软件| 13e彩票www.809183.com| 500彩票www.66653q.com| www.xf56.com-分分钟彩票网| www.52321.cc-快三倍投计划表图片| www.005289.com-福利彩票封盘时间| www.062967.com-彩票店押金会给退吗| www.131528.com-重庆彩礼-| www.625923.com-今晚彩票3d开奖图| www.736491.com-彩虹六号ela| www.839578.com-福彩快三心理学| www.928965.com-中福五分彩是骗局吗| 尊彩www.083025.com| www.356308.com-智能福彩3d-| www.698141.com-长春福彩报纸| www.863535.com-内蒙快三打豹子图| www.1757.vip-31选7私彩平台| www.539410.com-中国体彩智慧门店| www.665716.com-东方一分彩开奖网| www.775096.com-快三多少个号码| www.275398.com-彩票在线计划| www.6mf.com-168彩票注册网址| www.77ub.com-辽宁福彩乐透| www.6201.vip-极速三分彩-| www.01052.com-台北快三开官方网| www.057839.com-兰州体彩中心招聘| www.267312.com-胜负彩19045| www.343427.com-九万彩票平台靠谱吗| www.152666.com-藏宝图丨4s彩票| www.12xv.com-南京快三多少期| www.4684.biz-88彩票预侧-|