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.211422.com-彩票快三中奖规则| www.866.live-体彩5d的开奖号码| www.7665.top-时时采彩软件计划稳| www.nq89.com-福利彩票机选号码| www.w90.net-乐彩客彩票官方网站| www.2545.xyz-信用卡积分兑彩票| www.373811.com-七乐彩下注规则| www.986158.com-彩票送彩金app| www.ew97.com-免费下载快三开挂| www.c34.top-易彩官网注册| www.063651.com-免费送彩金时彩平台| www.905618.com-彩乐乐专家杀码预测| www.985995.com-福彩站怎么样| www.pn96.com-深圳福彩app| www.143703.com-长城彩票是什么| www.854858.com-体彩竞彩足球数据| www.281385.com-幸运五分彩是谁开奖| www.465684.com-八卦预测彩票| www.633632.com-幸运彩大发快3| www.920052.com-摇彩票app-| www.537209.com-有彩色和无彩色| www.674204.com-彩票代购网站制作| www.806599.com-彩票第32期-| www.889601.com-七乐彩票代理真假| www.947486.com-排列3双彩图| www.kv.com-百胜快三登录网址| www.79iv.com-小鹿彩票重庆时时彩| www.272729.com-福彩快三第一门户| www.374386.com-万彩吧资料大全| www.505713.com-彩票能转职吗| www.205313.com-老快三开奖结果江西| www.009260.com-福彩领奖时间是几点| www.165582.com-彩票票花怎么看| www.14196.com-帝豪2彩票论坛| www.ob10.com-彩票查询开奖结果| 手机购彩www.632599.com| www.2972.cn-甘肃福彩主任| www.0738.cn-01彩票是怎么回事| www.8318.pw-吉安市体彩中心| www.39566.cc-开机i彩票-| www.979327.com-苏式彩绘-| www.ag65.com-一定牛彩票网合法吗| www.wj85.com-怎么看快三要出长龙| www.36qe.com-七星彩走势图和值| www.2032.shop-福彩3d旦码高手| www.190233.com-那个快三彩票网能玩| www.780449.com-天津时时彩彩经网| www.848020.com-古建筑斗拱彩绘图案| www.912932.com-快三时时开奖图| www.968534.com-福彩3d奖金参照表| 天下彩www.849689.com| www.93479.com-心理五快三良| www.122570.com-彩世界下载-| www.59669.com-彩虹卡通画-| www.987494.com-乐米彩票和小米| www.ys66.cc-体彩中心-| www.613723.com-快购彩三-| www.754109.com-彩票平台注册| www.8672.cn-体彩是否有假货| www.4328.cn-鑫彩网平台下载安装| www.509173.com-彩民交流区-| www.593007.com-彩虹无人机硕士待遇| www.673196.com-怎么查附近彩票店| www.771618.com-老版时时彩宝典大全| www.852292.com-河南商丘的彩礼| www.955005.com-快彩助手11选5| 博友彩www.962095.com| www.ml38.com-好彩堂马会开奖结果| www.x69.com-大唐时时彩app| www.56wl.com-张家口彩票站| www.cp2208.com-大发快三技巧讲解| www.ci78.com-随州论坛快三论剑| www.566665.com-棋牌彩票二合一| www.703625.com-宝彩是不是骗局| www.825299.com-竞彩猫怎么不播了| www.rc77.com-老彩民软件-| www.76na.com-新粤彩开奖结果查询| www.609.org-中福彩下载安装| www.6793.shop-时时彩特殊号半顺| www.18476.com-大发快三单双怎么玩| 彩票坊www.412228.com| www.036208.com-蚂蚁团队彩票计划| www.03572.com-还要继续买彩票吗| www.55091.com-晶彩靓妍美白祛斑霜| www.953527.com-竞彩258正规吗| www.jb28.com-足彩比分分析| www.e87.top-今晚七乐彩现场直播| www.25os.com-骰子彩票的技巧| www.97ax.com-微信盘彩票二维码| www.4625.vip-篮球竞彩怎么玩| www.9099.tv-七乐彩历期开奖数据| www.35702.com-518彩票怎么样| www.8654.biz-南国特区彩票论坛一| www.68140.com-体育竞技彩票倍投| www.497272.com-牛彩官网3d断组| www.654161.com-时时彩大小遗漏数据| www.66zj.cc-腾讯分分彩游规则| www.35102.com-天下免费彩资料综合| www.299.com-足彩分析骗局| www.520154.com-世界各国彩票| www.650908.com-水彩画画教程| www.od95.com-快三权威是不是真的| www.12rj.com-幸运五分彩官方网站| www.56112.com-七星彩能不能中奖| www.836811.com-世界杯竞彩足球彩票| www.273767.com-河北体彩排五开奖号| www.760345.com-今天好彩3开奖结果| www.906989.com-彩票有几种奖项| www.jp80.com-彩神1号-| www.295108.com-贵州福彩兑奖地址| www.654007.com-谁有送彩金的网投吗| www.796413.com-福彩任选5中奖规则| www.947618.com-在线彩票投注| www.re3.com-极速快三规律大小| www.881761.com-辉煌彩票咋样| www.cf08.com-福彩3d合买平台| www.85uu.com-聚象彩是假的吗| www.176361.com-5分快三怎样下载| www.329513.com-118彩票手机版| www.900639.com-彩吧彩报第四版| www.423311.com-体彩柜台-| www.653265.com-幻彩彩票下载手机版| www.999873.com-网易彩票为什么停售| www.tp33.com-彩票一键出号软件| www.77hu.cc-缅甸佤邦有博彩推广| www.714211.com-最牛时时彩后一计划| www.086.cc-富东国际彩票| www.053643.com-足彩投注比例| www.337187.com-那种彩票可以玩单双| www.268619.com-3d快三走势图| www.830003.com-彩运快三下载| www.693710.com-彩票官方网网址| www.776418.com-大乐透网上购彩| www.715058.com-7728彩票靠谱吗| www.874389.com-江苏福彩抉3一定牛| 500彩票www.500713.com| www.15ma.com-因彩礼钱分手值得吗| www.5418.cm-彩票什么样子| www.52281.cc-好彩票a-| www.97124.com-洛阳飞龙在天竞彩| www.629102.com-彩色激光复印机a3| www.836811.com-世界杯竞彩足球彩票| www.964507.com-初级彩票教育指导师| 顶尖彩票www.234267.com| www.51500.com-福利彩票幸运数字| www.b29.pw-江西乐彩快三查询| www.666874.com-七乐彩容易中头奖吗| www.420880.com-小白彩票旧版首页| www.227269.com-彩票系统破解版| www.0537.la-nncny牛彩纽约| www.357744.com-羊城晚报今日好彩版| www.857377.com-甘肃快三遗漏值| www.297571.com-下载v8彩-| www.691300.com-要中彩上众彩| www.768778.com-粤淘彩票官方网站| www.944390.com-体育彩票机选能尾数| www.eo2.com-快三定胆最准| www.700520.com-彩辉纺织有限公司| www.333435.cc-牛人算彩票-| www.479054.com-体彩大乐透杀球| www.583505.com-高频彩走势图大全| www.705386.com-国家正规彩票| www.965587.com-彩票加注什么意思| www.qn44.com-快三外挂演示|