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.69765.cc-广州鸣彩传媒骗子| www.kv19.com-上海快三开始时间| www.216899.com-省份快三犯法吗| www.754572.com-信誉第一的彩票网站| www.867641.com-彩吧论坛胆码杀码| www.964401.com-人人快三骗局| www.ai6.com-广西快三倍投技巧| www.wb82.com-排列三走势图体彩网| www.34rj.com-纽约有哪些彩票| www.218192.com-三分快三怎么算中奖| www.432121.com-彩票法律法规公安| www.39712.com-玩高频彩赢钱| www.1861.cc-湖北快三怎么买| www.14446.com-七星彩一等奖最低| www.9516.me-哪种彩票8位数| www.57523.cc-手机玩的彩票是什么| www.189230.com-百姓彩票网-| www.436197.com-福彩快3和值| www.621782.com-大乐透走势彩之家| www.726453.com-手机买彩票平台| www.806208.com-福彩今天3d试机号| www.897655.com-快易彩app下载| www.964917.com-电脑福利彩票查询| www.t51.cn-武汉市福彩中心地址| www.73or.com-彩票3d推荐号| www.yg15.com-福利彩票复式计算器| www.590008.com-原创足彩盘口分析| www.676577.com-彩吧论坛彩票论坛| www.791113.com-澳门博彩足球赔| www.923458.com-包头彩票店生意转让| www.ch8.cc-玩快三的诀窍| www.510058.com-5o5o彩票-| www.188244.com-广西快三计划软件| www.0619.org-长沙福利福彩店| www.6010.org-省体彩中心-| www.8787.top-彩票历史数据分析| www.42843.com-王牌彩票下载手机版| www.041248.com-广西彩票开奖结果| www.0624.cc-好乐多彩票大发快三| www.23054.com-马上彩票-| 天下彩www.335324.com| www.on61.com-新彩民-| www.25ga.com-下彩彩票客户端| www.107771.com-关于中彩票的群名| www.261034.cc-尊彩骗局-| www.404708.com-七星彩规律怎么看| www.561027.com-爱投彩票安卓版下载| www.609348.com-18080期七星彩| www.764169.com-彩投彩票58-| www.1001.online五分彩长龙几期反| www.020771.com-彩票计划源码| www.579938.com-七乐彩晚上几点开奖| www.301410.com-鸿彩彩票怎么样| www.949575.com-百宝彩青海快3| www.384009.com-体育彩票防伪| www.465234.com-三十六技赢足彩| www.041775.com-优彩彩票网香港| www.194640.com-快三跨度选号技巧| www.111511.com-下载盈彩网-| www.323913.com-乐彩提现很慢| 彩票5www.550420.com| www.62.win-官方高频彩开奖号码| www.0008.wang-买彩票有几位数| www.16366.cc-彩客站大发快| www.005103.com-福建福利彩票查询| www.121548.com-百合网玩彩票| www.06759.com-彩票软件pk10| www.162566.com-大運彩票-| www.960436.com-江苏盐城彩票一等奖| www.622339.com-时时采彩走势图龙虎| www.003336.com-基诺彩开奖-| www.971394.com-体彩开奖j结果| www.679823.com-中国彩吧首页吧一一| www.092039.com-聚彩彩票平台注册| www.78379.com-竞彩足球加奖app| www.826136.com-二元彩票网大乐透| www.690663.com-宝鸡体育彩票体彩管| www.839273.com-彩票足球app| www.yt9.com-河北快3彩票| www.6760.cn-福利彩票中奖得住| www.621816.com-今晚的3d彩票图纸| www.7678.me-广东时时彩彩走势图| www.076078.com-达人彩票集团| www.86044.com-彩涂铝生产线| www.283598.com-七星彩连中五个号| www.451997.com-c78彩票app-| www.671216.com-体彩排列三胆码| www.833661.com-傲赢彩票安卓下载| 金掌柜www.83993c.com| www.3411.biz-国民彩票是正规的吗| www.220035.com-体彩七星彩-| www.358249.com-有没有四个号的彩票| www.660526.com-快三大小助手| www.232299.com-今天足彩十四场对阵| www.514007.com-澳大利亚彩票有几种| www.749588.com-强强彩票软件手机版| www.832790.com-彩虹qq定位版| www.917508.com-必赢彩票是正规的吗| www.510877.com-本子福利全彩图片| www.560892.com-体彩走势图500期| www.0745.bid-彩票开奖结果软件| www.948176.com-中彩网3d专家推荐| www.cai62.cc-快三今天-| www.66462.com-亿乐彩提现不成功| www.138457.com-浙江省体彩官方网站| www.594900.com-好彩1复式价格表| www.ww1.cc-上海快三二码遗漏码| www.96217.cc-中国体育彩票正规吗| www.521.cm-石家庄彩票兑奖中心| www.96dv.com-网上赌时时彩违法么| www.32679.cc-福彩七乐彩兑奖期限| www.95577.com-彩票奖金分配比例| www.970899.com-迷彩兔看看-| www.bi56.com-玩彩票倍投靠谱吗| www.yc45.com-福彩助手版-| www.91lb.com-福利彩票中心贪污| www.4233.top-今曰说法失控的黑彩| www.1579.vip-幻彩曲棍球小游戏| www.022610.com-福彩3d断组-| www.227738.com-体彩大乐透预测汇总| www.787701.com-彩客化学集团| www.910112.com-粤彩联盟新版| 福利彩票www.78700f.com| www.814163.com-网络博彩怎么玩| www.8865.com-足彩八串一规则| www.817918.com-足彩19040分析| 彩票驿站www.2350p.com| www.41xq.com-北京彩色透水地坪| www.001358.com-极速快三辅助| www.531761.com-教手绘彩铅唯美蝴蝶| www.03pw.com-tt彩票靠谱吗| www.2077.vip-竞彩网即时比分直播| www.17274.com-福彩通下载-| www.72357.com-福彩双色球投注| www.020062.com-彩票店有任务吗| www.098216.com-3d福利彩票试机号| www.357529.com-体彩排列3中奖规则| www.555509.cc-豹子号今年下期彩票| www.am31.com-福彩河北基本走势| www.11vc.com-体育彩票真能中吗| www.611961.com-八方彩票下载安装| www.20177.cc-爱彩网主页-| www.72596.com-至尊快三合法吗| www.693507.com-下载京彩app下载| www.781140.com-热门彩票软件| www.861421.com-河南体彩开奖| www.955553.cc-合肥竞彩店销量| www.999137.com-江苏e球彩结果| www.at99.com-多宝彩票平台下载| www.ry72.com-彩票256官方| www.0sw.com-天福购彩app| www.51le.cc-最近的福彩销售点| www.2363.pw-七彩云南普洱茶饼| www.05705.com-彩票游戏是什么| www.58028.cc-cc分分彩计划软件| www.877975.com-东方福彩6十1开奖| 吉利彩票www.66376g.com| www.599062.com-福彩今晚开奖号码是| www.wx89.com-幸运一分快三技巧| www.655255.com-七星彩私彩-| www.796461.com-9号彩票注册| www.874955.com-信彩彩票可靠吗| www.956879.com-快三号码共有多少注| www.2325.wang-五分彩全天计划菜鸟|