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.15il.com-517菠菜网彩票| www.7969.win-排列五开奖彩宝贝| www.26331.com-河北快三投注表| www.67522.cc-购乐彩票app下载| www.101586.com-广西快三和值算法| www.166543.com-精彩10分开奖| www.250201.com-彩中彩平台可靠吗| www.315509.com-七彩山鸡养殖骗局| www.380394.com-彩票撕烂还能兑奖吗| www.507256.com-彩神争霸网页登录| www.572741.com-香港本地彩票app| www.636271.com-彩虹糖闸机-| www.725057.com-快彩平台-| www.791503.com-京东上能买彩票吗| www.859011.com-彩芽音乐-| www.917536.com-必赢彩票新闻| www.973222.com-彩虹倒带歌词对比| www.lg5.com-福彩快三群真的假的| www.od11.com-自动售彩票机合法吗| www.w07.cn-彩票站宣传语| www.45rp.com-彩票店几点关门开门| www.283.date-河南民权彩礼多少| www.3183.top-好彩棋牌-| www.8103.cc-黄金8五分彩平台| www.23685.com-四季彩彩票是骗局吗| www.62296.cc-大赢家时时彩app| www.050345.com-免费下载内蒙古福彩| www.122836.com-天天彩票是真实的吗| www.182014.com-北京福彩-| www.243568.com-彩票倍投app| www.306027.com-春天彩票app| www.365471.cc-福彩3d彩诗迷| www.448665.com-大花猫2彩吧图库| www.536279.com-哪种彩票奖最大| www.657310.com-游戏机出彩票技巧| www.727672.com-福彩中奖号码今日| www.789823.com-易彩全天计划| www.853636.com-天津好彩许明科| www.905603.com-竞彩混合过关计算器| www.962363.com-3d福彩猜字谜| 500彩票www.50080g.com| www.ch58.com-合肥体彩兑奖中心| www.qz70.com-福彩肖立刚-| www.01oc.com-福利彩票选四开奖号| www.60pv.com-非凡彩票诚信服务| www.810.date-彩宝贝彩票杀号定胆| www.5856.org-彩票丢失可以领奖吗| www.15289.cc-彩虹周杰伦-| www.51836.cc-牛蛙正版彩票资料| www.88645.com-梦到的数字中彩票| www.032327.com-百乐彩骗局揭秘| www.101802.com-手机红彩会-| www.157222.com-竞彩单场为什么关闭| www.301188.com-南方双彩app| www.360463.com-买足彩能赚钱吗| www.430583.com-江苏丰彩涂料| www.512091.com-彩票个人所得税最高| www.568040.com-彩票平台前十排名| www.627308.com-红财神报彩图黄大仙| www.684588.com-福彩3d彩报第一版| www.751145.com-台湾彩券官网| www.799650.com-224大众彩票| www.850626.com-竞彩足球赔率计算器| www.892568.com-福彩3地开奖号码| www.940183.com-台北快三是官方的吗| www.984054.com-老徐说彩今日| www.uk92.com-天天彩选四开奖结果| www.5jm.cc-福彩3d丽人杀码| www.49ow.com-八亿彩国际官网平台| www.305.in-足彩竞彩年赚一千万| www.2999.bid-最准时时彩后三计划| www.7544.me-竞彩店投资-| www.15837.cc-6288彩票官网| www.49616.com-官方彩票下载安装| www.83497.com-中彩票技巧-| www.024631.com-省福利彩票事业编| www.086163.com-聚宝盆彩票计划预测| www.135645.com-彩票导航天下特彩吧| www.196606.com-足彩8串1中一亿| www.254057.com-808体彩-| www.313028.com-038彩票pk-| www.367805.com-七星彩番外小馒头| www.444792.com-nba篮彩赔率分析| www.522689.com-彩票走势图5oo| www.578438.com-qq30秒彩开奖号| www.635391.com-彩票中奖扣税| www.857660.com-彩之源网站下载| www.904027.com-花式快三慢动作教学| www.957816.com-大发时快三网址| www.996458.com-彩票软件开发教程| www.cp3.biz-遵义福彩中心地址| www.gy43.com-彩下载app送彩金| www.ub27.com-中国福彩数字3单式| www.r01.cc-体彩怎么买法| www.30fo.com-昨晚出的彩票是多少| www.0176.xyz-约彩票下载安装| www.6226.in-彩神vi5快三| www.01206.cc-足彩竞彩今日预测| www.48151.cc-彩票小鸡图迷| www.81922.cc-彩票中奖最多的人| www.021742.com-苹果熊猫竞彩app| www.076228.com-内蒙快三360开奖| www.123939.com-全球彩安全吗| www.178269.com-五分快三是哪开奖| www.231076.com-广西快三选号助手| www.286068.com-河南幸运彩现场开奖| www.396050.com-雨后一抹彩虹图片| www.494967.com-荷兰三大博彩公司| www.549333.com-锋彩直播app下载| www.615992.com-江疏快三下载安装| www.670411.com-六个彩玩法-| www.726699.com-大地彩票登录网站| www.781077.com-谁玩过幸运快三骗局| www.835292.com-炫彩鸡米花图片大全| www.884074.com-买大小单双彩票下载| www.983365.com-内蒙古快三推荐红号| www.cp5228.com-青海快三开奖查询| www.ij23.com-天天中彩票老版本| www.va72.com-幸运快3彩票可靠吗| www.4gx.com-青海福彩网官方网站| www.43tg.com-七彩阳光幼儿园| www.93uc.com-退伍迷彩倒计时| www.1317.net-美国彩票匿名| www.8782.online足彩大数据模型推荐| www.30478.com-大连市体彩中心电话| www.62682.com-分分彩计划群| www.006163.com-网上彩票平台有哪些| www.054770.com-中国彩app下载| www.119693.com-体彩五码遗漏组六| www.168078.com-中国福彩快三| www.237053.com-足球计算器竞彩网| www.290800.com-福彩3d阴阳走势囹| www.343400.cc-时时彩在哪买| www.390708.com-二四六天天好彩资料| www.555032.com-买彩票中五亿| www.602557.com-真龙彩票不给钱| www.655565.com-体彩彩票中奖分布| www.731137.com-体彩店的布置图| www.782408.com-爱彩乐走势手机版| www.829245.com-帝王彩票骗局| www.880963.com-3d黑彩奖金-| www.955354.com-凤凰彩票辅助器| www.987284.com-七彩乐下载-| 亿万彩票www.234397.com| www.bf10.com-80彩票刷流水| www.mv11.com-彩票大同平台合法吗| www.i15.club-今天彩票的开奖号码| www.15br.com-关于彩票的对联| www.79qc.com-中彩中堂网址| www.971.date-七乐彩杀号公式举例| www.4693.org-也买彩是黑彩吗| www.8592.biz-体彩龙彩给胆| www.30896.com-足彩盈亏指数软件| www.60439.com-c彩31-| www.002317.com-新西兰快三怎么样| www.045647.com-申请网上彩票代理| www.112390.com-送彩金彩票app| www.157877.com-80彩票是骗人的吗| www.222001.com-福利彩票5分钟一期| www.270607.com-第一彩票下载安装| www.334179.com-彩票网大数据| www.379152.com-k彩手机电脑版| www.466838.com-七乐彩结束时间| www.528772.com-复式彩票什么意思|