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.135526.com-农村开彩票店怎么样| www.066660.com-网络彩票危害| www.576060.com-分分钟快三怎么玩| www.803979.com-华人测速彩票合法吗| www.896779.com-彩票挂机软件| www.bs89.com-彩票资料大全| www.j11.org-深圳福彩网开奖结果| www.52db.com-创意水彩画教案| www.1987.xyz-七星彩投注平台| www.659904.com-顺赢彩票网-| www.653458.com-49c彩-| www.835915.com-青海福彩网小黑板| www.964501.com-3d彩票开奖直播| www.dv14.com-五星彩票是假的吗| www.26aj.com-网络彩票销售违法么| www.1662.in-彩票预测大师必中| www.921632.com-中彩票的密码| www.23lp.com-南充市福彩中心站| www.2683.cn-6288彩票怎么样| www.198346.com-福彩3的正版藏机图| www.764879.com-打印啦彩票| www.019243.com-福利彩票多少钱一张| www.222943.com-大发快三全天计划网| www.336629.com-河北省福彩中心地图| www.3440.org-彩票站微信营销| www.765485.com-福彩快频彩下载| www.857798.com-新盈彩平台登录| www.931912.com-中彩首席导师金振国| 彩之家www.66czj.com| www.669607.com-福彩6加1开奖结果| www.247141.com-江苏快三有假么| www.354409.com-福利彩票中了3个亿| www.457122.com-中国中彩票的人| www.832958.com-时时彩专业版计划| www.921332.com-甘肃福利彩票app| www.977035.com-彩礼法律规定六万| www.sc79.com-腾讯时时彩app| www.06au.com-儿童彩笔套装| www.94du.com-快开是基诺型彩票| www.4011.vip-红彩网网址-| www.5985.cc-彩运指彩票走势大全| www.76zk.com-即开型彩票都是骗| www.117283.com-快三投注-| www.66uo.com-3d彩宝彩票官网| www.89za.com-百亿彩票巨奖| www.08879.com-福彩双色球是假的吗| www.68665.com-福彩10分钟大转盘| www.077298.com-彩票赌注那个违法吗| www.174807.com-快三哪几个省有| www.276186.com-那个彩票网站反水高| www.358784.com-体彩7位数的叫什么| www.37th.com-陕西福彩块三| www.527911.com-时时彩360遗漏| www.444369.com-彩票app素材| www.331712.com-靠谱的体彩官网| www.201304.cc-七星彩坐标走势图| www.83873.cc-代理彩票站多少钱| www.809034.com-彩票号机选中奖过吗| www.879537.com-ios上彩票app| www.627056.com-中国福彩3α| www.739632.com-福彩3d好中奖吗| www.895061.com-爱投彩票关闭| www.bx50.com-广西福彩短信投注| www.s06.com-广西快三人工计划| www.66do.com-华彩二级-| www.927967.com-高频彩是赌博吗| 万彩网www.wcp666888.com| www.yd41.com-彩票新韩国快三| www.87sm.com-幸运十分彩开奖结果| www.4029.shop-英国365博彩公司| www.21162.com-体育中心软件彩票| www.819566.com-体育彩票阜阳中心| www.406914.com-彩票代理犯法么| www.46700.com-时时彩小鹿计划| www.823435.com-闲情好彩新粤彩报纸| www.38dx.com-时时彩大全-| www.35.link-福利彩票双色福建| www.81pc.com-竞彩足球3串1中奖| www.393675.com-昨天晚上体彩出什么| www.3080.in-今日福彩开奖直播| www.ld41.com-大赢家—购彩大厅| www.62020.com-彩吧论坛首页彩票| www.76gz.com-七乐彩守号图| www.308766.com-万彩吧高手预测| www.017612.com-彩票印象客服| www.22337.com-高价彩礼-| www.90543.com-赢彩资讯下载app| www.060978.com-买彩票算不算犯法| 9号彩票www.80767n.com| www.82sa.com-竞彩串关最高奖金| www.9691.in-三d彩宝网走势图| www.16581.com-足球竞彩推荐网| www.3273.win-时时彩二星胆码| www.898223.com-香港百彩网免费资料| www.981732.com-567彩票靠谱吗| www.ct12.com-彩票黑平台-| www.98wv.com-江苏体彩7位数直播| www.2833.wang-东莞彩乐糖果电话| www.586771.com-立彩彩票不能提现| www.909468.com-唯彩会彩票-| www.54659.com-网上彩票群计划| www.995775.com-足彩盈亏指数应用| www.6019.in-彩票不能在线购买| www.106641.com-彩77苹果版下载| www.517316.com-福彩3d字谜图迷| www.623744.com-港澳国际彩票| www.700097.com-2018彩票弃奖| www.788888.cc-胜负彩14场开奖| www.864683.com-彩膜和钢化膜的区别| www.969681.com-福彩快三没规律| 大赢家彩票平台www.371957.com| www.10258.com-新浪爱彩官网合法吗| www.73935.com-cp彩票怎么样| www.814444.com-今晚体彩排三出奖号| www.717962.com-网上世界杯彩票| www.923408.com-人人中彩票可靠吗| www.488004.com-网易彩票资汛| www.bj74.com-1分快3彩票安装| www.9433.vip-500彩票靠谱| www.6168.in-黑马时时彩人工计划| www.1ao.com-彩神安徽快三下载| www.57di.com-中彩短信-| www.949.me-体彩七位要不要顺序| www.4776.com-手机澳客彩票下载| www.726143.com-双色球彩宝贝汇总| www.cp9508.com-中彩官网下载| www.y55.in-大无限彩票如何注册| www.gg1.cc-七星彩游戏玩法介绍| www.73448.com-牛彩藏图正版藏机图| www.045454.com-彩神通代理版| www.872521.com-四川福彩网官方网站| www.fd69.com-中国第一网站快三| www.451259.com-彩票到底造没造假| www.62lh.com-人工智能彩票app| www.525114.com-重庆彩票投注站| www.4619.biz-彩票中奖的秘密| www.657344.com-彩票过滤工具靠谱吗| www.796149.com-彩票对比器360| www.953985.com-彩票诗迷-| www.25qn.com-华彩app官方下载| www.55082.com-足彩滚球大小球公式| www.96655.cc-彩票黑募-| www.024839.com-安装大乐透体育彩票| www.118107.com-中国的彩票有假吗| www.202269.com-福建福彩官网下载| www.193893.com-神圣彩票是真的么| www.317085.com-黑龙江时时彩首页| www.563007.com-q彩网网站是什么| www.94220.com-责任彩票认知篇| www.21198.cc-彩神lx官网-| www.035000.com-高反水彩票投注平台| www.5522.cc-河北省体彩中心网站| www.623419.com-财富彩票骗局| www.711126.com-名鸿彩票-| www.814062.com-极速1分彩下载| www.748203.com-中彩彩票规律| www.835453.com-彩500网-| www.929953.com-新疆竞彩快三查询| www.982854.com-大发快三下载18金| www.8035.vip-微信十字彩怎么玩法| www.26564.com-彩票官网平台| www.1727.com-私掠团队彩票计划| www.7995.biz-博彩游戏什么是| www.333677.cc-赠与彩票中奖|