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天

知道了
百盈PK10 500彩票www.175902.com| www.979759.com-今天好彩三开奖结果| www.097980.com-下载万彩吧并安装| www.309932.com-江苏省体彩中心| www.059848.com-最新福彩3d攻略| www.248926.com-中彩网彩吧开机号| www.507869.com-彩虹形成的原理| www.712788.com-湖南体彩报第4版| www.987074.com-内葛快三开奖| www.263397.com-优彩彩票是正规的吗| www.388373.com-华彩中文-| www.590285.com-网易快三缩水| www.2434.me-手机竞彩足球| www.85862.cc-店铺彩友-| www.163877.com-什么彩票买的人最多| www.60vg.com-七彩开奖结果| www.35199.cc-七天彩真的能赚钱吗| www.076132.com-红旗彩票网-| www.956081.com-万豪彩票没有苹果版| www.077794.com-旺财彩票预测大师| www.361732.com-博大彩票是骗局麻| www.957805.com-彩票快乐十分走势图| www.982494.com-新彩彩票正规软件吗| www.73315.com-天涯高人能算彩票吗| www.465123.com-彩票安卓下载| www.951629.com-红彩网是什么网站| www.158605.com-七星彩摇一摇选号| www.04924.com-网购彩票020| www.1999.mobi-和彩自助-| www.069913.com-亿彩内部计划| www.328287.com-彩名堂官网软件下载| www.570149.com-七彩视频苹果版| www.719396.com-福彩排列5开奖查询| www.862296.com-七星彩中奖查询结果| www.60yk.com-3d彩票会员资料| www.507598.com-彩授三天计划| www.53611.com-时时彩号码能控制吗| www.312262.com-开心彩票是不是真的| www.162466.com-福彩试机号后分析| www.432566.com-一张体育彩票多少钱| www.km1.com-安徽快三官方下载| www.08pu.com-河北福彩体彩| www.969.cm-双色球牛彩会| www.21396.cc-广州体彩大乐透领奖| www.009006.com-7168彩票下载| www.127031.com-福彩p62开奖查询| www.732973.com-福彩中心投诉电话| www.xt98.com-买彩票中200诀窍| www.65fw.com-中国山西福彩官网| www.08407.com-58福彩是正规的吗| www.bi43.com-网易彩票网-| www.962017.com-福彩3d摇奖号软件| www.hy11.com-福彩3d和尾走势图| www.784211.com-南京众彩市场| www.414344.com-出彩造句-| www.582436.com-彩膜和钢化膜哪个好| www.4065.com-彩票77苹果系统| www.12677.cc-福利彩票奖励级别| www.94690.com-福彩新浪爱彩| www.080684.com-8彩票直通车| www.175597.com-福彩快三注册网址| www.277121.com-彩票秒开-| www.621696.com-彩票平台黑钱| www.43483.com-七星彩开奖表格图| www.520802.com-弃奖彩票案-| www.cb28.com-下栽福彩河南快3| www.800666.com-福彩3d加奖公告| www.943066.com-众彩网客户端| www.288719.com-赛客网足球竞彩| www.003466.com-菲律宾彩票网| www.333545.com-网易彩票不能提现| www.608344.com-3d彩票34期-| www.961628.com-明代红绿彩拍卖| www.134358.com-快三对子中奖多少钱| www.16jv.com-3d字迷双彩论坛| www.062674.com-快三单机游戏安卓版| www.344500.com-网络彩票交流群| www.522182.com-腾讯5分彩下载安装| www.602025.com-造假彩票-| www.vf42.com-广西快三遗漏三同号| www.426282.com-彩票三d乐彩论坛| www.296537.com-3d福彩专家预测| www.715333.com-彩票全天计划网址| www.097062.com-福彩公益时报谜语| www.67568.cc-体育彩票排列三和值| www.176939.com-快三助手安卓版下载| www.931402.com-天空彩免费资料大全| www.801921.com-青岛快三查询| www.762760.com-qq分分彩正规吗| www.520724.com-今日三d彩报银海| www.yj2.com-10选5彩票技巧| www.527180.com-皇冠彩票投注十年| www.127780.com-歌词一点彩虹| www.522048.com-彩友会彩票网| www.011901.com-星期日开什么彩票| www.339552.com-福彩3d走藏机图| www.454038.com-什么是彩金项链| www.971673.com-444彩票app-| www.cp6265.com-彩乐乐网遗漏| www.46wh.com-乐彩双色球字迷专区| www.233657.com-六中彩堂-| www.34059.com-体彩好赚吗-| www.603812.com-166彩票靠谱吗| www.21sf.com-竞彩预测分析推荐| www.093371.com-福彩中奖结果查询| www.601801.com-走投无路中彩票| www.cp0662.com-时时彩时间差作弊| www.6582.wang-鑫彩网是合法的吗| www.543238.com-nncny牛彩纽约| www.551858.com-福建快三助手下载| www.061518.com-彩客网能提现吗| www.b47.top-彩中堂-| www.033519.com-王者彩票平台| www.261620.com-新大发彩票-| www.485289.com-爱重彩-| www.ck00.com-天津快三骗局| www.020490.com-福彩双色球规则| www.462877.com-万豪彩票不能提款| 非凡彩票www.77210j.com| www.32120.cc-易彩堂怎么玩| www.472618.com-斯洛伐克快乐彩开奖| www.602207.com-黑彩提现被冻结| www.762997.com-彩美41人-| www.301220.com-微彩彩票-| www.736173.com-彩票回血是真的吗| www.975642.com-有彩礼没嫁妆丢人不| www.5241.me-彩宝贝手机版下载| www.318424.com-什么是好彩票双色球| www.cai566.com-快三助手免费版安卓| www.0uc.cc-七乐彩票充值正规吗| www.42645.com-红牛彩票平台注册| www.389263.com-fu福彩试机号| www.194018.com-吉林快三计划独胆| www.804981.com-篮彩比分加时算吗| www.1916.website时时彩组6怎么追号| www.71017.com-彩票今日开奖视频| www.gc81.com-河北福彩排列7| www.915132.com-体彩天下快三大发| www.455038.com-华彩免费下载app| www.176868.com-彩票带赚骗局| www.613365.cc-阜阳福彩助你上大学| www.44467.cc-创富彩票平台下载| www.120025.com-久久发彩票下载安装| www.e61.net-宝乐彩下载-| www.99272.cc-快三心得走势| www.02477.cc-巨龙彩票怎么样| www.010091.com-青海快三合值走势| www.330110.com-牛材网首页彩吧| www.502236.com-彩票2平台对冲| www.760418.com-体彩串算法-| www.865139.com-500万彩票首页| www.38765.cc-快三和值大小单双| www.180339.com-新手适合买什么彩票| www.699566.com-中国体育竞彩比分网| www.oo25.com-福彩刮刮乐品种图片| www.zd87.com-怎么开一个彩票网站| www.778818.cc-三一彩票-| www.5303.com-4567彩票ios| www.038281.com-七星彩查询中奖查询| www.630122.com-浙江快彩开奖号码| www.848502.com-香港时时彩计划网| www.623.pw-时时彩新版走势图| www.237434.com-河北了快三走势图| www.1006.org-每天开奖彩票|