Css3+jQuery打造的一款带动画效果的数字时钟
2015-03-12 18:05
411 查看
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Css3+jQuery打造的一款带动画效果的数字时钟丨任E行F9行车记录仪|gopro官网|电影院座椅|</title> <style type="text/css"> body{ background:#202020; font:bold 12px Arial, Helvetica, sans-serif; margin:0; padding:0; min-width:960px; color:#bbbbbb; } a { text-decoration:none; color:#00c6ff; } h1 { font: 4em normal Arial, Helvetica, sans-serif; padding: 20px; margin: 0; text-align:center; } h1 small{ font: 0.2em normal Arial, Helvetica, sans-serif; text-transform:uppercase; letter-spacing: 0.2em; line-height: 5em; display: block; } h2 { font-weight:700; color:#bbb; font-size:20px; } h2, p { margin-bottom:10px; } @font-face { font-family: 'BebasNeueRegular'; src: url('BebasNeue-webfont.eot'); src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('BebasNeue-webfont.woff') format('woff'), url('BebasNeue-webfont.ttf') format('truetype'), url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; } .container {width: 960px; margin: 0 auto; overflow: hidden;} .clock {width:800px; margin:0 auto; padding:30px; border:1px solid #333; color:#fff; } #Date { font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; font-size:36px; text-align:center; text-shadow:0 0 5px #00c6ff; } ul { width:800px; margin:0 auto; padding:0px; list-style:none; text-align:center; } ul li { display:inline; font-size:10em; text-align:center; font-family:'BebasNeueRegular', Arial, Helvetica, sans-serif; text-shadow:0 0 5px #00c6ff; } #point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:10px; padding-right:10px; } @-webkit-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } @-moz-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; } } </style> <script type="text/javascript" src="/images/jquery-1.6.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"] var newDate = new Date(); newDate.setDate(newDate.getDate()); $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear()); setInterval( function() { var seconds = new Date().getSeconds(); $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); },1000); setInterval( function() { var minutes = new Date().getMinutes(); $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); },1000); setInterval( function() { var hours = new Date().getHours(); $("#hours").html(( hours < 10 ? "0" : "" ) + hours); }, 1000); }); </script> </head> <body> <div class="clock"> <div id="Date"></div> <ul> <li id="hours"> </li> <li id="point">:</li> <li id="min"> </li> <li id="point">:</li> <li id="sec"> </li> </ul> </div> </body> </html> <br><br><br>IE8及以前版本不兼容CSS3,请使用火狐或CHROME浏览器运行本效果。<br><br>如果不显示预览效果,请刷新本页面~~<br>所需js文件:<br><hr>
相关文章推荐
- 源码推荐(8.04):仿锤子时钟,数字进度条 已添加动画效果
- 使用jbox2d物理引擎打造摩拜单车贴纸动画效果
- PS与IR打造兔斯基撞墙动画效果
- Android 仿余额宝数字动画效果
- iOS使用UICountingLabel实现数字变化的动画效果
- 打造酷炫RecyclerView 进入 item动画效果
- HTML5 Canvas粒子数字时钟动画
- Hack5-用TextSwitcher和ImageSwitcher打造漂亮的动画效果
- android打造独一无二的loading动画效果
- JS 实现倒计时数字时钟效果【附实例代码】
- IOS第18天(4,核心动画,时钟效果,定时器,图片旋转角度,CALayer 锚点,获取当前,小时,秒,分)
- Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果
- 添加购物车控件(增加或减少数字)有动画效果
- iOS使用UICountingLabel实现数字变化的动画效果
- Qt仿Android带特效的数字时钟源码分析(滑动,翻页,旋转效果)
- iOS使用UICountingLabel实现数字变化的动画效果
- CSS3打造的10种创意动画菜单效果
- 【安卓开发】用PageTransformer打造更好的动画效果
- 有千位分隔符的数字动画加载效果
- Android自定义控件View(实现控件的动画效果,自定义类画简略时钟,TextView中文字逐一显示,动态设置progress的圆环/扇形ProgressBar等)