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.518865.com-史上彩票最大奖| www.753051.com-彩经网3d走势图大| www.cai8399.com我要福利彩票开奖| www.wr11.com-快三福彩到底是什么| www.gx78.com-进入百盈彩票网站| www.xv09.com-01彩票下官方| www.025376.com-江西五分彩开奖结果| www.44hz.com-竞彩足球跟单倍投| www.144012.com-青海福彩中心电话| www.201045.com-福利彩票快三下载| www.438137.com-今日选三天天彩开奖| www.8pa.cc-手机软件彩票安全吗| www.3527.com-i8手机彩票-| www.247988.com-澳门3d彩报-| www.362697.com-最大的高频彩平台| www.506221.com-彩虹团队内部骗局| www.645270.com-彩霸王心论坛| www.898407.com-中国福利彩票咋看| www.983576.com-彩16网站-| www.sb2.com-中国江苏福利彩快3| www.51186.com-一彩票下载-| www.520132.com-首页福乐彩| www.71zs.com-中国七乐彩开奘结果| www.789354.com-竞彩米斗跟单| www.876545.com-分分快三彩票破解器| www.947693.com-马云的彩票叫什么| 160彩票www.160wt.com| www.eg00.com-杭州快乐彩玩法| www.623666.com-彩票代理注册公司| www.707227.com-彩票app签到活动| www.130654.com-重庆时时彩骗局模式| www.743553.com-73彩票买吗资料| www.868980.com-19年040七星彩| www.955058.com-修改黑彩余额教程| 网易彩票www.502135.com| www.90515.com-安卓系统彩票软件| www.81899.com-快三今日预测江苏| www.982406.com-重兴时时彩开奖视频| www.da06.com-大发彩神邀请码| www.589119.com-七星彩特区论坛彩票| www.2673.pw-世界杯体育彩票停售| www.57ks.cc-中华网彩票走势图| www.2072.com-冮苏体彩七位数| www.456558.com-创富彩色正版图库a| www.728102.com-亿彩官网-| www.882470.com-香港五分彩开奖官网| 七乐彩票www.qilc5.com| www.mb02.com-彩之源彩票平台| www.345663.com-福利彩3d-| www.441799.com-2019年竞彩-| www.549122.com-欧冠去哪买竞彩| www.632829.com-单场胜负彩开奖| www.700553.com-足彩通下载-| www.777865.com-买彩票有什么软件| www.866943.com-湛江七星彩头尾网站| www.949731.com-禁止彩票-| www.999994.cc-福彩3d字谜最新| www.mx95.com-福彩3d杀号技巧| www.ug57.com-彩乐乐幸运选号| www.583579.com-全民足彩彩票下载| www.671979.com-彩宝彩票官方下载| www.774567.com-七星彩中奖输入查询| www.897017.com-快三和值选号法| www.3pa.com-京彩app7515| www.980661.com-易彩乐是什么网站| www.9ll.cc-快三预警软件下载| www.98fh.com-彩界王子双胆| www.7578.me-福彩蛋蛋-| www.089466.com-福利彩票任三| www.298375.com-彩票开奖结果查询表| www.130979.com-河南平舆定亲和彩礼| www.560112.com-云南福彩老总| www.085072.com-彩之堂彩票app| www.696303.com-时时彩全天计划非凡| www.796236.com-体彩大乐透怎么买| www.883485.com-信博彩票怎么登录| www.958275.com-七星彩所有数据| 全民汇彩票www.52303w.com| www.5620.vip-u9彩票网站可靠吗| www.57314.com-168时时彩开奖网| www.059132.com-nba彩票网-| www.163539.com-买双色球彩票的技巧| www.254368.com-福彩快乐十分| www.944422.com-彩票联盟是骗了吗| 幸运彩票www.444237.com| www.jg22.com-河南快三形态走势| www.zr46.cc-体彩足球彩票怎么看| www.141848.com-重庆时时彩诈骗套路| www.237698.com-福彩快三怎么算| www.809863.com-众发彩票主页| www.676932.com-多彩办公大师| www.768318.com-今天足彩十四场比分| www.867748.com-七星彩开奖现场直播| www.91up.com-玖富彩票是合法的吗| www.83wy.com-亿彩登录网址| www.577181.com-彩票55下载-| www.206690.com-好运来彩票网app| www.186373.com-全天10分快三计划| www.250283.cc-易彩国际app下载| www.308396.com-中福快三是哪里出的| www.368963.com-go彩是真的吗| www.791522.com-京东快三彩票| www.865029.com-重庆时彩下注官方| www.923132.com-彩钢瓦围挡价格| www.17322.com-关注中国福利彩票| www.62378.com-七星彩票走势图| www.007375.com-河南省体彩中心书记| www.092586.com-福建体彩app下载| www.100425.com-中茗cp533彩票| www.172881.com-广西快三官方网站| www.675102.com-万通彩票娱乐平台| www.851935.com-竞彩官网网址| www.073105.com-赢家彩票下载| www.95go.com-热拉的彩票骗局| www.08837.com-极速彩app-| www.55341.com-时时彩五星直选大底| www.x42.pw-山东彩票群英会下载| www.699092.com-福彩王云戈简历| www.406914.com-彩票代理犯法么| www.557589.com-好运来彩票合法吗| www.711269.com-竞彩360足球彩票| www.793210.com-福利彩票容易中奖吗| www.862663.com-周五什么彩票开奖| www.918500.com-鸿博彩票app| www.998676.com-中国体育彩票网点| www.mh74.com-老时时彩图-| www.410552.com-七彩球怎么拼装| www.534635.com-国家体彩网-| www.672101.com-彩票搜索风云| www.803128.com-排5摇一摇机选彩票| www.919538.com-一键搭建彩票平台| www.984073.com-c9999彩票官网| www.fk73.com-人工时时彩在线计划| www.971203.com-彩天地app-| www.217822.com-海南五星彩开奖号码| www.309232.com-湖南福彩网首页| www.381680.com-泰安体彩网-| www.55786.com-七乐彩规则怎么玩| www.995122.com-福彩主任被抓| www.jg35.com-一分钟快三开奖| www.jc10.com-幸运快三走势图软件| www.41xk.com-体彩3l选7走势图| www.664466.cc-动漫图片手绘彩铅画| www.00888.cc-乐彩模拟购-| www.561702.com-鸿彩公-| www.4237.org-成都三彩夏装新款| www.922395.com-招聘竞彩分析师| www.67211.com-阜阳福彩中心在哪| www.202268.com-贵州中彩票-| www.329665.com-3d藏机市牛彩网| www.996004.com-首页彩通-| www.053333.cc-合肥体彩店能转让吗| www.154598.com-彩票有多挣钱| www.l14.com-彩票看走势是扯淡的| www.592698.com-海南注册彩票公司| www.917881.com-雨后彩虹歌词| www.021217.com-中奖彩票投注站提成| www.505746.com-快三中奖多少返| www.85el.com-福利彩票转让协议| www.yq94.com-快三单式怎么算中奖| www.663305.com-彩民直通车网页| www.qq43.com-福彩内部人员揭秘| www.6127.pw-vr彩票有假吗| www.829077.com-k3彩票是赌博吗|