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天

知道了
亚洲28 www.53xz.cc-国家彩票包含哪些| www.98ax.com-炫彩跑马灯壁纸| www.6261.vip-彩票平台黑钱| www.035068.com-富象彩票-| www.476255.com-银河彩票网可以信吗| www.568093.com-福彩3的今天彩涂| www.99lk.com-双色球乐彩论坛胆码| www.562091.com-南国七星彩手机板| www.48fm.com-泰国彩票怎么玩法| www.279856.com-胜负彩500w-| www.362362.com-彩虹这首诗怎么写呢| www.135263.com-恒大彩票手机登录| www.511979.com-八年级彩铅画| www.4556.vip-七星彩历史开奖图| www.lg37.com-心心彩票-| www.152391.com-可乐彩票官网| www.083976.com-彩盈娱乐app| www.9112.com-彩壹万手机版app| www.829533.com-体育彩票数据分析仪| www.333553.cc-坚持买彩票-| www.7339.pw-网上卖彩票内部数据| www.19100.com-云发购彩票是真的吗| www.200029.cc-河南体彩河南福彩网| www.630209.com-18彩票网官网| www.557814.com-境外网络博彩犯法吗| www.795598.com-3d百位彩乐乐杀号| www.do23.com-彩票指南报纸电子版| www.0172.top-七彩色版-| www.5767.biz-彩票幸运扑克玩法| www.988815.com-快三大小买法| www.9zn.com-瑞彩祥云苹果版网址| www.501325.com-必发彩票客户端下载| www.069596.com-玩彩平台信誉排行| www.389997.com-28彩票手机版下载| www.331380.com-盈彩在线大发快3| www.579521.com-江苏快三推荐二同号| www.zw30.com-体彩店申请-| www.092590.com-福建体彩软件安装| www.iw74.com-7k官方彩票-| www.8621.wang-湖北电视购彩| www.56533.cc-大气彩票名字| www.043299.com-电脑版彩吧助手| www.7486.cn-南通体彩福彩店转让| www.72700.cc-精彩片段-| www.995724.com-足彩计算公式| www.670201.com-3d彩票猜谜语| www.747321.com-505彩网正规吗| www.678251.com-重庆彩必赢计划下载| www.4681.vip-3d家彩网独胆| www.2953.biz-彩金狮子单机| www.466975.com-彩票软件平台| www.574381.com-戚泥丝彩票软件下载| www.655002.com-辣椒七星彩-| www.198229.com-福彩双色球走势| www.532570.com-七星彩怎么算是中奖| www.2403.cc-中国体彩育彩票开奖| www.772543.com-时时彩走势图全部| www.880152.com-台北快三规律破解| www.951043.com-01时时彩-| 乐彩www.le05.com| www.jg87.com-福彩中心开机号天齐| www.756252.com-天天中彩骗局| www.820014.com-跨省得彩票怎么兑奖| www.896448.com-10分彩下载-| www.954856.com-五分彩历史开奖号码| 旺旺彩票www.522.cc| www.hu77.com-买足球彩票app| www.784883.com-七星彩今天开奖| www.885916.com-众达彩票app下载| www.959527.com-安卓版彩名堂计划| www.cai1422.com河北福彩3d-| www.154124.com-湖北快三昨天走势图| www.237913.com-广西派彩电子走势图| www.257598.cc-吉林快三软件下载| www.425368.com-竞彩官电脑版下载| www.576645.com-购彩v下载安装| www.880535.com-福彩3d能胆拖玩吗| www.7797.net-大发分分彩开奖查询| www.003694.com-十分钟彩票平台| www.078678.com-七星彩简单公式| www.010673.com-安徽快三跨4图| www.82888.com-彩票双色球领奖地址| www.539834.com-麒麟彩票-| www.58737.cc-天天时时彩票| www.049827.com-k8彩票在线登录| www.367591.com-预知彩票号码| www.4127.org-体彩七位数数字范围| www.14500.cc-七星彩复式玩法价格| www.67990.com-高频彩种计划| www.500013.cc-时时彩群主有多大罪| www.621267.com-彩圣字迷总汇今日| www.696778.com-金华体彩网-| www.449780.com-华彩国际-| www.582350.com-现代彩票下载| www.155933.com-彩票注数-| www.323261.com-中国体彩网首页官网| www.217020.com-哪个省的快三比较真| www.07388.com-快彩电子走势图下载| www.462872.com-环球彩app-| www.cp6911.com-河北快三玩法介绍| www.293525.com-彩票是不是骗局揭秘| www.088422.com-雪绿足彩比分直播| www.175272.com-彩票刷流水兼职| www.8322.org-东方彩票安全吗| www.632178.com-cp77趣彩黑钱| www.844855.com-福彩体彩双机店取消| www.980845.com-金彩网彩票可信不| www.4467.vip-时时彩专业版七星彩| www.95269.cc-七乐彩规律及技巧| www.083634.com-吉彩彩票是什么东西| www.9912.top-瑞彩祥云开挂软件| www.783997.com-105时时彩app| www.60469.com-中国体育彩票星彩网| www.765575.com-靠私彩赚钱-| www.32361.cc-彩色包装盒公司| www.14683.com-彩票节假日休息吗| www.20968.com-395959彩票网| www.587091.com-鴻彩彩票-| www.668233.com-tt彩票-| www.960538.com-快三7点和值多少钱| www.17123.cc-彩票的价格-| www.76924.com-优彩买彩票靠谱吗| www.468668.com-万彩国际app下载| www.756356.com-4567彩票代玩| www.qv39.com-时彩宝典-| www.586526.com-竞彩去哪里买得到| www.686450.com-贵港彩票下载| www.755028.com-手机一定牛买彩票| www.087917.com-彩运网平台下载安装| www.642801.com-彩汪汪双色球预测| www.37087.cc-彩票天天-| www.74as.com-彩票平台代理怎么做| www.1175.net-花生彩票真假问题| www.727242.com-四川体彩网七星彩走| www.818958.com-有没有玩彩票高手| www.882378.com-体彩销售工作靠谱吗| www.950401.com-百乐彩客户端| www.996166.com-腾讯高频快彩| www.lh9.cc-玩一分快三的技巧| www.lj40.com-电脑版中彩网双色球| www.e03.pw-竞彩8串1中奖新闻| www.41tl.com-鸿发彩票帮投| www.495751.com-彩经网官网官方网| www.9601.net-新浪官方彩票网站| www.059111.com-新浪爱彩即时比分| www.326595.com-七星彩在哪兑奖| www.91ke.com-连中彩票靠谱吗| www.32vm.com-下载天天中彩| www.0363.net-福彩杀跨度方法| www.13103.com-彩票合买圈套| www.339585.com-九五彩票公司| www.04cs.com-蛙扑彩票-| www.5852.biz-冠盈彩票-| www.9836.net-古建亭子彩绘| www.30356.com-海南体彩下载安装| www.9045.loan-七乐彩如何才算中奖| www.6128.wang-vr三分彩走势图| www.84573.com-彩钢板上怎么开大孔| www.820509.com-福彩3d怪字-| www.918413.com-湖北快三出号规律| www.981153.com-旺彩双色球科学预测| www.cp0017.com-大发快三和值走势图| www.77572.cc-彩票店规定-| www.017113.com-河北快三中奖|