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.619888.cc-港彩规律公式社区| www.850258.com-截止前买彩票| www.978545.com-500彩票大小| www.xb10.com-贵州快三一天多少期| www.84rv.com-体育彩票足彩怎么玩| www.7351.cn-彩虹6号为什么火了| www.53986.cc-彩票平台有哪些| www.039037.com-福彩投资-| www.318595.com-三分钟福彩跑马彩票| www.515759.com-安徽彩票冒领案| www.666613.com-福彩刮刮乐369| www.845309.com-胜负彩机选中奖| www.992221.com-时时彩组选包胆规则| www.qe56.com-7彩网app下载| www.94mo.com-同志彩票骗局大揭秘| www.07218.com-时时彩彩开奖记录| www.98338.cc-玩分分彩的经历| www.103467.com-快三红号有哪些号| www.186637.com-快三彩票是坑人的吗| www.272764.com-dd福彩快三-| www.555245.com-快三红号多少个| www.635157.com-七彩音符加盟| www.799979.cc-新手怎么买足球彩票| www.891057.com-彩票用语高双| www.973143.com-七彩玫瑰种植方法| www.wv92.com-易彩彩民福地测速| www.40yc.com-够力七星彩图下载| www.1663.cc-彩票大师网3d杀码| www.08996.cc-微信买彩票公众号| www.86195.com-彩票app怎么了| www.063888.cc-时时彩注册送38元| www.168606.com-快三胆拖价格表| www.262357.com-福彩3d口诀-| www.355634.com-足彩胜负彩缴税| www.466155.com-彩投骗局-| www.568038.com-体彩大乐透心得| www.659846.com-顺盈彩票靠谱吗| www.753010.com-有多少种彩票| www.35556.cc-高频时时彩平台| www.027114.com-玩彩票的女孩子| www.125066.com-授渔看彩双色球杀号| www.220397.com-江苏快三论坛| www.316775.com-福利彩票图案| www.408313.com-下载七星彩大精英版| www.531143.com-下彩棋象棋穷困潦倒| www.712992.com-福利彩票3d微信群| www.802591.com-中彩彩票怎么销户| www.866948.com-星期五彩票开什么奖| www.966929.com-怎么下载中国彩票| www.cai2818.com广西快三形态走势图| www.pv14.com-彩九平台-| www.37uq.com-七星彩这个软件| www.987342.com-体彩排列五大赢家| www.iz10.com-内蒙快三共多少注号| www.12yj.com-c彩16网址-| www.144.in-体彩顶呱刮微信兑奖| www.4074.in-什么彩票能中一个亿| www.10192.com-中彩网双擂台赛| www.62173.com-体彩排三字谜汇总| www.132092.com-河南濮阳天价彩礼| www.224508.com-江苏快三猜大小| www.312210.com-彩票33最新软件| www.397188.com-彩票奖金扣税计算器| www.588983.com-西安市体彩中心地址| www.676373.com-福建莆田结婚彩礼| www.767475.com-牛蛙彩资料-| www.948117.com-四川体彩领奖地址| www.994830.com-惠彩app-| www.ro7.com-彩票吸引话术| www.ta15.com-福利彩票几点能兑奖| www.629462.com-时时彩半顺是什么| www.773332.com-竞彩赢了没到账| www.894001.com-内蒙古快三派奖活动| www.968491.com-彩民论坛74849| www.0845.xyz-彩票让人倾家荡产| www.8838.live-128彩票坑人| www.51573.cc-江苏福彩一定牛| www.004123.com-爱淘彩-| www.954425.com-博发彩票的网址| www.cr5.cc-快三有没有挂| www.zt44.com-成都七彩网-| www.ul43.com-福彩3d阴阳走势| www.35ih.com-酷浪七星彩1988| www.4681.vip-3d家彩网独胆| www.16547.com-重庆时时彩冷热| www.67006.com-安阳中一亿彩票| www.075788.com-江西时彩开奖记录| www.119691.com-即开型彩票销售方法| www.259145.cc-什么软件可以买竞彩| www.367217.com-彩铅手绘画鹿的教程| www.025116.com-重庆时时彩几号停盘| www.157255.com-足彩冷热指数怎么算| www.314670.com-玩时时彩心态| www.396819.com-金钱豹博彩正规吗| www.514378.com-七星彩大公鸡软件| www.595494.com-虎扑篮彩-| www.263291.com-3d彩图总汇大全| www.368580.com-彩铅人物古风图片| www.494043.com-最火的移动彩票软件| www.645848.com-体育彩票能机选吗| www.837928.com-今天福彩双彩论坛| www.903017.com-真实有效的彩票网站| www.966581.com-广西双彩走势图| 500彩票www.330271.com| www.lo67.com-彩票两元网下载| www.294187.com-广西快三遗漏一定牛| www.562136.com-吉利彩票系统维护| www.658735.com-七星彩遗漏数据查询| www.727666.com-彩霸王心水论淡| www.010507.com-熊猫彩票怎么样| www.113063.com-竞彩猫杨震微博| www.202518.com-遵义市福彩管理中心| www.285646.com-k彩登录福地| www.395775.com-抖音彩虹鸭-| www.742773.com-俄罗斯彩蛋多少钱| www.812068.com-新加坡天天彩资讯| www.879299.com-用智慧彩票预测中奖| www.mk81.com-凤凰时时彩官方| www.y37.top-体彩诗谜图谜汇总| www.62pd.com-彩票大数据杀号| www.0889.ren-泊松与足彩-| www.7077.top-七彩阳光信息| www.25347.com-彩铅叠色规律| www.71096.cc-附近中国体育彩票店| www.026505.com-安卓博彩软件| www.105921.com-全民足彩彩票app| www.356757.com-公司送彩票608万| www.493825.com-福彩三地太湖图| www.713797.com-福彩3的夏天开机号| www.820912.com-哪有彩色水泥卖| www.905127.com-苏州顺昇科技彩票| 大玩家彩票www.9478o.com| www.js37.cc-1分钟单双彩票| www.951496.com-江苏快三开能做假呜| E彩堂www.43818k.com| www.ee44.cc-彩票刷量赚返水| www.yn48.com-快三高频彩票害人| www.29il.com-体彩投注软件山东| www.085666.com-网上买彩票买最正规| www.209216.com-彩票7乐彩开奖号码| www.309667.com-体彩7位数-| www.383001.com-彩票中大奖被冒领| www.496942.com-首彩西拉红葡萄酒| www.570226.com-勇士团队彩票靠谱吗| www.647444.com-体体彩大乐透| www.791879.com-快三庄家输-| www.871595.com-足彩缩水软件有哪些| www.948726.com-鑫彩网彩票注册官网| www.992526.com-158彩票安全吗| www.re3.com-极速快三规律大小| www.rf05.com-分分彩假-| www.v76.org-87彩票app下载| www.078.site-3d彩民开机号| www.3174.win-丹麦足球竞彩网| www.9429.loan-讯飞彩票骗局| www.87179.com-手机建站彩票站| www.044949.com-七星彩票开奖直播| www.122865.com-福彩公益金提成| www.73cx.com-大中华彩票安卓版| www.5588.biz-通过网络彩票骗女人| www.26378.com-710彩票平台| www.71785.com-3d银海彩票工| www.026937.com-彩票高倍投注| www.419718.com-246好彩论坛|