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.226687.com-中国福彩3b字谜| www.370538.com-全民福彩快3| www.498325.com-01彩票咋样-| www.581625.com-yy彩票登录网页版| www.670102.com-海南彩票怎么玩| www.759927.com-时时彩全天在线计划| www.915639.com-彩票加盟热线| www.975945.com-旧够力七星彩奖表| www.hr89.com-彩票app下载总汇| www.g22.net-苹果彩票下载安装| www.47hp.com-金手指竞彩最新推荐| www.0190.cc-苏州体彩中心地扯| www.8920.online竞彩结束多久开奖| www.52202.com-跟团队买彩票靠谱吗| www.003337.com-怎样上网买彩票| www.081042.com-体彩大乐透论坛| www.158743.com-利盈彩票下线| www.288372.com-安徽快三游戏规则| www.383383.com-自制选号彩票app| www.518003.com-手机彩票导航网址| www.596088.com-900彩票算-| www.678883.com-众购彩票网路线| www.767083.com-三d正版藏机图福彩| www.891769.com-有哪些中彩网| www.968032.com-2004刘亮彩票| www.ld.com-国家江苏快三| www.qq80.cc-体彩玩法种类| www.12wt.com-app809彩票-| www.88sp.com-连连中彩票合法吗| www.3001.vip-福利彩票齐鲁风彩| www.9230.loan-乐彩国际理财可靠吗| www.70867.com-有彩金送的彩票网址| www.039940.com-彩票推荐合买软件| www.132910.com-体彩世界杯竞猜规则| www.215617.com-彩票开奖预测查询| www.293388.com-江苏快三计划表| www.369548.com-福彩3d期藏机图| www.474343.com-足彩任九场中奖信息| www.563496.com-唐韵华彩是骗局吗| www.643099.com-168官方彩票网站| www.865216.com-彩票筛子有规律吗| www.938837.com-亿彩网能赚钱吗| www.999741.com-699彩票官网| www.vz1.com-3d彩宝网-| www.so47.com-五星彩网站-| www.16qe.com-36选7好彩3公式| www.290.cn-七星彩19036| www.21xl.com-qq上说是玩彩票| www.460.tv-四川福彩12选五| www.4005.vip-澳门彩票电脑版| www.10590.com-澳客网足球彩票比分| www.60866.com-河北省彩票中心地址| www.081783.com-老彩民论坛欢迎你| www.159699.com-彩票诈骗立案| www.266275.com-河北福彩排七走势图| www.382316.com-彩票挂机设置| www.512636.com-秋天的景色彩铅画| www.589400.cc-河南快三椎荐号码| www.667331.com-分分彩后二玩法技巧| www.751032.com-高频彩票为什么上瘾| www.828158.com-体彩胜负彩中奖案例| www.906173.com-福彩三d黄河| www.979645.com-360彩票购彩票| www.k29.net-福彩3d表-| www.47tx.com-微信体彩在哪里| www.905.in-山东的一个彩票老师| www.5240.cc-彩票派彩合法吗| www.14066.com-信彩票app-| www.88773.com-中国福利彩票k3| www.044686.com-广东体育彩票开奖| www.186701.com-博牛彩票-| www.258397.com-极速快3是什么彩种| www.331799.com-广西快三高手软件| www.404243.com-哈尔滨马彩王| www.555386.com-旭辉研彩在哪下载| www.646957.com-精确的足彩口诀| www.777129.com-可以网购彩票的软件| www.861811.com-体彩店装修内部图| www.925593.com-金彩网骗局-| www.979153.com-福利彩票官网app| www.sm5.com-彩种怎么玩-| www.py14.com-英国彩票最大奖| www.7wy.com-彩票投汪实战手册| www.58rn.com-中国体育彩票总局| www.0030.live-彩票买几个好| www.7423.top-上海沪南路体育彩票| www.66jo.com-世界博彩市场| www.3983.cm-彩礼三金是什么意思| www.05307.com-怎么玩分分彩压大小| www.49299.cc-青海快三历史遗漏号| www.90760.com-彩63app下载| www.044458.com-足彩让球怎么算的| www.203795.com-体彩排列三开奖号| www.273612.com-澳洲时时彩走势图| www.365353.cc-精彩十分5d-| www.448712.com-山西福彩官网首页| www.534182.com-具前景的体彩官网| www.631223.com-3218彩城-| www.696167.com-中国篮球竞彩网首页| www.769077.com-快三14和值有哪些| www.869575.com-十分钟一次的彩票| www.946681.com-快三害人吗-| www.993337.cc-足彩竞彩打票教程| www.uk6.com-华人彩骗局-| www.pc20.com-彩票赌大小能玩吗| www.6556.org-盈丰彩票登录平台| www.17689.com-胜负彩十四开奖结果| www.57613.cc-彩八仙官网苹果版本| www.024611.com-江西体育彩票中心| www.091666.com-信博彩票是骗局揭秘| www.149444.com-时时中彩网-| www.245200.cc-福彩快三是不是真的| www.308041.com-彩31彩票平台| www.368776.com-大众彩票网站| www.448781.com-彩票倍投计算网页版| www.529891.com-中国彩礼最高的地方| www.644040.com-风彩彩票可靠吗| www.718208.com-美东2分彩是官方的| www.786746.com-福彩有极速快三吗| www.852068.com-博弈310足彩博客| www.907276.com-怎么玩彩票稳赢| www.964491.com-福利彩票计算器| 中国福利彩票www.34788n.com| www.dq16.com-省份快三风险| www.dh88.com-福利彩票买几位数| www.xj04.com-福建福彩3d走势图| www.44er.com-七彩本草滴丸真假| www.851.date-够力七星彩铁公鸡| www.5089.pw-狗的彩票是什么号码| www.9955.cc-天天彩票官网购买| www.011131.com-福建体彩手机投注| www.089935.com-怎么当大发快三代理| www.165460.com-1分钟开的彩票平台| www.318343.com-福彩3di试机号| www.388770.com-腾讯分分彩定位胆0| www.512037.com-画彩铅画简单好看| www.575370.com-牛彩跨度字谜| www.638497.com-苹果色彩图片| www.729714.com-彩票恶搞生成器| www.796484.com-9号彩票登录首页| www.855265.com-有关买彩票的故事| www.901818.com-体彩五走势图带连线| www.953895.com-公牛彩票靠谱吗| www.992345.com-时时彩胆位投注技巧| www.cp416.com-江苏快三哪个平台好| www.jt29.com-彩神安卓下载| www.yv03.com-491彩票资料| www.14wp.com-彩票随机能中奖吗| www.332.cm-彩票网0800-| www.p45.club-福彩快三赚钱吗| www.238583.com-快三客助手-| www.912221.com-体彩87加盟-| www.963909.com-中国福彩股票| www.999786.com-福彩快三多少钱一注| www.cp5330.com-分分快三技巧和值| www.983955.com-彩99平台靠谱吗| www.4799.net-彩虹六号直播恢复| www.9830.cm-星期一有什么彩票| www.69361.cc-九宫图预测彩票尾数| www.019412.com-中彩网网址大全| www.074110.com-宏发快三有什么规律| www.127404.com-足球彩客网-| www.183975.com-福彩3d今日预测号| www.237863.com-派彩-|