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.964367.com-306体彩下载| www.eu85.com-分分中彩票下载安装| www.za49.com-3d彩报图今天| www.27wa.com-下载星彩网-| www.2800.com-福彩3d中奖图片| www.8137.hk-澳门彩票在哪买| www.26511.com-乐和彩走势图| www.71765.cc-上海快三查询表| www.115637.com-彩色水磨石地坪| www.189535.com-时时彩老玩家的经验| www.259735.com-大乐透彩票选号器| www.336046.com-广西福利彩快乐十分| www.418184.com-盛大彩票是什么| www.522674.com-兼职刷彩是什么| www.701831.com-足球彩票让球投注| www.787606.com-19049七星彩| www.866503.com-昨天福彩开奖| www.936068.com-博彩骗局帮你充值| www.993501.com-足彩14场玩法| www.sk3.cc-老时时采彩开奖| www.qv85.com-湖北福利彩票快三| www.06iy.com-广州彩票兑奖中心| www.77ja.com-微信群里刷彩票| www.1626.vip-体彩三地试机号今天| www.29675.cc-金手指彩票报纸官网| www.73628.com-彩票选号神器下载| www.026453.com-双色球免费易彩预测| www.103338.com-今日竞彩足球对阵表| www.177128.com-一分快三是正规| www.251236.com-彩票巴士软件| www.323535.com-新加坡彩票投注站| www.394534.com-彩虹世界论坛| www.584257.com-人人中彩票登录失败| www.657639.com-体彩阿盛看胆| www.764885.com-808彩票网册子| www.863948.com-彩宝贝网彩票双色球| www.920826.com-彩神彩票平台注册| www.973961.com-竞彩奖金模拟| www.hm64.com-上海快三选号技巧| www.zf20.com-5d全彩漫画大全| www.30np.com-极速分分彩官方开奖| www.0022.online福利彩票几位数字啊| www.6383.xyz-刮刮福利彩票规则| www.15629.com-简单彩铅风景画视频| www.57729.cc-彩票分析施颖主持人| www.027612.com-易彩票安全吗| www.101617.com-彩票aqq下载| www.167209.com-江苏快三真的假的| www.278008.com-香港中彩网免费资料| www.370605.com-中博技术彩票网| www.466377.com-澳洲五分彩骗人| www.551901.com-大乐透彩票选号| www.656242.com-玩彩神争霸谁输了| www.739993.com-玩牛彩犯法吗| www.810411.com-快三注册推荐代码| www.880881.com-凤凰网彩票有退水吗| www.971666.cc-大牌彩票官网| 幸运彩票www.915399.com| www.jb56.com-辽宁省体彩兑奖地址| www.a38.net-数字家彩票-| www.29cz.com-sohu彩票-| www.0324.loan-826网络彩票论坛| www.6498.vip-极速时时彩后3| www.14899.com-浙江体彩下载官网| www.56992.com-福利彩票杀号技巧| www.025487.com-支付宝买彩票靠谱| www.097582.com-彩票排列五开奖时间| www.160286.com-泊利彩票app| www.261708.com-今天足球竞彩胜负平| www.345567.com-易经彩票-| www.417769.com-盛大彩票下载网址| www.515219.com-中国福彩官网中心| www.582661.com-足球彩票4场进球彩| www.653010.com-时时彩手机五星缩水| www.773573.com-时时彩开奖员| www.857535.com-有没有玩彩票的平台| www.919676.com-彩票app如何开发| www.975255.com-汇彩网是真假| www.kh08.com-福彩中奖号-| www.zz72.com-竞彩店好开吗| www.22lf.com-app酷搏彩票| www.279.bid-彩妆加盟品牌有哪些| www.3426.cm-好彩票网址是多少| www.8480.vip-爱彩乐输了二十多万| www.47863.com-分分彩杀两个号技巧| www.88297.cc-333111六神彩| www.039095.com-网上投彩票可靠吗| www.137889.com-宝发彩票app| www.208598.com-彩票助手手机版| www.274425.com-也买彩下载-| www.368915.com-彩票摇奖机的图片| www.451600.com-乐彩走势图3d| www.533772.com-七星彩开什么号码呢| www.628060.com-广东体彩下载软件| www.692001.com-有玩快三是真的吗| www.761670.com-好彩网团队-| www.862311.com-彩客彩票app| www.919944.com-彩名堂手机版| www.974503.com-体彩大乐透预测号| www.mp6.com-分分快三软件最新版| www.nu95.com-吉林快三走势图今天| www.x85.cc-武汉体彩网点查询| www.45jq.com-好彩香烟多钱一盒| www.245.in-彩票榜网址-| www.3055.pw-彩之云饭票是骗局吗| www.7983.xyz-投彩app骗局| www.22504.com-13e彩票下载| www.62158.cc-福彩体彩字迷| www.069006.com-彩神ii官方网| www.128396.com-快三和值三个数相加| www.194323.com-代玩彩票佣金| www.256603.com-中国彩吧3d图库| www.318461.com-火箭彩票平台| www.378597.com-彩票中心领奖流程| www.538517.com-赢彩彩票靠谱么| www.610011.com-怎么微信上买彩票| www.670707.com-安徽竞彩专家推荐| www.735133.com-快乐彩开奖结| www.796754.com-在淘宝买彩票怎么买| www.863521.com-体彩api-| www.917993.com-彩虹图片大全大图| www.970962.com-双色球元芳看彩| www.ec09.com-春秋彩票电脑版登录| www.tq13.com-彩票店可以买足彩吗| www.6pe.com-彩票在线下单| www.51hv.com-18105足彩-| www.390.cx-七星彩彩经网综合| www.3115.wang-名门彩票害了多少人| www.7886.cc-体体彩排列五走势图| www.20258.com-彩票有人控制吗| www.54576.com-送彩金的新app| www.91708.com-好彩788-| www.035673.com-魔方彩票靠谱吗| www.195216.com-中国江苏福利彩快3| www.254368.com-福彩快乐十分| www.313965.com-3d天天彩就业报| www.369590.com-足球彩票19017| www.444528.com-福彩快三杀号定胆| www.526153.com-时时彩计算豹子| www.643961.com-天天分分彩合法吗| www.713566.com-王者彩票违法吗| www.776379.com-利彩彩票是正规的吗| www.905160.com-江苏快三高手| www.959475.com-易彩网快三-| 惠民彩票www.19kpl.com| www.ul2.cc-体彩开奖结果今天| www.mz16.com-投注上海快三的平台| www.z62.com-足彩玩外围如何赚钱| www.42ix.com-苹果手机原彩是什么| www.98sm.cc-报彩网868.cc| www.2023.cc-福彩3d中彩网3d| www.6419.pw-春秋彩票计划群| www.07237.com-福彩票三地开奖| www.39367.cc-软件上玩彩票| www.74450.com-中超联赛竞彩| www.015387.com-巨丰彩-| www.066206.com-900彩票能提现吗| www.120392.com-福彩3d中奖心得| www.178575.com-彩票投注大厅| www.233222.com-湖北福彩快3今天| www.289567.com-106官网彩-| www.517066.com-河北福彩开奖信息| www.571411.com-好彩堂4oo5oo| www.627058.com-彩票赛马开奖网|