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.0317.cn-银彩通app下载| www.021515.com-7k网彩票分分彩| www.136359.com-广西体育彩票app| www.498653.com-百万彩票破解| www.588724.com-海南七星彩近期规律| www.680598.com-彩49彩票-| www.3012.vip-谜底是彩字的谜语| www.271778.com-好彩2复式注数计算| www.974823.com-七星彩19048| www.9437.top-七星彩算法公式| www.723785.com-昆山双色球彩票大奖| www.at02.com-福彩时时乐走势图| www.vu91.com-七星彩今晚头尾资料| www.367227.com-麋鹿好看彩铅画教程| www.490929.com-我被网上彩票骗了| www.19bw.com-彩票厉史开奖查询| www.6703.com-新彩计划下载| www.23889.cc-快速挣钱的彩票| www.248595.com-福彩怎样买-| www.134835.com-1号彩票安卓版下载| www.851080.com-时时彩资金投注策略| www.994617.com-彩票注数-| www.vi51.com-查江苏快三遗漏号码| www.786555.com-全民福彩是腾讯的吗| www.407079.com-2015马彩生肖坉| www.575831.com-彩票啥时候停售| www.329685.com-彩票注册送38元| www.539746.com-最近的体彩投注站| www.810052.com-中国福利彩票性质| www.970338.com-河北福彩三d字谜| www.qi6.cc-马来西亚南洋彩开奖| www.124033.com-安庆体育彩票| www.238044.com-彩票快乐十分| www.313381.com-赢家彩票是什么| www.44lk.com-足彩世界杯冠军倍数| www.421455.com-七星彩直码透露信息| www.539746.com-最近的体彩投注站| www.ha39.com-幸运快三彩票预言| www.tq22.com-福彩彩票机换纸图解| www.20eg.com-幸运彩大发快三| www.6xe.com-彩票中奖人图片| www.091.biz-众达彩票合法吗| www.5791.biz-竞彩3场2关怎么算| www.165249.com-手机上怎么玩彩票| www.250633.com-500万彩票官网| www.17235.cc-手机app刷彩| www.85111.com-七星彩前四位和值| www.317681.com-足彩14场秘籍| www.650081.com-彩票有哪些比较简单| www.7530.vip-彩票吧台装修效果图| www.93ej.com-彩色相机出现时间| www.3589.vip-世界奖金最高彩票| www.05355.com-彩票中奖故事视频| www.12dd.com-安徽3注彩票中奖| www.208126.com-快三杀号软件| www.394167.com-四季型的色彩特征是| www.548027.com-六台彩挑码助手| www.188763.com-内蒙古11选5体彩| www.132507.com-正品彩妆代理| www.216217.com-彩票数理九宫八卦图| www.994075.com-红旗彩票有风险吗| www.77576.cc-今日福彩出奖号码| www.059764.com-微信拉人玩彩票套路| www.69633.com-中国彩吧新彩吧首页| www.9946.biz-明天体彩开奖吗| www.60949.com-小米福彩-| www.032960.com-乐彩神彩票靠谱吗| www.61314.cc-最早福利彩票开奖| www.028756.com-好运快三平台网址| www.321316.com-8828彩票网址| www.444871.com-彩票3d购买-| www.876303.com-重庆时彩时彩| www.955808.com-富贵彩会套路人吗| 辉煌彩票www.2875i.com| www.dm78.com-澳门六星彩开奖| www.117010.com-内蒙快三手机软件| www.89845.com-傅乐彩票app| www.339645.com-彩票软件靠谱| www.678749.com-福彩3d布衣精华版| www.751490.com-胜负彩足球彩票| www.163706.com-各种高频彩票规律| www.657126.com-下载七星彩规律表| www.748163.com-快三跟号技巧| www.813355.com-阜阳福彩自助终端| www.890342.com-百富免费博彩论坛| www.962614.com-京东彩网-| www.cp9979.com-湖北快三一天多少期| www.60517.com-网易彩票投注可靠吗| www.11337.cc-足彩胜负平竞猜| www.949073.com-福彩在线刮刮乐| www.cj56.com-福利彩平台是什么| www.99yx.cc-体育彩票分类| www.365787.cc-彩铅画樱桃简单教程| www.8216.biz-奥门世博彩票| www.383173.com-茶陵县体育彩票| www.564588.com-时时彩五码技巧方案| www.606618.com-长沙体彩杯击剑黑| www.569218.com-彩民乐双色球玄机图| www.470071.com-去国外做博彩犯法| www.568441.com-福彩3d神姐断组| www.189243.com-内蒙快三下载安装| www.429168.com-彩虹伞亲子游戏小班| www.901718.com-网上黑彩-| www.lj.com-优中彩彩票-| www.64uc.com-百彩仙子双色球专栏| 乐迎彩票www.tang444.com| www.22ay.com-南国七星彩经典彩版| www.908558.com-七星彩随机选号投注| 博友彩www.832795.com| www.oe11.com-新大发彩票-| www.9ek.com-113彩票下载| www.237417.com-内蒙古快三出号分析| www.428955.com-免费教水彩-| www.65bf.com-重庆实时走势图彩经| www.65xm.com-现场直播彩票补拍| www.2431.pw-117彩票下载安装| www.259122.com-竞彩篮球投注app| www.0xd.com-众乐快三-| www.389.red-安徽福彩电话号码| www.8887.online买足彩几串最合适| www.65nm.com-杭州福利彩票中心| www.113093.com-矾红彩拍卖价格| www.377159.com-腾讯时时彩二期计划| www.818074.com-陆慧明足彩任九| www.893549.com-乐彩破解版-| www.020769.com-体育彩票卖提成多少| www.138839.com-同城彩票可靠吗| www.749223.com-中彩财团致富中心| www.810278.com-彩票谜语怎么看| www.cai1822.com宁夏快三在线开奖| www.207959.com-乐彩网破解版| www.303136.com-双彩网是什么| www.055005.com-彩票平台大全送彩金| www.135991.com-广西体彩官网七星彩| www.99280.com-在店彩票怎么买| www.01800.cc-彩虹六号急停| www.577146.com-福满天体彩店客服| www.2327.cm-时时彩半顺与顺子| www.284123.com-福彩有哪些彩票| www.391798.com-wap手机彩票| www.495609.com-3d彩票投注-| www.560456.com-江苏地方彩票开奖| www.818573.com-彩票双色球领奖地址| www.003660.com-体彩开奖大乐透| www.114956.com-最新足球胜负彩票| www.170527.com-爱彩乐上海快三| www.235000.com-彩500软件-| www.292961.com-彩吧图库331期| www.145097.com-今日足彩-| www.207654.com-快3彩票平台app| www.734910.com-非凡彩票下载| www.862316.com-河南福彩大厦| www.920924.com-足球胜负彩比分直播| www.969428.com-凤凰彩票输了50万| 幸运彩票www.572699.com| www.hx25.com-快三万能和值| www.jz.cc-下载福彩选号助手| www.250027.com-购彩大平台-| www.533.cn-多彩网3d画迷| www.303348.com-七彩网7c77下载| www.676862.com-多彩投-| www.795982.com-甘肃的快三开奖结果| www.875088.com-彩票258下载| www.970509.com-网彩开售2019|