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.287388.com-今日安徽快三推荐| www.431117.com-三月份开奖号富彩| www.559029.com-满洲里市福彩中心| www.657964.com-安徼快三开奖| www.38ji.com-彩陶王酒价格及图片| www.3078.pw-七星彩2282-| www.19518.com-中彩网全国走势图表| www.78272.com-体彩大乐透168期| www.120245.com-久久发彩票官方网站| www.222217.com-查询彩票中奖号码| www.318633.com-大发快三算法| www.442678.com-足彩蓬蓬-| www.561997.com-全中彩票可以信| www.661912.com-福彩五分快三违法吗| www.805000.com-久久彩票网官方端口| www.911434.com-吉林体彩中心地址| www.981374.com-093彩票导师| www.73oo.com-迪士尼彩乐园注册| www.4883.biz-信彩黑平台曝光| www.31299.cc-鄂尔多斯彩票站转让| www.90953.com-新浪开奖直播彩票| www.072038.com-郑州彩票站转让| www.407600.com-彩票站图片大全| www.585814.com-福彩双色球派奖9亿| www.689885.com-盛大娱乐彩票网址| www.788673.com-河南彩票双色球查询| www.898726.com-美团可以买彩票| www.un1.com-好123彩票网址| www.ve65.com-福彩欢乐生肖| www.38yx.cc-乐彩双色球字迷| www.3396.cc-k73彩票app-| www.10823.com-3d牛彩藏机图正版| www.81748.com-彩票中国最多的人| www.054782.com-福彩6十生肖走势图| www.190050.com-江苏快三计划样| www.293976.com-卖体彩利润怎么样| www.425130.com-彩票中心电话号码| www.551224.com-体彩大乐透合买图片| www.678117.com-贵烟好彩进价| www.782513.com-快三有鬼吗-| www.878168.com-500万彩票安卓版| www.xy79.com-利澳彩票app| www.59bz.com-彩票店有任务要求吗| www.2457.top-北京快三冷热号走势| www.8971.loan-中国国彩app下载| www.93528.cc-太湖三字诀乐彩论坛| www.066804.com-彩票模拟投注软件| www.137556.com-彩票作假-| www.223337.com-一分快三投注下载| www.303797.com-鑫彩网真的黑| www.378879.com-3d字迷双彩论坛| www.615207.com-彩票网站值得相信吗| www.695494.com-三六零竞彩比分直播| www.778527.com-釉中彩好吗-| www.890389.com-全民彩票网app| www.954096.com-陆慧明竞彩专栏| 名门彩www.33997p.com| www.gs02.com-093彩票网址| www.zm62.com-彩神8网站-| www.30gh.com-国彩开奖结果| www.1128.net-搜索山东福利彩票| www.8251.xyz-彩票要怎么买才能中| www.33479.com-彩钢琉璃瓦-| www.80712.com-3d彩吧预测总汇| www.034038.com-七乐彩票有托吗| www.160233.com-968彩票官网| www.253045.com-时时彩走势图彩票网| www.331967.com-甘肃快三开奘号| www.408403.com-7星彩彩票app| www.519966.com-趣彩彩票安卓版| www.591820.com-977彩票平台苹果| www.670596.com-彩票好听名字大全| www.752617.com-彩票日存优惠| www.889732.com-彩票最好的投注方法| www.951691.com-5360彩票怎么样| www.997329.com-利彩工具3d走势图| www.lo3.com-江苏快三时间调整| www.qk32.com-福利3彩票开奖结果| www.07fn.com-aaa商企康宝彩迷| www.79cy.com-彩泥怎么做-| www.1905.net-内蒙快三最牛预测| www.7767.pw-今日开奖彩宝网| www.26768.com-七星彩三字现多少钱| www.75278.com-福彩三d图谜第三版| www.027057.com-五分彩提现提不出来| www.108619.com-七星彩開獎結果| www.178916.com-福彩快三官网直营| www.253957.com-彩票开奖爱乐彩| www.328110.com-体彩三码遗漏| www.398119.com-福彩3d周几开奖| www.634168.com-七彩世界家具| www.722169.com-体彩门头图片| www.797558.com-彩99老版-| www.873337.com-湖北体育彩票网| www.969988.com-双彩网网址导航| www.cf54.com-哪里可以买吉林快三| www.um89.com-七星彩中几个号有奖| www.09od.com-玩彩网官网app| www.74zj.com-彩票快餐怎么样| www.1602.com-3d杀码家彩网| www.03075.com-中彩彩票中福快三| www.56335.com-和竞彩有关的网名| www.000374.com-57彩票平台-| www.068266.com-最新彩票开奖公告| www.133477.com-福彩3d双福彩票网| www.211122.com-五分彩违法吗| www.282078.com-天干地支测彩票绝招| www.432612.com-体彩大乐透查询号码| www.527445.com-百乐彩注册网址| www.672637.com-手机买足彩的软件| www.748765.com-95彩票邀请码| www.818480.com-彩乐汇是干嘛的| www.890808.com-青岛快三开奖走势图| www.959137.com-旺彩彩票能网络购彩| 500彩票www.50080o.com| www.ev65.com-旺彩大乐透-| www.vv38.com-山东体彩扑克3走势| www.07pk.com-刚力彩芽爱情| www.71cq.com-永盛彩票二维码扫描| www.0966.bid-买高频彩输了| www.00719.com-特彩把旧原版| www.53319.cc-500彩票客服电话| www.94943.com-彩票主任判死刑| www.051517.com-九万彩票安卓版| www.151649.com-彩票买几个数| www.234045.com-玩彩票的下场| www.304864.com-彩票app下载送钱| www.368380.com-体彩6十l兑奖规则| www.453923.com-推荐个足彩群| www.535182.com-易彩堂下载地址| www.645677.com-众发彩票玩法| www.728926.com-好彩票有幸运28| www.786086.com-北京福彩快乐3开奖| www.858921.com-胜负彩预测-| www.920214.com-福彩纽约三分彩| www.974615.com-众彩网乐天-| www.mm77.com-彩票预测专家双色球| www.i55.cc-体彩福彩开将结果| www.32vw.com-惠民乐彩票提现| www.795.club-彩票易购网-| www.4522.vip-七星彩19037| www.9278.pro-乐彩软件正规吗| www.56394.com-河北体彩管理中心| www.95978.com-彩票中心是垄断| www.051676.com-九龙福彩是不是骗| www.148068.com-体彩大赢家app| www.228861.com-下一期好彩1预测| www.297637.com-南京体彩兑奖地点| www.359956.com-约约彩票下载| www.433535.com-中国体育彩票排列| www.521274.com-有专门破解黑彩平台| www.586097.com-彩六118版本| www.651700.com-联运彩票幸运28| www.791405.com-彩经网排列三百位| www.859287.com-916彩票手机版| www.917098.com-春天彩票合法吗| www.970523.com-河北福彩排七| www.ex8.com-快三在线机选| www.mx78.com-彩票大数据定律| www.x66.top-彩票中奖需要福报| www.43vk.com-挂彩了-| www.087.cc-天刀射利彩签在哪做| www.2783.cn-福彩3b彩报| www.7630.shop-金凤凰网站彩票网|