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天

知道了
500彩票竞猜 www.005306.com-6762彩票app| www.263732.com-福彩3d乐彩论彩| www.16222.com-彩运网app下载| www.876794.com-彩票的分类和玩法| www.144546.com-爱彩大发乐快3攻略| www.304942.com-体彩19035结果| www.470000.com-境外足彩推荐网站| www.634443.com-七彩狐集团-| www.759193.com-海南七星彩论坛规律| www.f61.shop-中彩票的几率| www.49er.cc-摘彩虹冰淇淋| www.6332.top-福彩3d新彩网首页| www.390728.com-分分彩哪里可以买| www.871713.com-苏州福彩官方网站| www.950434.com-乐彩网lccp下载| 大赢家彩票平台www.529026.com| www.974589.com-众乐彩票app下载| www.gz18.com-盈彩在线合法吗| www.983608.com-第九彩票是什么| www.274644.com-时时彩遗漏提示软件| www.99422.cc-玩彩双色球预测| www.141177.com-关注老徐说彩公众号| www.335752.com-新浪微博第三方彩票| www.543430.com-中华体彩彩报| www.682419.com-足彩购买app| www.888347.com-福彩网的邀请码| 华彩网www.hcw332.com| www.493357.com-足彩开奖什么时间| www.921534.com-足彩胜负彩500w| www.35621.cc-体彩竞彩网首页| www.128173.com-hao.123彩票| www.cai1722.com今日湖北快三一定牛| www.000161.cc-浙江体彩中心官网| www.355367.com-今日凤彩网3d字谜| www.86qw.com-福利彩票招人吗| www.29857.com-福彩中奖在哪里兑换| www.736933.com-大众彩票网pk10| www.573523.com-特区开心七星彩论坛| www.688066.com-深圳福彩作假| www.800406.com-河南省福彩中心位置| www.932558.com-亿彩网手机版下载| www.cai0322.com快3彩票下载| www.62tv.com-莆田市彩票店招工| www.5387.biz-体彩8+2多少钱| www.048.cn-大众彩票网诈骗| www.hr28.com-彩票号码预测神器| www.1248.com-福建体育彩票36选| www.19322.cc-彩发发苹果版下载| www.031197.com-106cc彩票下载| www.892666.com-懂彩帝-| 网易彩票www.067wy.com| www.vt73.com-彩22app-| www.80ay.com-彩票平台o2o| www.232958.com-北单竞彩-| www.592760.com-彩虹6号重下| www.251477.com-幸运中彩app| www.8120.vip-新浪彩票手机版下载| www.994687.com-彩票计划团队骗局| www.pe73.com-湖北快三11点遗漏| www.969855.com-七乐彩4拖6多少钱| www.01316.com-博大娱乐注册彩金| www.450316.com-凤凰平台购彩官网| www.168789.cc-安徽快三开奖一定牛| www.866544.com-昨天体彩出什么号| www.939818.com-代玩彩票招聘| www.995422.com-易彩骗局-| www.cb24.com-快三什么平台好| www.xp11.com-快三怎么打才能稳赢| www.683853.com-推店彩票软件| www.222490.com-彩票平台哪个最可靠| www.qy85.com-腾讯5分彩网址| www.637.cn-竞彩足球软件靠谱吗| www.791051.com-时时彩机器人价格| www.365258.com-香港彩票报刊大全| www.259797.com-京东彩票是正规的吗| www.02212.com-彩神v8计划-| www.ho42.com-上海快三诀窍| www.j63.cn-宝贝计划彩票靠谱吗| www.911811.com-红宇体彩店下载| www.985079.com-彩票8888-| www.cd33.com-中国体育彩票排5| www.f33.live-特区七星彩论坛头尾| www.970702.com-辽宁省体彩十一| www.mb65.com-彩票三期倍投计划| www.39715.com-爱彩彩票输了7万| www.598823.com-易彩乐下载官网| www.668645.com-大本赢彩种大厅| www.730281.com-鄂尔多斯体彩加盟| www.802872.com-彩票查寻结果| www.868799.com-七乐彩杀号彩宝贝| www.930906.com-色彩静物-| www.977545.com-河北彩票快三时间| www.cp161.cc-福彩快三走势| www.pg67.com-足彩最新预测| www.14pf.com-7星彩18143-| www.797125.com-乐彩网靠谱-| www.868928.com-福建省体育彩票31| www.by4.com-福彩快三二十分钟| www.680047.com-什么是彩妆化妆品| www.103508.com-竞彩足球胜平负联盟| www.12344.cc-体彩大乐透怎样兑奖| www.lr92.com-安徽快三走基本走势| www.13se.com-体彩编号哪里看| www.965708.com-江苏快三的中奖方法| 发彩www.50732o.com| www.978774.com-500w博彩app| www.cai2900.com安徽快三开奖一定牛| www.747318.com-23彩票软件-| www.869229.com-七星彩网上投注| www.987102.com-彩迷网怎么样| www.4188.net-七彩网络查成绩平台| www.914377.com-破解彩票漏洞获刑| www.972948.com-彩虹易支付正版授权| 盈彩www.yc7701.com| www.rd92.com-北京单场彩开奖查询| www.23844.com-买彩票如何中一等奖| www.910928.com-福彩快三为何改时间| 福彩www.86267g.com| www.sc55.com-山东彩票彩友沙龙| www.27em.com-熊猫彩票手机| www.034.online-彩虹形成的原理| www.34ot.com-七星彩开奖几套| www.16054.com-玩彩高手3d预测| www.5310.cn-南国七彩星彩论坛| www.077607.com-9亿彩票靠谱吗| www.220895.com-彩票外挂手机版下载| www.311364.com-红旗彩票网站| www.205848.com-私彩平台-| www.189573.com-江苏福利彩票官网| www.998765.com-巴彦淖尔彩票一等奖| www.te71.com-时时彩3星稳定做号| www.320060.com-揭秘时时彩-| www.384285.com-河内一分彩走势图| www.544662.com-立彩彩票真能赚钱吗| www.609232.com-派彩网违法吗| www.668765.com-多彩邪恶3b动漫| www.573985.com-中国电信爱音乐彩铃| www.44810.com-百信彩票-| www.97732.cc-香港时时彩怎么玩| www.614633.com-下载c29彩票软件| www.t46.site-登录优彩网-| www.382693.com-19022足彩分析| www.70567.cc-什么彩票注册送20| www.105667.com-c59彩票下载安装| www.et21.com-信誉高的彩票网站| www.ux51.com-新时时彩软件| www.32tn.com-天马彩票全天计划| www.1078.org-快三计划群合法吗| www.7005.top-四川七彩林科| www.25292.cc-彩色铅笔素描入门| www.68299.cc-网上投注快三骗局| www.011206.com-云南时时采彩记录| www.998038.com-福彩北京快乐8官网| www.at23.com-老谢说彩预测双色球| www.xt42.com-该坚持买彩票吗| www.23ia.com-网赚快三计划| www.816411.com-快三两同号统选| www.791324.com-重庆时时彩参考计划| www.253846.com-58彩票旧版-| www.422823.com-体育彩票的图片| www.215650.com-青海快三今天推荐号| www.15322.cc-遇见彩虹有什么寓意| www.oz9.com-内蒙古快三爱彩乐| www.q88.me-广西福利彩票网|