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.4258.vip-优乐彩票下载| www.43922.com-福彩交流群是骗子| www.001713.com-七星彩奖金怎么计算| www.088760.com-福彩网网投安全吗| www.169500.com-内蒙古快三下载| www.343469.com-能试玩的彩票网| www.444402.com-彩31平台可靠吗| www.550015.com-购买足彩的软件| www.666251.com-乐彩国际注册| www.758655.com-顶尖彩票提现| www.860504.com-福利彩票江苏快三| www.927960.com-青海省福彩中心地址| www.984171.com-凤彩字谜-| www.hr69.com-新浪彩票网走势图| www.e42.club-马来分分彩杀号| www.cai2200.com河北体彩十一选五| www.c60.in-今天体彩排三开奖号| www.746045.com-官方彩什么意思| www.885183.com-中兴彩票网站| 300彩票www.c300.cc| www.fp74.com-福彩3d有规律吗| www.zz32.cc-上海开福彩店| www.32sl.com-2017够力七星彩| www.3733.com-富邦彩票-| www.9756.com-福利彩票作假视频| www.63623.com-福彩三天计划的| www.028036.com-内蒙古福彩大家乐| www.112367.com-彩票天天签到送彩金| www.191365.com-凤凰vip快三| www.270988.com-彩77app苹果版| www.394960.com-彩虹岛游侠一转| www.524522.com-圣地彩结果-| www.616140.com-拾彩贝-| www.693023.com-江苏体彩手机投注| www.777776.cc-鼓励买彩票的话| www.888871.com-彩店宝合法吗| www.972487.com-游彩网app下载| www.kq.cc-华夏彩票-| www.pf64.com-网络彩票骗局大揭秘| www.05gr.com-彩铅画渐变教程图解| www.81aw.com-下载彩神通彩票| www.2179.win-彩票当日开奖| www.8170.org-各种彩釉大瓶| www.31892.com-18075足彩推荐| www.78965.cc-999彩票软件下载| www.034977.com-幸运彩票自动计划| www.194511.com-体彩虚拟e球彩玩法| www.272113.com-立彩助手官方网站| www.372455.com-七彩色头发图片| www.475695.com-599彩票骗局| www.560190.com-kk彩票下载安装| www.632735.com-体彩排五连线走势图| www.708396.com-鼎盛娱乐买彩票被骗| www.789083.com-竞彩神规律-| www.867092.com-58彩-| www.942160.com-高频彩票将停售| www.999808.com-广东福彩好彩一预测| www.ul9.cc-福利彩票开奖查询| www.rn15.com-5分钟一开什么彩票| www.12xx.cc-竞猜快三与快三区别| www.86th.com-中国禁止网上彩票| www.2496.vip-东盛彩报3d-| www.8589.bid-百宝世嘉彩票怎么玩| www.63383.cc-足彩19046分析| www.024200.com-福彩快三首页| www.pt76.com-人人红彩票安卓版| www.26jr.com-体育彩票扫码兑奖| www.824910.com-福彩3d码积-| www.932506.com-查上海快三开奖公告| 吉利彩票www.80075x.com| www.hp73.com-杨震足彩新浪| www.a11.website体彩大乐透兑奖结果| www.35gq.com-南国体彩开奖直播| www.428.mobi-368彩票网-| www.4932.cc-彩票打码量是什么| www.03764.com-彩票店私吞一等奖| www.49987.com-玩彩网app正规吗| www.96156.cc-足彩低赔什么意思| www.062684.com-大发优信彩票| www.266737.com-快三一注豹子多少钱| www.348198.com-众乐彩破解软件| www.8518.cc-彩贝游戏公众号| www.54804.com-彩票预测最简单方法| www.021264.com-山东福彩网开奖查询| www.102626.com-k彩1970-| www.172305.com-幸运快三投注技巧| www.359159.com-怎么买体育彩票流程| www.435118.com-丰大彩票是真的吗| www.530339.com-彩票奖金等级| www.666493.com-中国彩吧试机号查询| www.739817.com-炫乐彩票可靠吗| www.811057.com-以彩开头的成语| www.876485.com-彩票平台系统源码| www.cai8377.com彩票开奖双色球| www.550055.com-福彩怎么扫码兑奖| www.656919.com-国内官网正规彩票| www.779366.com-彩票679软件| www.858490.com-福彩彩迷天地| www.924422.com-六亿彩票下载| www.973581.com-一定牛河南快三遗漏| www.kr27.com-云南有福彩快三嘛| www.e19.top-下载全民彩票大厅| www.33fh.cc-赢彩彩票暂停销售| www.1415.wang-重庆十字彩怎么玩法| www.8164.me-海外电竞博彩| www.26206.com-中彩吧是正规平台吗| www.67613.com-体彩直播哪个台| www.yg88.com-分分彩后一计算公式| www.731063.com-胜负彩开奖历史数据| www.833848.com-彩票软件哪个比较好| www.923526.com-亿彩彩下载-| www.984869.com-长城彩票官方网站| www.id46.com-80彩票是骗局| www.zq65.com-3d彩报图今天的| www.14hx.com-天津体彩11网选5| www.296.cm-七星彩哪里有卖| www.4568.net-网络彩票源码| www.9968.net-七彩号码开奖号码| www.63503.com-浚县彩礼多少钱| www.015993.com-唯彩会彩票旧版本| www.079657.com-90彩票是骗局吗| www.137291.com-网上做兼职彩票| www.206854.com-152彩票ios-| www.271861.com-中原彩票网下载| www.396721.com-体彩3走势-| www.513571.com-时时彩二星直选规律| www.579129.com-中奖彩票分享| www.642350.com-彩汪汪app-| www.744223.com-彩宝网查询-| www.092958.com-私人彩票平台| www.187391.com-时时彩漏洞赚钱教程| www.66ws.cc-天地5分彩开奖结果| www.2487.xyz-体彩一e球彩| www.9269.biz-乐彩投资靠谱吗| www.65809.com-彩容网触屏版首页| www.022581.com-福利彩票预测网站| www.088974.com-福利彩票复式4十1| www.137359.com-中彩网媒体擂台赛| www.206423.com-广东福彩快乐彩| www.272722.com-鑫彩网彩票-| www.495111.com-如何打好竞彩| www.560990.com-有厘模式的彩票平台| www.622609.com-甘肃买彩票中奖| www.686085.com-3d彩票杀码-| www.757477.com-58购彩-| www.895706.com-辽宁竞彩快三| www.958904.com-吉林快三购买技巧| 天朝彩票www.89893.cc| www.bw82.com-吉林的快三出来| www.ro87.com-深圳快乐彩20公式| www.10fs.com-体育彩票五位数开奖| www.72fs.com-什么是幸运时时彩| www.0853.net-风发彩票-| www.8158.red-基诺彩彩种-| www.22385.cc-彩票6十1开奖结果| www.60638.com-132彩票com-| www.026352.com-赢家彩票平台骗局| www.091341.com-南国彩票论坛区| www.144698.com-福彩3村黄金杀码| www.244055.com-甘肃快三兑奖规则| www.308567.com-一分快三倍投计划表| www.370119.com-跳快三锻炼身体吗| www.448548.com-3d梁博说彩小燕子| www.527965.com-飞来福彩吧靠谱吗|