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天

知道了
1分快三 www.678448.com-h七星彩票开奖现场| www.876660.com-上海彩票基诺| www.yt36.com-久彩彩票官方网站| www.616201.com-体彩怎么分成| www.874947.com-幸运分分彩开奖官网| www.769797.com-彩73下载-| www.8gn.com-七星彩空白长条规律| www.0281.org-彩票站的效益| www.37391.cc-翼彩宝app-| www.664235.com-七星彩牛爹统资料| www.878231.com-盈彩彩票骗局揭秘| www.pn50.com-688彩票黑钱| www.2532.org-彩票k线图预测| www.06328.com-赢彩网-| www.193711.com-吉林省体彩兑奖地址| www.550076.com-优彩戴泽新-| www.081859.com-七星彩网站去哪里买| www.188458.com-今天安徽福彩快三| www.77228.cc-玩彩对应码公式技巧| www.061222.com-鼎丰彩票骗局| www.151931.com-怎么破解彩票的充值| www.237734.com-中原彩票快三| www.r51.cn-如何用时间战胜彩票| www.57rp.com-黑龙江体彩中心位置| www.701126.com-厦门如彩纺织工艺品| www.660913.com-福彩快三邀请代码| www.949652.com-体彩几号开奖| www.cai8989.com长春快三开奖直播| www.213092.com-江苏快三下载| www.381536.com-周五的彩票-| www.2441.shop-福利彩票直播| www.2349.top-三α彩票-| www.27190.com-88爱彩下载-| www.103.website河内五分彩走势软件| www.4562.com-3d福彩35期字谜| www.05118.com-中彩在线公司在哪里| www.305993.com-买彩票不给钱跑了| www.362481.com-儿童赞美诗彩虹歌谱| www.399443.com-海南七星彩老鼠精版| www.676664.com-下载彩吧图库第一版| www.cp850.cc-共赢彩票网站| www.vd26.com-彩神通代理会特马| www.730760.com-快三1135投注法| www.802768.com-连中彩票旧版下载| www.881653.com-看彩票走势骗局| www.956502.com-富贵彩骗局-| 500彩票网www.862455.com| www.iv55.com-福建体彩十一选五| www.093192.com-快三实时走势图| www.1150.top-个性体彩彩票宣传语| www.9160.org-红宇体彩店官网| www.311267.com-彩中彩高手网| www.388653.com-迷彩兔怎么打不开机| www.502952.com-国彩印刷厂-| www.573562.com-如何抓住彩票的周期| www.654926.com-体育5分钟彩票足球| www.166446.com-正规的快三平台| www.864166.com-瑞彩彩票app下载| www.979077.com-500彩票是假的吗| www.82.link-易发彩安全吗| www.54886.com-网上代玩彩票骗局| www.012506.com-七星彩廉江高手论坛| www.6661.pro-经典彩调-| www.co35.com-彩客站是什么| www.cp8181.com-大发快3彩票| www.qh74.com-好彩一网上开奖结果| www.0wj.com-乐彩网邀请码是多少| www.066707.com-彩宝app官方下载| www.205589.com-周易测快三-| www.923675.com-盛兴彩票骗了多少人| www.52516.cc-620好彩网-| www.87515.com-玩98彩安全吗| www.882244.com-玩彩票的女孩子| www.3601.in-天津快三怎么玩稳赚| www.261958.com-彩票481开奖查询| www.135527.com-一分钟一开奖的快三| www.6506.cn-七乐彩开奖直播新浪| www.51317.com-彩票每天稳定盈利| www.96938.cc-福利彩票七加一| www.099952.com-南方彩票彩网首页| www.29786.com-四川体彩网七星彩走| www.006997.com-qq彩票在哪买| www.445263.com-彩票网站需要维护吗| www.549691.com-欧冠体彩投-| www.675365.com-中国福彩神牛嚼图| www.172173.com-双色球快三开奖结果| www.382126.com-买注彩票-| www.4290.xyz-福彩乐透乐博彩论坛| www.cp7322.com-北京快三中奖规则| www.254084.com-快3福彩好中号码| www.330146.com-牛彩网—彩搜网| www.276397.com-云南畅游快三到几点| www.8450.cc-rc融彩网平台下载| www.td46.com-福彩都有哪几种彩票| www.9238.loan-篮彩稳赚不赔的买法| www.52218.cc-北京福彩对奖| www.94965.com-深圳彩妆美甲学校| www.055108.com-彩色圆柱体红色教案| www.125343.com-今天福彩奖号| www.194620.com-福彩三d走势图| www.982950.com-玩彩票一天输一万| www.hn17.com-好彩36开奖结果| www.292470.com-q彩网app-| www.879058.com-百盈快三官网app| www.475656.com-青海福彩中心招聘| www.654494.com-全球彩票-| www.805287.com-七乐彩奖励有多少| www.788175.com-足球彩分析app| www.964826.com-吉祥彩票注册网址| www.gd65.com-新快三单机游戏| www.n25.net-彩票数学理论| www.670326.com-今晚天下彩结果| www.766225.com-风彩彩票天天有惊喜| www.873612.com-体育彩票篮球玩法| www.946814.com-彩钢围挡板的规格| www.989000.cc-66微彩是真的吗| www.dj99.com-马来西亚南洋彩| www.wl84.cc-中福彩票官网| www.338978.com-恒大彩票注册| www.411455.com-唯彩会所有版本| www.505739.com-彩票对冲避免被风控| www.568666.cc-好彩头小样是否倒闭| www.626670.com-数字彩票新浪彩票| www.680852.com-掌优彩票投注记录| www.753551.com-彩票自动挂机手机版| www.820569.com-彩钢pvc卷材| www.881772.com-13彩是不是正规的| www.944858.com-乐发彩票的邀请码| www.995996.com-快乐彩五行最大遗漏| www.zq8.com-福彩开-| www.qh62.com-快三下期怎么推算| www.01wo.com-网络购买世界杯彩票| www.69sf.com-一张彩票引发的故事| www.10409.com-新浪爱彩不能用了| www.65228.cc-福彩双色球预测总汇| www.79978.com-千亿彩票5-| www.436604.com-幸运之门彩票网| www.98115.cc-19055期足彩| www.02511.com-玩彩票软件怎么样| www.99040.cc-360足彩计算器| www.001623.com-全民彩票投注网站| www.083877.com-乐彩彩票cc33| www.135772.com-中国福彩手机报下载| www.221677.com-新快三app官网| www.sm23.com-河内五分彩开奖软件| www.18oj.com-什么的彩云填空词语| www.x24.mobi-大发快三争霸赛| www.83398.cc-买了彩票怎么查看| www.27211.cc-新2亦彩票论坛| www.248008.com-快三辅助下载| www.7227.net-彩虹六号steam| www.144736.com-淘宝快三基本走势图| www.230115.com-3d彩涂彩吧-| www.842665.com-开体彩好还是福彩好| www.717460.com-兰花图片简笔画彩铅| www.57695.cc-12cc彩票-| www.066837.com-彩票实体店老板吃票| www.09214.cc-11086娱乐彩票| www.83442.com-竞彩足彩技巧| www.114222.cc-手机福彩官网下载| www.202246.com-贵州彩票巨奖| www.284172.com-彩色的造句-| www.360846.com-开彩传媒电话号码| www.423357.com-三国杀关索和张星彩|