效果
HTML代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery+css3实现极具创意的罗盘旋转时钟效果源码</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--背景--> <div class="clock-container"> <!--左边时间--> <div class="clock-digital"> <div class="date"></div> <div class="time"></div> <div class="day"> </div> </div> <!--表盘--> <div class="clock-analog"> <!--红线--> <div class="spear"></div> <!--时钟--> <div class="hour"></div> <!--分钟--> <div class="minute"></div> <!--秒钟--> <div class="second"></div> <!--表盘边框--> <div class="dail"></div> </div> </div> <script src="js/index.js" type="text/javascript" charset="utf-8"></script> </body> </html>
css代码
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } html { overflow: hidden; font-size: 16px; } .clock-container { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 480px; height: 480px; border-radius: 50%; overflow: hidden; background: #111; } .clock-container .spear { position: absolute; width: 220px; background: red; left: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 200; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4); } .clock-container .spear:after { content: ''; position: absolute; border: 7px solid transparent; border-right-color: red; right: 0; top: -7px; } .clock-container .spear:before { content: ''; position: absolute; border: 7px solid transparent; border-left-color: red; left: 2px; top: -7px; } .clock-container .clock-analog { width: 440px; height: 440px; border-radius: 50%; margin: 20px; background: #fff; z-index: 5; position: relative; } .clock-container .clock-analog .hour, .clock-container .clock-analog .minute, .clock-container .clock-analog .second { width: 50px; height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 100; -webkit-transition: 0.2s 0.2s ease-in; transition: 0.2s 0.2s ease-in; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .clock-container .clock-analog .hour span, .clock-container .clock-analog .minute span, .clock-container .clock-analog .second span { position: absolute; width: 50px; height: 20px; line-height: 20px; text-align: center; -webkit-transform-origin: 50%; transform-origin: 50%; z-index: 5; } .clock-container .clock-analog .hour span:after, .clock-container .clock-analog .minute span:after, .clock-container .clock-analog .second span:after { content: ''; width: 4px; height: 1px; background: #000; position: absolute; left: 130%; top: -10%; opacity: 0.3; } .clock-container .clock-analog .hour span:nth-child(5n+2):after, .clock-container .clock-analog .minute span:nth-child(5n+2):after, .clock-container .clock-analog .second span:nth-child(5n+2):after { width: 7px; opacity: 1; left: 110%; } .clock-container .clock-analog .hour { z-index: 150; } .clock-container .clock-analog .hour span:after { opacity: 1; width: 4px; height: 1px; color: #666; -webkit-transform: translate(5px, 12px); transform: translate(5px, 12px); } .clock-container .clock-analog .hour:after { content: ''; background: #fff; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 250px; height: 250px; border-radius: 50%; -webkit-box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.6) inset; box-shadow: 0 0 15px 2px rgba(0, 0, 0, 0.6) inset; } .clock-container .clock-analog .minute { color: #fff; } .clock-container .clock-analog .minute span:after { background: #fff; -webkit-transform: translate(10px, -7px) rotate(-9deg); transform: translate(10px, -7px) rotate(-9deg); } .clock-container .clock-analog .minute:after { content: ''; background: #333; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 350px; height: 350px; border-radius: 50%; -webkit-box-shadow: 0 0 25px 2px #000 inset; box-shadow: 0 0 25px 2px #000 inset; } .clock-container .clock-analog .second span:after { -webkit-transform: translate(5px, -10px); transform: translate(5px, -10px); } .clock-container .clock-analog .dail { width: 20px; height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; z-index: 100; } .clock-container .clock-analog .dail span { width: 20px; height: 20px; line-height: 20px; -webkit-transform-origin: 50%; transform-origin: 50%; text-indent: 1000px; overflow: hidden; position: absolute; } .clock-container .clock-analog .dail span:after { content: ''; position: absolute; width: 4px; height: 4px; border-radius: 50%; background-color: #7d7e7d; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF7D7E7D', endColorstr='#FF0E0E0E'); background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=="); background-size: 100%; background-image: -webkit-gradient(linear, left top, right top, from(#7d7e7d), to(#0e0e0e)); background-image: linear-gradient(to right, #7d7e7d 0%, #0e0e0e 100%); left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .clock-container .clock-analog .dail span:nth-child(5n+1):after { width: 8px; } .clock-container .clock-digital { position: absolute; z-index: 200; height: 444px; width: 224px; background: #090909; left: 18px; top: 18px; border-radius: 220px 0 0 220px; -webkit-box-shadow: 5px 0 15px #000; box-shadow: 5px 0 15px #000; } .clock-container .clock-digital:after { content: ''; position: absolute; border: 15px solid white; border-right: none; height: 400px; width: 200px; border-radius: 220px 0 0 220px; left: 25px; top: 25px; } .clock-container .clock-digital .time { background: #111; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #fff; border-radius: 50px; font-size: 24px; padding: 2px 20px; -webkit-box-shadow: 0 0 15px #000 inset; box-shadow: 0 0 15px #000 inset; } .clock-container .clock-digital .day { background: #111; position: absolute; right: 20px; bottom: 100px; color: #fff; border-radius: 20px; -webkit-box-shadow: 0 0 15px #000 inset; box-shadow: 0 0 15px #000 inset; padding: 2px 20px; font-size: 16px; } .clock-container .clock-digital .date { background: #111; position: absolute; right: 20px; top: 100px; color: #fff; border-radius: 20px; font-size: 16px; -webkit-box-shadow: 0 0 10px #000 inset; box-shadow: 0 0 10px #000 inset; padding: 2px 20px; }
JavaScript代码
(function() { var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ], days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; function getTime() { var date = new Date(), second = date.getSeconds(), minute = date.getMinutes(), hour = date.getHours(), time = date.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true }), day = date.getDay(), month = date.getMonth(), date = date.getDate() + ' . ' + months[month], ds = second * -6, dm = minute * -6, dh = hour * -30; $('.second').css('transform', 'rotate(' + ds + 'deg)'); $('.minute').css('transform', 'rotate(' + dm + 'deg)'); $('.hour').css('transform', 'rotate(' + dh + 'deg)'); $('.time').text(time); $('.day').text(days[day]); $('.date').text(date) } function second(selector, size) { for(var s = 0; s < 60; s++) { $(selector).append('<span style="transform: rotate(' + 6 * s + 'deg) translateX(' + size + 'px)">' + s + '秒' + '</span>') } } function minute(selector, size) { for(var s = 0; s < 60; s++) { $(selector).append('<span style="transform: rotate(' + 6 * s + 'deg) translateX(' + size + 'px)">' + s + '分' + '</span>') } } function dail(selector, size) { for(var s = 0; s < 60; s++) { $(selector).append('<span style="transform: rotate(' + 6 * s + 'deg) translateX(' + size + 'px)">' + s + '</span>') } } second('.second', 195); minute('.minute', 145); dail('.dail', 230); for(var s = 1; s < 13; s++) { $('.hour').append('<span style="transform: rotate(' + 30 * s + 'deg) translateX(100px)">' + s + '点' + '</span>') } setInterval(getTime, 1000); getTime(); }());