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.0401.net-彩乐园ll应用下| www.01874.com-中华彩吧更懂彩民| www.69163.cc-马来分分彩开奖结果| www.031062.com-珍爱网彩票托最新| www.112018.com-下载彩票立送38元| www.185455.com-3d网上福彩投注站| www.260391.com-体育彩票不算赌博| www.335790.com-广东体彩网十一选五| www.415119.com-彩票缴款通一支付宝| www.520785.com-彩票中奖没领| www.591955.com-天空彩各坛高手料| www.668350.com-3d彩票定时器| www.751941.com-亚彩彩票成员名单| www.916979.com-必赢彩票后续| www.971893.com-九万彩票改什么网址| www.aw60.com-福利彩票5d开奖号| www.sd48.com-时时彩多久开奖一次| www.10zc.com-四季彩下载-| www.81fz.com-聚彩app-| www.1814.org-cc彩8-| www.9333.live-福彩是假的-| www.47098.com-玩大发快三输死我了| www.93178.cc-玩快三真的赚钱吗| www.054009.com-yy彩票可以玩吗| www.150055.com-中国甘肃甘肃快三| www.237922.com-快三彩票走势图表| www.317108.com-幸运十分彩-| www.387387.com-派彩河北快三| www.526153.com-时时彩计算豹子| www.608382.com-开户送300元彩金| www.678815.com-双色球开奖新浪爱彩| www.757402.com-大鹏金服乐彩| www.862723.com-我的彩票开奖规则| www.930603.com-买彩票中奖税率| www.983345.com-乐彩客下载-| www.bc10.com-彩票怎么稳赚不赔| www.sm00.com-时时彩网站哪个正规| www.09ke.com-体彩卩3试机号| www.76te.com-黑龙江福彩票摇红包| www.1439.net-彩神4邀请码| www.8793.xyz-腾讯分彩-| www.39959.com-七星彩号码走势图| www.85841.com-彩票中大奖兑奖流程| www.035508.com-彩票统计软件哪个好| www.132507.com-正品彩妆代理| www.204839.com-数字新浪彩票| www.272470.com-广西福彩官网客户端| www.369309.com-福彩3d缩水彩乐乐| www.457368.com-彩票诗句-| www.542885.com-新浪爱彩网-| www.639510.com-体彩装修图-| www.722752.com-创富彩票靠谱吗| www.795848.com-天天彩官网-| www.868548.com-七星彩跨度振幅| www.955255.com-开彩票店要求| 凤凰彩票www.3479a.com| www.dg35.com-福利彩票是哪种彩| www.tr86.com-彩票开奖接口| www.56.com-彩票三d彩友论谈| www.66lh.com-288彩票可靠吗| www.0400.win-好运来彩票下载安装| www.23122.cc-078彩票登录网址| www.64050.com-足彩任九缩水软件| www.026248.com-排三走势图彩吧助手| www.104021.com-福彩老快三违法吗| www.170817.com-吉林快三走势图表| www.272879.com-彩票什么时候出现的| www.355453.com-五分彩怎么玩技巧| www.427006.com-彩民周刊报纸答案| www.517794.com-七乐彩开机号码查询| www.583070.com-汇彩网入口-| www.654085.com-金龙彩票平台地址| www.771279.com-彩经网时时乐走势图| www.853286.com-拉菲2彩票-| www.911161.com-体育彩票排列五开奖| www.968367.com-三分时时彩开奖预测| www.ld7.cc-e球彩走势图| www.on89.com-七乐彩游戏规则| www.1pa.com-福彩3b图谜第三版| www.50fv.com-快三职业彩民一天| www.512.com-qq群投彩-| www.3711.in-购彩xs是骗人的吗| www.8590.cm-彩球制作-| www.56637.cc-海盗团队彩票计划| www.033784.com-如意彩票网注册| www.122284.com-福彩双色球作弊案| www.186977.com-江苏快三中奖奖金| www.250481.com-看中彩票的软件| www.315587.com-安微福彩快三结果| www.375885.com-去柬埔寨做博彩客服| www.524013.com-内蒙福彩官方网站| www.597167.com-智博彩票网-| www.665447.com-今天双彩图谜专区| www.729300.com-彩票查询排列3| www.792929.cc-安阳福彩中心地址| www.859985.com-时时中彩票在哪里下| www.912787.com-好彩客为什么没人抓| www.971009.com-万悼彩票-| www.ce79.com-彩票代理怎么拉人| www.rp97.com-秒开彩票-| www.07.org-中华彩票9149| www.57pn.com-体彩大乐透后一位| www.707.site-世界杯胜负彩怎么玩| www.3852.biz-星彩网怎么下载| www.8539.shop-时时彩倍投工具安卓| www.55739.com-哪个nba彩票正规| www.94504.com-彩票ab-| www.042173.com-体彩足球竞彩玩法串| www.133397.com-富民彩票是黑网站吗| www.200342.com-彩宝贝网彩票| www.259584.com-选号器下载快三广西| www.321446.com-官方高频彩开奖直播| www.382059.com-点半进入精彩内容| www.528723.com-复式彩票怎么算| www.599376.com-胜负彩机选中奖几率| www.662235.com-中福时时彩计划软件| www.750526.com-北京九歌彩票手机版| www.807363.com-足彩外围玩法| www.871922.com-牛彩票网址www| www.984833.com-彩8彩票c85-| www.cp185.cc-幸运快三哪个平台有| www.io67.com-竞彩足球让球胜平负| www.xm28.com-购买彩票投注站| www.08od.com-七乐彩顺序岀球览表| www.67of.com-竞彩收米app| www.0035.cn-2元彩票是几位数| www.8186.wang-六彩票香港-| www.21672.cc-微信让我陪她玩彩票| www.58691.cc-福彩3d天中原创布| www.020002.com-欠债突然中彩票| www.079711.com-彩票交税-| www.130791.com-天天彩票官方直营| www.192188.com-河南省福彩快3玩法| www.250905.com-彩八彩票c8.cc| www.309803.com-竞彩5场3关-| www.367669.com-彩铅画古代人物素描| www.442482.com-福彩平台刷单| www.521146.com-中国福彩5分钟开奖| www.579435.com-高棉时时彩开奖| www.635365.com-搏有彩下载-| www.797757.com-lcz99购彩票| www.860060.com-2019极速彩票| www.908428.com-9m彩票-| www.961549.com-四柱预测彩票实例| 奔驰彩票www.www.uucp300.com| www.pg5.cc-335彩票app-| www.mg96.com-彩票平台彩金高| www.s31.biz-大发快三是赌博| www.30up.com-周日有什么彩票| www.292.tv-为什么七星彩出不来| www.2449.me-怎么申请彩票投注站| www.6801.me-3d彩吧开奖号| www.07002.com-福彩平台都有哪些| www.38931.cc-体彩七位数中奖| www.73588.com-搜索足彩必发指数| www.015784.com-用手机怎么买七星彩| www.068609.com-彩票哪个好-| www.254632.com-好彩是正规的平台吗| www.315059.com-篮球彩票怎么买| www.369311.com-福彩六十一开奖查询| www.439585.com-至尊争霸彩票下载| www.516715.com-下载app趣彩彩票| www.570051.com-吉林快三多少组号码| www.625680.com-开心时时彩平台|