js+css布局模拟中性时钟效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css布局模拟中性时钟走动实时显示时间效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: linear-gradient(#e3e4e8, #abafba); --fg: #17181c; --primary1: #255ff4; --primary2: #5583f6; font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background: var(--bg); color: var(--fg); font: 1em/1.5 sans-serif; height: 100vh; min-height: 480px; display: grid; place-items: center; } .clock { box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3); position: relative; width: 16em; height: 16em; } .clock, .clock:before, .clock:after { border-radius: 50%; } .clock:before, .clock:after, .clock__hand { position: absolute; } .clock:before, .clock:after { content: ""; display: block; } .clock:before { box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1); top: 2.5em; left: 2.5em; width: 11em; height: 11em; } .clock:after { box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3); top: calc(50% - 0.5em); left: calc(50% - 0.5em); width: 1em; height: 1em; } .clock__hand { box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3); bottom: 50%; transform-origin: 50% 100%; transform: rotate(0) translateY(-1.25em); } .clock__hand--hr { animation: shortHand 86400s linear infinite; background: var(--primary1); border-radius: 0.5em; left: calc(50% - 0.5em); width: 1em; height: 3.2em; } .clock__hand--min { animation: longHand 3600s linear infinite; background: var(--primary2); border-radius: 0.4em; left: calc(50% - 0.4em); width: 0.8em; height: 3.6em; } .clock__hand--sec { animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite; background: var(--fg); border-radius: 0.3em; left: calc(50% - 0.3em); width: 0.6em; height: 4em; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: linear-gradient(#5c6270, #2e3138); --fg: #e3e4e8; } .clock { box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4); } .clock:before { box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2); } .clock:after { box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7); } } /* Animations */ @keyframes shortHand { 0% { box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(0deg) translateY(-1.25em); } 0.83% { box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(6deg) translateY(-1.25em); } 1.67% { box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(12deg) translateY(-1.25em); } 2.5% { box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(18deg) translateY(-1.25em); } 3.33% { box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(24deg) translateY(-1.25em); } 4.17% { box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(30deg) translateY(-1.25em); } 5% { box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(36deg) translateY(-1.25em); } 5.83% { box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(42deg) translateY(-1.25em); } 6.67% { box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(48deg) translateY(-1.25em); } 7.5% { box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(54deg) translateY(-1.25em); } 8.33% { box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(60deg) translateY(-1.25em); } 9.17% { box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(66deg) translateY(-1.25em); } 10% { box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(72deg) translateY(-1.25em); } 10.83% { box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(78deg) translateY(-1.25em); } 11.67% { box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(84deg) translateY(-1.25em); } 12.5% { box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(90deg) translateY(-1.25em); } 13.33% { box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(96deg) translateY(-1.25em); } 14.17% { box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(102deg) translateY(-1.25em); } 15% { box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3); transform: rotate(108deg) translateY(-1.25em); } 15.83% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0