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.825957.com-彩王争霸平台| 旭彩www.565378.com| www.no45.com-中国竟彩网-| www.04fc.com-谜彩天地高清图| www.355059.com-普通人能不能中彩票| www.590159.com-3d彩报蓝精灵| www.831129.cc-大彩烟多少钱| 大赢家彩票平台www.130511.com| www.528.tv-澳门快三下载安装| www.023523.com-福星彩开奖现场| www.419319.com-体彩小终端福建| www.659467.com-澳彩网开奖结果| www.2240.vip-彩站宝电话-| www.35271.cc-买黑彩被骗能报警吗| www.954035.com-网易竞彩正规么| www.049991.com-体彩排列五中一个号| www.211002.com-吉林省福彩中心官网| www.735722.com-福彩3d概率学| www.940820.com-台北快三赢钱技巧| www.mw4.cc-彩经网3d-| www.c88.net-河南体彩网电脑扳| www.79xu.com-体彩排五几点开奖| www.868371.com-快乐双彩基本走势图| www.964956.com-中国体育彩票电脑| www.cai7789.com快三北京开奖走势图| www.lo60.com-好彩票软件-| www.6596.org-七喜彩票-| www.27958.cc-全国第一盛兴彩票| www.362811.com-彩虹象什么-| www.498115.com-彩票代玩给佣金| www.574243.com-巨人彩票在线| www.466044.com-5d彩超多少钱一次| www.617920.com-亿网彩票是不是黑网| www.088016.com-彩神88ap-| www.239597.com-王者彩票诈骗手法| www.12638.cc-快三数字生成机制| www.979081.com-九万彩票app安卓| www.023840.com-青海快三软件| www.566907.com-南京福彩申请条件| www.218887.com-快三最好的投注方案| www.36042.com-体彩跟福彩谁更真实| www.848027.com-古建筑彩绘图片大全| www.18858.cc-彩票988-| www.1780.com-南方花园枫彩园房价| www.366032.com-福彩网站搭建| www.550830.com-足彩胜负任九合买| www.4630.vip-中国体彩篮球竞猜| www.006167.com-腾讯十分彩开奖查询| www.06nr.com-体育彩票003| www.90bn.com-地下博彩好吗| www.3110.cc-南国七星彩手机网| www.787658.com-彩经网排三定胆推荐| www.911133.com-168彩票开奖网站| 大赢家彩票平台www.265990.com| www.mi46.com-好彩店-| www.970.tv-七星彩前四位排除法| www.50755.cc-七星彩解诗网| www.024543.com-彩福彩票安全吗| www.565790.com-王牌彩票9m下载| www.1903.vip-人人彩合法吗| www.686454.com-澳彩-| www.760910.com-好彩0567网页版| www.818904.com-复式彩票投注计算| www.878848.com-江西快三开奖消息| www.949401.com-11选五大彩鲸| www.992664.com-七乐彩复式价格| www.ch03.com-大发快三可以玩吗| www.756141.com-福彩宝贝网-| www.310116.com-山东省体彩中心位置| www.806200.com-福彩3b试机号| www.265192.com-广西快三顺序| www.4913.vip-体彩大乐透复式机选| www.176220.com-江苏快三稳赚计划| www.254086.com-c58彩票安卓| www.223851.com-分分时时彩免费计划| www.176947.com-国家福彩一分快三| www.330367.com-彩票平刷赚钱| www.637214.com-彩虹6号哪个平台的| www.6096.cc-釉上彩图案-| www.31031.cc-彩票中奖怎么样领奖| www.63130.com-310彩票-| www.8557.loan-彩牛网首页-| www.385831.com-福彩兑奖几点开门| www.59929.com-卓易彩票pc版| www.010899.com-五星彩平台下载| www.095555.cc-浙江体彩网11选5| www.055812.com-买彩票中奖数字| www.567382.com-南京彩票店生意转让| www.671351.com-彩一万下载-| www.869173.com-七星彩晴予今晚荐号| www.40nh.com-南阳结婚彩礼钱| www.5667.cn-大丰彩票平台登陆页| www.172308.com-分分快三危害极大| www.561608.com-下载中彩娱系app| www.637823.cc-福彩中心联系电话| www.737010.com-换ip代打彩票兼职| www.805784.com-彩票风云-| www.618575.com-东营体彩中心| 中国福利彩票www.34788z.com| www.120617.com-河南快三组合走势| www.812550.com-新彩网。-| www.9968.in-好运快三游戏下载| www.81162.cc-昨日体彩中奖号码| www.077993.com-安装劬力七星彩桌面| www.502528.com-永胜理财彩票| www.626120.com-福彩晚秋谜底| www.3526.cn-微彩官方-| www.692142.com-福彩质合号码走势图| www.995471.com-竞彩交易冷热指数| www.595596.com-彩票被冒领-| www.677223.com-体彩藏宝图-| www.780540.com-新浪篮彩推荐| www.861559.com-彩票18143期| www.6782.vip-幸运彩票怎么赢钱| www.400294.com-中国福彩中奖金额| www.673669.com-古建彩绘怎样立粉| www.827090.com-珠江彩-| www.962247.com-福彩3d74期跨度| www.dv69.com-易彩彩票软件| www.166066.com-旺彩双色球预测靠谱| www.cp9725.com-福彩手机购彩app| www.877576.com-彩票开奖结果排列3| www.82262.cc-中彩票后的生活知乎| www.050906.com-福彩快三青海走势图| www.0441.xyz-彩贝壳-| www.561493.com-天际彩票下载安装| www.219861.com-福建快三购买| www.334282.com-香港快三玩法技巧| www.464178.com-七星彩预侧安然| www.603863.com-还能买足彩的app| www.758832.com-彩票加盟代理找谁| www.149988.com-福彩全国积分兑换| www.9802.org-500万体彩走势图| www.767048.com-3d彩报今天大怪字| www.mc39.com-彩票app如何| www.32995.cc-淮安中彩票-| www.6471.cc-七乐彩中六个基本号| www.773950.com-重庆十字彩下载| www.655734.com-中国彩代刷-| www.925770.com-香港资料大彩富网| www.4028.cc-新粤彩联盟彩图| www.864086.com-九亿彩票软件| www.49933.cc-带俸禄的彩票金管家| www.92tk.com-新加坡快三开| www.985963.com-体彩p3丹东全图| www.kj63.com-快三万能码-| www.049455.com-彩票收益分析数学| www.533382.com-体彩即开中奖规则| www.220253.com-炫乐彩票-| www.286049.com-信誉第一的体育彩票| www.352177.com-网络玩彩票是真是假| www.200028.cc-中国福彩河南体彩| www.60432.com-凤凰彩票提现不成功| www.189307.com-内蒙古今日快三| www.021.cc-体彩内蒙古-| www.3236.cn-彩879平台-| www.897671.com-东莞体彩网-| www.535432.com-亿彩堂菲律宾| www.589555.com-7星彩开奖图| www.42072.com-安装彩钢夹芯板| www.916297.com-代理的彩票犯法吗| www.973880.com-福彩3d吧图彩谜| 500彩票www.500713.com| www.841513.com-福利彩票公证员|