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.816580.com-福彩啥时候开奖呀| 网易彩票www.9356o.com| www.126926.com-优优彩票-| www.054827.com-福彩3d官网下载| www.055562.com-福利彩票号-| www.227227.com-体彩开奖结结果| www.250083.com-中彩大骗局-| www.334670.com-彩票3d试机号| www.459458.com-想中福利彩票翻身| www.64ry.com-爱趣彩彩票网| www.872347.com-体彩跟福彩哪个更假| 新盈彩www.xinyc3.com| www.ni17.com-竞彩交易量唯彩看球| www.098757.com-彩票聚合3d之家| www.201978.com-福彩三b图迷总汇| www.448548.com-3d梁博说彩小燕子| www.879233.com-重庆时时彩几号停盘| www.035281.com-青岛福彩中心电话| www.345094.com-彩票网站被黑| www.462379.com-久久彩票1.6.0| www.031052.com-全民彩票靠谱吗| www.387333.com-彩带拉花-| www.005494.com-518彩票网址导航| www.15fv.com-腾讯时时彩游戏规则| www.308032.com-体彩足彩兑奖计算器| www.259124.com-福彩快3群真的假的| www.340163.com-重庆时时彩购买软件| www.100379.com-金龙彩票注册网站| www.266155.com-广西快乐双彩开奖详| www.195633.com-吉林快三开奖的走势| www.307781.com-派彩快三能玩不| www.222509.com-淘彩是正规网站吗| www.297273.com-要快三赢的多吗| 亚投彩票www.ya099.com| www.392030.com-新万彩吧彩票预测| www.516881.com-双色球福彩中彩| www.590261.com-中国体育彩票招财猫| www.678604.com-足彩赔率分析技巧| www.761084.com-菲博时时彩平台| www.828036.com-彩民网是什么| www.891359.com-一分钟快三官彩| www.959420.com-彩票有没有规律| E彩堂www.43818c.com| www.cx38.com-金沙博彩-| www.uq59.com-乐彩网l-| www.79.me-书签百彩网大全| www.69tb.com-彩票意外中奖故事| www.yp15.com-江苏省体彩兑奖地址| www.vf61.com-中福快三app| www.031170.com-澳客赢家彩票苹果版| www.246123.com-江苏彩票中心在哪里| www.343673.com-适合学生的彩票软件| www.460968.com-黑彩3d平台下载| www.565807.com-盐城彩达咔唑| www.638537.com-色彩斑斓造句| www.241008.com-七星彩复式玩法| www.303503.com-南粤好彩三开奖奖金| www.383192.com-体彩大乐透2月16| www.dp34.com-玩快三的平台| www.c24.org-福彩试机号金码| www.189830.com-江苏十一选五控彩票| www.362431.com-怎样赞美彩虹的句子| www.477760.com-快乐彩五行对刷| www.590306.com-够力七星彩安卓版| www.680422.com-中彩网中奖故事| www.581619.com-百姓彩票客户端下载| www.678289.com-有没有彩票平台| www.752122.com-ok彩票app骗局| www.816364.com-快三豹子通选多少钱| www.894824.com-福彩二分快三| www.961303.com-竞彩猫怎么挣钱| 500彩票网www.61655o.com| www.5555.com-彩票查询3d试机号| www.67538.com-中国中彩票最多的人| www.724288.com-浙江快彩11选5| www.226167.com-福彩快三追号| www.312162.com-福利彩票三d中将号| www.388352.com-华彩联盟论坛| www.42525.com-经彩出行收费| www.026759.com-即时彩票-| www.095972.com-四川省体彩兑奖地址| www.598177.com-传统足彩怎么玩| www.744260.com-买彩票判刑-| www.41de.com-国庆节彩票放假| www.931511.com-快三网投-| www.4510.vip-昨天足彩结果查询| www.3850.vip-老鼠精七星彩| www.187628.com-私彩漏洞-| www.286428.com-玩彩的胆神独胆| www.380010.com-益彩纷呈-| www.501150.com-希腊彩开奖-| www.576988.com-好彩彩票官网| www.656170.com-下载融彩网-| www.732927.com-体彩第19040期| www.23oj.com-金彩网天下彩特吧| www.1430.net-彩虹伞-| www.7246.tv-七彩虹儿童画| www.612571.com-万彩口吧彩票高手| www.058621.com-南京彩虹之家地址| www.2177.cn-彩乐彩票下载安装| www.776464.com-彩票追号倍投计算器| www.870477.com-必发彩票开奖网站| www.374.win-浙江快三乐彩网| www.394318.com-福利福彩app| www.565849.com-冠彩巨龙王怎么样| www.647200.com-御都彩票登陆| www.752335.com-网上买彩票最新消息| www.856516.com-彩票系统源码极云| www.937155.com-乐福彩票怎么样| www.gl68.com-快3走势玩彩乐网| www.m83.space-时时彩为啥会上瘾| www.44eo.com-天天福彩开奖结果| www.286262.com-福彩3d东北人玩彩| www.358744.com-新天成彩票网靠谱吗| www.442307.com-福彩和值跨度速查表| www.uw15.com-uu快三是正规的吗| www.150463.com-中彩网号码分折| www.295275.com-中彩网三地推荐号| www.25598.cc-彩票平台对刷| www.29.biz-足彩赚钱的人多吗| www.502830.com-彩友多怎么样| www.593022.com-日本彩虹e台| www.661729.com-竞彩上税-| www.815818.com-彩吧图库香港报| www.916679.com-如何破解时时彩私彩| www.978274.com-福州彩钢围挡厂家| www.uq4.com-彩票预测软件哪个好| www.xd94.com-福彩三d报喜和值谜| www.68an.com-彩票开奖查奖| www.132897.com-足彩圈-| www.217399.com-江苏快三今天开什么| www.447216.com-众彩网怎么提现| www.8fg.com-网上彩票破解方法| www.533.cc-拼搏在线彩票网官网| www.4732.xyz-亿元彩票网站靠谱吗| www.27899.cc-足彩竟猜比分直播| www.98317.com-腾讯分彩精准计划| www.sx12.com-8位数彩票-| www.78vg.com-极速快三立即开机| www.270910.com-体育彩票二维码| www.815393.com-快中彩中奖规则| www.lr96.com-大中华彩票计划网| www.614911.com-日本彩票兑奖| www.67lh.com-9号彩票官网网站| www.0970.vip-彩票兼职跟单任务| www.92ev.com-必发彩票线路导航| www.547963.com-福利彩票12生肖| www.835912.com-幸运十分彩计划| www.67gj.com-手机51中彩彩票网| www.11qy.com-彩票365两个版本| www.21kc.com-福彩店违规怎么举报| www.5574.biz-彩788安全吗| www.15466.cc-桐乡福利彩票中心| www.71212.com-天禧彩票投注网站| www.036543.cc-快彩分析软件| www.127051.com-福建福彩快3预测| www.220859.com-体彩排列3-| www.287635.com-合买彩票软件| www.023386.com-秒秒彩平台能作弊吗| www.089186.com-彩6彩票官网| www.139154.com-彩5下载-| www.40534.com-一彩彩票信誉最好| www.121525.com-彩票托有男的吗| 大赢家彩票网www.178397.com|