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.473226.com-福彩任选3中奖规则| www.983018.com-彩玉海棠-| www.6gj.com-手机投彩-| www.563867.com-明天的3d彩涂| www.9035.biz-七乐彩胆拖中胆全中| www.258966.com-竞彩欧赔干货| www.785333.com-海南七星彩票论坛| www.906612.com-彩票团队名字大全集| www.227004.com-彩铅画图片大全人物| www.318094.com-福彩开奖时间双色球| www.440717.com-失信人员中彩票| www.158662.com-亚博彩票平台| www.333257.com-彩票分分快三规律| www.951652.com-彩50-| www.15xs.com-马会彩经一码必中| www.cp6568.com-体彩浙江6+1| www.576816.com-好彩0567app| www.902118.cc-中国福利彩票7彩乐| www.668872.com-五百万奖金是什么彩| www.55287.cc-时时彩必中后二| www.032044.com-怎么推广彩票平台| www.052053.com-正规彩票合买网站| www.8839.com-购彩平台导航| www.901611.com-中国福利彩票游戏机| www.713956.com-uc旭彩-| www.850337.com-外国彩票如何开奖| www.576511.com-快三不出一跨| www.904017.com-d8彩票下载安装| www.cpw| www.95955.com-福彩知识考试题| www.66173.cc-安卓版彩票专选号器| www.dm4.cc-快三哪里可以玩| www.9509.vip-实名制购彩票的规定| www.115374.com-进球彩最新开奖| www.48094.com-山东省彩票兑奖地址| www.118737.com-福彩双色球号码规则| www.436611.com-巴西安伯快三| www.334360.com-万达彩票平台可信吗| www.67nr.com-彩票基本走势大全| www.zg70.com-鑫彩彩票平台真假的| www.3125.com-篮球彩票外围网站| www.747361.com-优质彩票平台| www.94ak.com-易彩里面的钱能提吗| www.365245.cc-购彩iv登录-| www.584792.com-皇冠足彩网址| www.694836.com-什么叫投彩-| www.883631.com-安卓彩票梦想站官网| www.rs29.com-彩票app破解方法| www.756507.com-全民中彩买不了| www.871134.com-体彩超级大乐透| www.943433.com-春秋彩票登录地址| 福彩www.2109d.com| www.9119.pw-彩票刷水是什么意思| www.mh23.com-亚博彩票网址多少| www.6213.biz-福彩社区-| www.248834.com-52彩票-| www.356147.com-体彩属于哪个部门管| www.488060.com-彩票滚雪球玩法| www.367869.com-河北快三3号预测| www.050380.com-玩手机黑彩怎样赢钱| www.125565.com-快播彩票手机版下载| www.306277.com-体育彩票中奖查询| www.22455.cc-e彩app-| www.505733.com-彩8提现消限制| www.64ho.com-开彩票软件-| www.128717.com-飞来福彩吧-| www.215056.com-福利彩票是哪种彩| www.526880.com-中国福利彩票十乐彩| www.823515.com-彩钢板厚度国家标准| www.924789.com-哪些彩票中大奖的人| www.995973.com-中免绿好彩判别真假| www.fz22.com-一分彩技巧-| www.072858.com-9b彩票值得信赖| www.954316.com-重庆时时彩软件| www.f56.site-马来西亚做网络博彩| www.85735.cc-体彩排列三分解推荐| www.385965.com-快三二同号单选遗漏| www.518424.com-福彩事件结果| www.053558.com-快乐彩查询夙| www.133754.com-好彩∫开奖结果| www.198772.com-福彩有10选5吗| www.264638.com-快频彩改为20分钟| www.134334.com-好彩四味爆珠价格| www.28917.cc-体彩票11选5结果| www.79073.com-235彩票软件下载| www.136137.com-体彩竞猜世界杯| www.391236.com-吉林快彩-| www.488445.com-喜乐彩票监管| www.554294.com-山东福彩开奖查询| www.609569.com-uc彩票-| www.670079.com-百度彩票开奖时间表| www.733981.com-众彩网双色球推荐| www.795372.com-3d彩票兑奖有效期| www.861553.com-河南幸运彩号码图| www.927397.com-福建体彩直播| www.977636.com-世界杯足彩分析预测| www.083208.com-传奇彩票安全吗| www.743119.com-新星彩免费资料| www.802662.com-198时时彩注册| www.866289.com-快三有什么秘诀| www.917425.com-必赢彩票app| www.967284.com-彩票预测群-| 幸运彩票www.73166d.com| www.ib39.com-彩票造假-| www.ki38.com-内蒙古福彩官方网站| www.678005.cc-买体彩世界杯| www.829105.com-彩9安卓下载| www.959157.com-下载深圳福彩网| www.fu39.com-河北燕赵福利彩票网| www.4699.biz-牛人晒彩票-| www.756719.com-全民彩票旧版| www.899291.com-足球彩票胜平负开奖| www.994907.com-下载0500彩票| www.ry51.com-搜索安灰快三| www.866165.com-易迅彩票怎么没有了| www.sq24.com-9码也赢不了时时彩| www.19bv.com-刘亮彩票事件| www.0883.win-火星彩票大厅| www.7788.cn-未转变者俄罗斯彩蛋| www.015891.com-幸运彩票骗局| www.77053.com-体彩中奖概率怎么算| www.518176.com-牛彩app哪里下载| www.592448.com-清乾隆釉彩大瓶| www.772495.com-中国体育彩票门头| www.cai5466.com河北省快三预测| www.972365.com-彩票手机投注| www.198612.com-彩神l-| www.260067.com-福彩快三计划| www.661735.com-玩足彩有赢钱的吗| www.212033.com-彩客站-| www.283874.com-彩票六位数-| www.414004.com-民间挂彩是什么意思| www.561376.com-彩票3d图库-| www.640933.com-老彩民乐图-| www.756523.com-彩票竞猜app入口| www.812489.com-彩宝贝3d杀和值尾| www.880280.com-2元彩票网专家杀号| www.949132.com-下载福利彩票双色球| www.987283.com-竞彩足球大小球技巧| www.cp7892.com-易彩票一分快三| www.171076.com-大发快三怎么破解| www.85nm.com-送彩金的app| www.518605.com-高频彩太害人了| www.618841.com-云南省福彩中心电话| www.834404.com-日免软红好彩| www.953549.com-网易足彩单场推荐| www.994397.com-66微彩正规吗| www.dt04.com-忆彩-| www.xj69.cc-甘肃省体彩中心官网| www.154433.com-昨晚7乐彩开奖号码| www.024799.com-彩王争霸app| www.258817.com-彩票随机号码生成器| www.333895.com-体育彩票有几位数| www.886368.com-好运来大发时时彩| www.380311.com-福利七乐彩-| www.8776.org-广东福彩官方网| www.327679.com-广东天彩快三| www.419800.com-易彩app怎么样| www.529197.com-彩虹糖广告-| www.20ur.com-体彩排列五太难了| www.663680.com-福彩3d停止售票| www.763199.com-足球彩票什么软件买| www.877708.com-竞彩足球算赌博吗| www.945599.com-吉林快三多长时间|