jquery和css3實現的動態時鐘效果
本章節分享一段程式碼例項,它利用jQuery和css3實現了動態時鐘效果,
指標在走動的時候有擺動效果,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> .wrapper{ width:200px; height:200px; background-size:cover; border-radius:50%; overflow:hidden; } .disk{ background-color:#ccc; width:200px; height:200px; position:relative; } .pointer{ position:absolute; top:50%; left:50%; border-radius:40px; transform-origin: bottom center; background-color:transparent; mix-blend-mode: overlay; } .hour-wrapper{ width:30px; height:100px; margin:-100px -15px; } .minute-wrapper{ width:20px; height:100px; margin:-100px -10px; } .second-wrapper{ width:10px; height:100px; margin:-100px -5px; } .hour{ width:24px; margin:3px; height:94px; border-radius:40px; background-color:#000; } .minute{ width:14px; margin:3px; height:94px; border-radius:40px; background-color:#000; } .second{ width:4px; margin:3px; height:94px; border-radius:40px; background-color:#000; transform-origin: bottom center; } .shakePoint{ animation:pointShake 0.2s; } @keyframes pointShake { 0%{ transform:rotate(0deg); } 25%{ transform:rotate(1deg); } 75%{ transform:rotate(-1deg); } 100%{ transform:rotate(0deg); } } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function() { var singleDeg = 360 / 60; function getCurrentTime() { var currentTime = new Date(); return { hour: currentTime.getHours() - 12 < 0 ? currentTime.getHours() : currentTime.getHours() - 12, minute: currentTime.getMinutes(), second: currentTime.getSeconds() } } var $pointerHour = $('.hour-wrapper'), $pointerMinute = $('.minute-wrapper'), $pointerSecond = $('.second-wrapper'); setInterval(function() { var currentTime = getCurrentTime(); console.log(currentTime); $pointerHour.css({ 'transform': 'rotate(' + singleDeg * currentTime.hour * 5 + 'deg)' }); $pointerMinute.css({ 'transform': 'rotate(' + singleDeg * currentTime.minute + 'deg)' }); $pointerSecond.css({ 'transform': 'rotate(' + singleDeg * currentTime.second + 'deg)' }) $('.second').addClass('shakePoint'); }, 1000); $('.second').on('webkitAnimationEnd', function() { $(this).removeClass('shakePoint'); }) }) </script> </head> <body> <div class="wrapper"> <div class="disk"> <div class="pointer hour-wrapper"> <div class="hour"></div> </div> <div class="pointer minute-wrapper"> <div class="minute"></div> </div> <div class="pointer second-wrapper"> <div class="second"></div> </div> </div> </div> </body> </html>
相關文章
- css3和javascript實現的時鐘效果CSSS3JavaScript
- canvas動態時鐘效果Canvas
- jquery和css實現的圓形鐘錶效果jQueryCSS
- jQuery和css3實現的電子錶效果jQueryCSSS3
- css3動態圓形鐘錶效果CSSS3
- js和css3實現的圓形鐘錶效果JSCSSS3
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- css3和jQuery實現的點選出現波紋效果CSSS3jQuery
- jquery和css3實現的巴西里約奧運火炬效果jQueryCSSS3
- jquery實現的豎向動態柱狀條效果jQuery
- javascript實現的動態時間日期效果JavaScript
- linux shell實現動態時鐘Linux
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現線條環形動態運動效果CSSS3
- js年月日小時分鐘秒動態時鐘效果JS
- canvas實現的圓形時鐘效果Canvas
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3和js實現的圓形鐘錶效果程式碼例項CSSS3JS
- css3實現邊框具有動態環形遮罩效果CSSS3遮罩
- css3實現的紅心跳動效果CSSS3
- 多角度實現有趣的時鐘效果!
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3
- css3實現的水平立體動態導航選單效果CSSS3
- 用Python實現一個實時運動的大掛鐘效果Python
- CSS3圓形時鐘效果程式碼CSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- jQuery和CSS3繪製動態笑臉jQueryCSSS3
- css3實現的立體滾動效果CSSS3
- 原生js實現的天小時分鐘和秒倒數計時效果JS
- CSS3實現王者匹配時的粒子動畫效果CSSS3動畫
- js和css3實現的空調效果JSCSSS3
- css3和js實現的大白動畫效果CSSS3JS動畫
- css3實現的滾動的檯球效果CSSS3
- OneClock的翻頁時鐘效果是如何實現的
- canvas實現的絢麗的電子時鐘效果Canvas
- 前端基礎入門五(掌握jQuery的常用api,實現動態效果)前端jQueryAPI
- jquery實現的元素以動畫方式移動和漸變效果jQuery動畫