Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
*, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; width: 100%; } body { font-size: 100%; font-family: helvetica; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: linear-gradient(to bottom, #969696 0%, #6e6e6e 100%); } #clock { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 21em; height: 21em; border-radius: 50%; background: #eee; border: 0.2em solid #d0d0d0; box-shadow: 0 1.2em 0 -1em white, 0 -0.1em 0.3em 0 #fff, 0 0 0 0.6em #e7e7e7, 0 0.6em 1.2em 0 rgba(0, 0, 0, 0.5), inset 0 0.5em 1em 0 rgba(0, 0, 0, 0.3), inset 0 0 8em 0 rgba(0, 0, 0, 0.2); } #clock:before { display: block; content: ""; position: absolute; background: #dedede; left: -2em; top: -2em; width: 25em; height: 25em; border-radius: 4.6em; z-index: -1; box-shadow: inset 0 -0.2em 0.2em 0 rgba(0, 0, 0, 0.2), inset 0 0.2em 2em 0 #fff; } #clock:after { display: block; content: ""; position: absolute; height: inherit; width: inherit; background: transparent; top: 0; left: 0; border-radius: inherit; box-shadow: inset 12em 14em 0 -10em rgba(255, 255, 255, 0.25); z-index: 4; } #clock .hour { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 0.5em; height: 16.4em; background: transparent; box-shadow: 0 -1em 0 -0.1em #383838, 0 1em 0 -0.1em #383838; transform: rotate(30deg); } #clock .hour:after, #clock .hour:before { display: block; content: ""; position: absolute; height: inherit; width: inherit; background: inherit; box-shadow: inherit; backface-visibility: inherit; } #clock .hour:before { transform: rotate(30deg); } #clock .hour:after { transform: rotate(-30deg); } #clock .hour:nth-of-type(1) { transform: rotate(-60deg); } #clock .min { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 0.3em; height: 17em; background: transparent; box-shadow: 0 -0.6em 0 -0.1em #383838, 0 0.6em 0 -0.1em #383838; z-index: -1; transform: rotate(-54deg); } #clock .min:after, #clock .min:before { display: block; content: ""; position: absolute; height: inherit; width: inherit; background: inherit; box-shadow: inherit; backface-visibility: inherit; z-index: 0; } #clock .min:before { transform: rotate(6deg); } #clock .min:after { transform: rotate(12deg); } #clock .min:nth-child(2) { transform: rotate(-36deg); } #clock .min:nth-child(3) { transform: rotate(-18deg); } #clock .min:nth-child(4) { transform: rotate(6deg); } #clock .min:nth-child(5) { transform: rotate(24deg); } #alarm { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #f8f8f8; width: 2.6em; height: 2.6em; border-radius: 50%; transform: rotate(-45deg); box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.1); } #alarm:after { display: block; content: ""; position: absolute; width: 0.4em; height: 4.8em; top: -4.6em; background: linear-gradient(to bottom, #f6f6f6 0%, #f8f8f8 100%); left: 0; right: 0; margin: 0 auto; z-index: -3; box-shadow: inset 0 1.2em 0 #4ca440, -0.2em -0.2em 0.3em 0 rgba(0, 0, 0, 0.1); } #sec { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: radial-gradient(ellipse at center, #ffd322 0%, #fbc900 100%); width: 2em; height: 2em; border-radius: 50%; border: 0.14em solid #fbc900; z-index: 3; } #sec:before, #sec:after { display: block; content: ""; position: absolute; } #sec:before { background: #fbc900; width: 0.8em; height: 1.5em; top: 1.8em; left: 0; right: 0; margin: 0 auto; border-radius: 0 0 2em 2em; } #sec:after { width: 0.18em; height: 7.6em; top: -7.6em; background: #fbc900; left: 0; right: 0; margin: 0 auto; } #min, #hour { z-index: 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: #fbc900; transform-origin: bottom center; } #min { width: 0.6em; height: 8.6em; top: -8.6em; border-radius: 2em 2em 0 0; box-shadow: inset 0 0 0 0.16em #303030, inset 0 -6em 0 0 #303030, -0.2em -0.2em 0.4em 0 rgba(0, 0, 0, 0.2); } #hour { width: 0.7em; height: 7em; top: -7em; border-radius: 2em 2em 0 0; box-shadow: inset 0 0 0 0.16em #303030, inset 0 -4.2em 0 0 #303030, -0.2em -0.2em 0.4em 0 rgba(0, 0, 0, 0.2); } ol { position: relative; height: inherit; width: inherit; } ol li { counter-increment: customlistcounter; font-size: 1.4rem; display: inline-block; position: absolute; letter-spacing: -0.1em; color: #383838; text-align: center; } ol li:before { content: counter(customlistcounter) ""; } ol li:nth-child(1), ol li:nth-child(2), ol li:nth-child(4), ol li:nth-child(5), ol li:nth-child(7), ol li:nth-child(8), ol li:nth-child(10), ol li:nth-child(11) { font-size: 0; } ol li:nth-child(3) { top: 6.95em; right: 2.4em; } ol li:nth-child(9) { top: 6.95em; left: 2em; } ol li:nth-child(6) { bottom: 2.1em; left: 7.06em; } ol li:nth-child(12) { top: 1.9em; left: 6.78em; }
JavaScript
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)"; } })();
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>纯HTML和CSS绘制的时钟-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号