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.64gb.com-大彩开挂-| www.466926.com-动物彩票开奖走势| www.68212.com-福利彩票如何中奖| www.062029.com-好彩客ios下载| www.133221.com-好彩彩票网站| www.225820.com-快乐彩任选三| www.66182.cc-体彩排列三精准胆码| www.456228.com-乐博彩票登录地址| www.563372.com-帮别人下注彩票投注| www.657631.com-江苏苏快三-| www.85015.com-彩圣双胆-| www.th10.com-快三跳法视频| www.4795.top-彩虹六号年票是什么| www.621111.com-彩票加奖漏洞| www.aj05.com-七星彩走势图表2元| www.626021.com-富华彩票53330| www.731608.com-快三带人回血上岸| www.838511.com-七星彩开奖号今天| www.085848.com-有靠买彩票发财的吗| www.5050.websitess966盛世彩票| www.197356.com-中国福利彩票被查| www.308071.com-7星彩-| www.385608.com-块3彩票-| www.507396.com-惠州福利彩票官网| www.874362.com-福彩票三d-| www.119249.com-分分快三猜一个好| www.137875.com-七星彩开结果奖查询| www.239158.com-刷彩是什么东西| www.356461.com-网购彩票解禁| www.484537.com-福彩有几种类型| www.570660.com-快三开奖走势图今天| www.665082.com-购彩网欢迎您| www.745962.com-湖北福彩app官方| www.816989.com-今天开什么彩票开奖| www.900136.com-大无限彩票坑人| www.hl89.com-彩票12选5-| www.587625.com-万彩吧六肖十八码| www.780852.com-彩票开奖最快的软件| www.352939.com-中彩票真假-| www.31gf.com-全天彩是真的吗| www.877110.com-七乐彩在线直播| www.958636.com-彩588app下载| www.cz65.com-破译彩票-| www.882495.com-重庆5分彩怎么玩法| www.952502.com-快彩是什么意思| 趣彩网www.qucw2.com| www.mb90.com-福建快三号码统计| www.365766.cc-花卉铅笔淡彩画| www.453191.com-百乐门彩票是什么| www.540622.com-易彩彩民登录福地| www.610716.com-彩360下载-| www.678264.com-重庆彩钢棚-| www.751184.com-彩票巴士注册| www.816183.com-老柳玩褔彩3d| www.1805.vip-重庆时时彩稳定打法| www.981862.com-大公鸡七星彩电脑版| www.386.website安徽体彩怎么看走势| www.531794.com-彩民选号有秘诀| www.803801.com-海南彩票app下载| www.947203.com-天津福彩二十选八| www.ih5.com-快乐彩开奖号码走势| www.27sm.com-怎样注册彩票帐号| www.6040.me-幸运五星彩有官网| www.599938.com-彩票来一注-| www.781887.com-彩票今曰开奖结果| www.875052.com-中国彩吧图-| www.960430.com-苹果竞彩宝-| www.cm43.com-福彩6选3怎么玩| www.zh01.com-七乐彩专家免费预测| www.853938.com-全民智投彩票| www.3751.biz-关于808福彩| www.08850.com-金利彩票-| www.077706.cc-大奖网彩票站靠谱吗| www.949913.com-一定牛网上购彩平台| www.cf74.com-幸运彩票下载| www.884181.com-黑客能不能破解彩票| www.205.biz-云南省彩票中大奖| www.703799.com-赛后及派彩-| www.072081.com-秒速快三技巧| www.028465.com-3b彩吧第三版| www.gf42.com-鸿运5分彩走势图| www.39968.com-体育彩票投注站地址| www.015892.com-彩票提现冻结| www.761021.com-二分时时彩一期计划| www.669702.com-手机买彩票哪个正规| www.798478.com-百盈快三有没有规律| www.917879.com-彩虹宝宝音频| 亿彩www.6832z.com| www.025924.com-百胜彩票app| www.22797.com-王者彩票怎么看走势| www.68758.cc-优盈彩票是骗人的吗| www.077458.com-约彩365店主版| www.143312.com-彩虹8真的假的| www.233258.com-北京体彩官网首页| www.358374.com-广东体彩官方网| www.491345.com-澳博彩票01302| www.585523.com-博财汇彩票-| www.720096.com-购买足彩技巧经验| www.36wu.com-uk彩官网-| www.r28.top-518实时彩票| www.0631.xyz-快乐十分在线彩票| www.16499.cc-竞彩高人-| www.91524.com-手机动态炫彩壁纸| www.120456.cc-彩票人入门与技巧| www.465949.com-下载宝利彩票| www.980711.com-武汉体彩旗舰店| www.lw78.com-时时彩8码滚雪球| www.450.pw-福利彩票单式如何玩| www.62339.cc-彩票大赢家预测| www.9564.org-福彩3d冷号-| www.888624.com-147彩票-| www.974636.com-福彩3d杀尾预测| www.rz71.com-福建体彩网31选7| www.11qq.com-瑞彩客户端下载| www.720190.com-北京彩票站招聘| www.828485.com-彩家园彩票网站| www.929371.com-牛蛙彩票正版资料| 亿万彩票www.345529.com| www.494211.com-艾彩登录入-| www.92852.com-彩库助手安装| www.056333.com-文昌七星彩梦册查码| www.151213.com-多乐彩票预算| www.223832.com-宁夏福彩快三手机版| www.76916.com-地方彩票开奖查询| www.018955.com-玩利彩好吗-| www.143569.com-期期好彩下载| www.7766.org-彩坛至尊论坛| www.135254.com-一品彩票平台| www.206722.com-揭秘网赌重庆时时彩| www.273039.com-彩票资金分配比例| www.355073.com-福彩快3中奖查询| www.422230.com-乐彩双色球字迷专区| www.505295.com-利盈彩票登陆| www.973225.com-彩虹app-| www.9oq.com-福彩三地字谜汇总| www.0020.cm-澳客彩票交易盈亏| www.036009.com-双色球彩票-| www.32lv.com-体彩3走势-| www.880626.com-三号彩票下载安装| www.918585.com-955彩票靠谱吗| www.782697.com-爱彩乐彩票网电脑版| www.899123.com-足彩让负是什么意思| www.968592.com-有谁在玩优乐彩| 345彩票www.301345.com| www.g84.net-彩店宝跑了-| www.0635.top-彩票网站告别死工资| www.90609.com-彩票开奖体彩排列三| www.089363.com-大发快三精中计划群| www.hn73.com-湖北福彩快三3同号| www.39es.com-百盈快三全天计划| www.1914.vip-中昂彩云台地址| www.11756.cc-瑞彩彩票怎么没了| www.952825.com-彩票争霸靠谱吗| 皇家彩票www.hj9798.com| www.957939.com-彩票摇球-| www.729982.com-九鼎彩票平台| www.852622.com-山东省福利彩票网| www.909638.com-福彩字谜天宇迷| www.956338.com-新彩票安卓版| www.992299.com-时时彩如何定四胆| www.ak1.cc-河南快三一定牛遗漏| www.653584.com-强胆推荐竞彩网| www.769219.com-彩票女套路-| www.868808.com-七星彩前4个规律|