css+js实现反走逆时针时钟指针动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现反走逆时针时钟指针动画效果代码
下面为部分代码预览,完整代码请点击下载或在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: #e3e4e8; --fg: #17181c; font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320)); } body { background: var(--bg); color: var(--fg); font: 1em/1.5 -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, sans-serif; height: 100vh; display: grid; place-items: center; } main { padding: 1.5em 0; } .clock { background: radial-gradient(100% 100% at 50% 10%, #737a8c, #17181c 50%); border-radius: 50%; box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.5); position: relative; width: 15em; height: 15em; } .clock__inner-frame, .clock__ticks, .clock__tick, .clock__digits, .clock__digit, .clock__text, .clock__hands, .clock__hand, .clock__hand-trail { position: absolute; } .clock__inner-frame, .clock__ticks, .clock__digits, .clock__hands { border-radius: inherit; } .clock__inner-frame { background: linear-gradient(#8f95a3, #c7cad1); box-shadow: 0 0.1em 0 #cccccc inset; top: 1em; left: 1em; width: 13em; height: 13em; } .clock__ticks { background: linear-gradient(#e3e4e8, white); box-shadow: 0 0.5em 0.5em 0.75em rgba(0, 0, 0, 0.2) inset, 0 0 0 0.15em #17181c; top: 1.5em; left: 1.5em; width: 12em; height: 12em; } .clock__tick, .clock__hand { background: currentColor; } .clock__tick { bottom: 50%; left: calc(50% - 0.025em); width: 0.05em; min-width: 1px; height: 0.25em; transform-origin: 50% 100%; } .clock__tick:nth-child(5n+1) { left: calc(50% - 0.05em); width: 0.1em; min-width: 2px; height: 0.5em; } .clock__tick:nth-child(1) { transform: rotate(0deg) translateY(-5.25em); } .clock__tick:nth-child(2) { transform: rotate(6deg) translateY(-5.5em); } .clock__tick:nth-child(3) { transform: rotate(12deg) translateY(-5.5em); } .clock__tick:nth-child(4) { transform: rotate(18deg) translateY(-5.5em); } .clock__tick:nth-child(5) { transform: rotate(24deg) translateY(-5.5em); } .clock__tick:nth-child(6) { transform: rotate(30deg) translateY(-5.25em); } .clock__tick:nth-child(7) { transform: rotate(36deg) translateY(-5.5em); } .clock__tick:nth-child(8) { transform: rotate(42deg) translateY(-5.5em); } .clock__tick:nth-child(9) { transform: rotate(48deg) translateY(-5.5em); } .clock__tick:nth-child(10) { transform: rotate(54deg) translateY(-5.5em); } .clock__tick:nth-child(11) { transform: rotate(60deg) translateY(-5.25em); } .clock__tick:nth-child(12) { transform: rotate(66deg) translateY(-5.5em); } .clock__tick:nth-child(13) { transform: rotate(72deg) translateY(-5.5em); } .clock__tick:nth-child(14) { transform: rotate(78deg) translateY(-5.5em); } .clock__tick:nth-child(15) { transform: rotate(84deg) translateY(-5.5em); } .clock__tick:nth-child(16) { transform: rotate(90deg) translateY(-5.25em); } .clock__tick:nth-child(17) { transform: rotate(96deg) translateY(-5.5em); } .clock__tick:nth-child(18) { transform: rotate(102deg) translateY(-5.5em); } .clock__tick:nth-child(19) { transform: rotate(108deg) translateY(-5.5em); } .clock__tick:nth-child(20) { transform: rotate(114deg) translateY(-5.5em); } .clock__tick:nth-child(21) { transform: rotate(120deg) translateY(-5.25em); } .clock__tick:nth-child(22) { transform: rotate(126deg) translateY(-5.5em); } .clock__tick:nth-child(23) { transform: rotate(132deg) translateY(-5.5em); } .clock__tick:nth-child(24) { transform: rotate(138deg) translateY(-5.5em); } .clock__tick:nth-child(25) { transform: rotate(144deg) translateY(-5.5em); } .clock__tick:nth-child(26) { transform: rotate(150deg) translateY(-5.25em); } .clock__tick:nth-child(27) { transform: rotate(156deg) translateY(-5.5em); } .clock__tick:nth-child(28) { transform: rotate(162deg) translateY(-5.5em); } .clock__tick:nth-child(29) { transform: rotate(168deg) translateY(-5.5em); } .clock__tick:nth-child(30) { transform: rotate(174deg) translateY(-5.5em); } .clock__tick:nth-child(31) { transform: rotate(180deg) translateY(-5.25em); } .clock__tick:nth-child(32) { transform: rotate(186deg) translateY(-5.5em); } .clock__tick:nth-child(33) { transform: rotate(192deg) translateY(-5.5em); } .clock__tick:nth-child(34) { transform: rotate(198deg) translateY(-5.5em); } .clock__tick:nth-child(35) { transform: rotate(204deg) translateY(-5.5em); } .clock__tick:nth-child(36) { transform: rotate(210deg) translateY(-5.25em); } .clock__tick:nth-child(37) { transform: rotate(216deg) translateY(-5.5em); } .clock__tick:nth-child(38) { transform: rotate(222deg) translateY(-5.5em); } .clock__tick:nth-child(39) { transform: rotate(228deg) translateY(-5.5em); } .clock__tick:nth-child(40) { transform: rotate(234deg) translateY(-5.5em); } .clock__tick:nth-child(41) { transform: rotate(240deg) translateY(-5.25em); } .clock__tick:nth-child(42) { transform: rotate(246deg) translateY(-5.5em); } .clock__tick:nth-child(43) { transform: rotate(252deg) translateY(-5.5em); } .clock__tick:nth-child(44) { transform: rotate(258deg) translateY(-5.5em); } .clock__tick:nth-child(45) { transform: rotate(264deg) translateY(-5.5em); } .clock__tick:nth-child(46) { transform: rotate(270deg) translateY(-5.25em); } .clock__tick:nth-child(47) { transform: rotate(276deg) translateY(-5.5em); } .clock__tick:nth-child(48) { transform: rotate(282deg) translateY(-5.5em); } .clock__tick:nth-child(49) { transform: rotate(288deg) translateY(-5.5em); } .clock__tick:nth-child(50) { transform: rotate(294deg) translateY(-5.5em); } .clock__tick:nth-child(51) { transform: rotate(300deg) translateY(-5.25em); } .clock__tick:nth-child(52) { transform: rotate(306deg) translateY(-5.5em); } .clock__tick:nth-child(53) { transform: rotate(312deg) translateY(-5.5em); } .clock__tick:nth-child(54) { transform: rotate(318deg) translateY(-5.5em); } .clock__tick:nth-child(55) { transform: rotate(324deg) translateY(-5.5em); } .clock__tick:nth-child(56) { transform: rotate(330deg) translateY(-5.25em); } .clock__tick:nth-child(57) { transform: rotate(336deg) translateY(-5.5em); } .clock__tick:nth-child(58) { transform: rotate(342deg) translateY(-5.5em); } .clock__tick:nth-child(59) { transform: rotate(348deg) translateY(-5.5em); } .clock__tick:nth-child(60) { transform: rotate(354deg) translateY(-5.5em); } .clock__digits { top: 2.5em; left: 2.5em; width: 10em; height: 10em; } .clock__digit { font-size: 1.5em; line-height: 1; letter-spacing: -0.05em; text-align: center; top: calc(50% - 0.75rem); left: calc(50% - 1.25rem); width: 2.5rem; height: 1.5rem; } .clock__digit:nth-child(1) { transform: rotate(30deg) translateY(-4.25rem) rotate(-30deg); } .clock__digit:nth-child(2) { transform: rotate(60deg) translateY(-4.25rem) rotate(-60deg); } .clock__digit:nth-child(3) { transform: rotate(90deg) translateY(-4.25rem) rotate(-90deg); } .clock__digit:nth-child(4) { transform: rotate(120deg) translateY(-4.25rem) rotate(-120deg); } .clock__digit:nth-child(5) { transform: rotate(150deg) translateY(-4.25rem) rotate(-150deg); } .clock__digit:nth-child(6) { transform: rotate(180deg) translateY(-4.25rem) rotate(-180deg); } .clock__digit:nth-child(7) { transform: rotate(210deg) translateY(-4.25rem) rotate(-210deg); } .clock__digit:nth-child(8) { transform: rotate(240deg) translateY(-4.25rem) rotate(-240deg); } .clock__digit:nth-child(9) { transform: rotate(270deg) translateY(-4.25rem) rotate(-270deg); } .clock__digit:nth-child(10) { transform: rotate(300deg) translateY(-4.25rem) rotate(-300deg); } .clock__digit:nth-child(11) { transform: rotate(330deg) translateY(-4.25rem) rotate(-330deg); } .clock__digit:nth-child(12) { transform: rotate(360deg) translateY(-4.25rem) rotate(-360deg); } .clock__text { font-size: 0.4em; text-align: center; text-transform: uppercase; top: 65%; left: 0; width: 100%; } .clock__hands { filter: drop-shadow(0 0.5em 0.1em rgba(0, 0, 0, 0.3)); top: 2.5em; left: 2.5em; width: 10em; height: 10em; } .clock__hand--hr { animation: hrHand 86400s cubic-bezier(0.8, 0, 0.2, 1) infinite; border-radius: 0 0 0.2em 0.2em; bottom: calc(50% - 0.2em); left: calc(50% - 0.2em); width: 0.4em; height: 3.25em; transform-origin: 50% calc(100% - 0.2em); } .clock__hand--min { animation: longHand 3600s cubic-bezier(0.8, 0, 0.2, 1) infinite; border-radius: 0 0 0.15em 0.15em; bottom: calc(50% - 0.15em); left: calc(50% - 0.15em); width: 0.3em; height: 5em; transform-origin: 50% calc(100% - 0.15em); } .clock__hand--sec { animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite; bottom: calc(50% - 1.5em); left: calc(50% - 0.1em); width: 0.2em; height: 6.5em; transform-origin: 50% calc(100% - 1.5em); } .clock__hand--sec:before { background-color: inherit; border-radius: 50%; content: ""; display: block; position: absolute; bottom: 1.3em; left: calc(50% - 0.2em); width: 0.4em; height: 0.4em; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: #2e3138; --fg: #e3e4e8; } .clock { background: radial-gradient(100% 100% at 50% 10%, white, #8f95a3 50%); } .clock__inner-frame { background: linear-gradient(#454954, #737a8c); box-shadow: 0 0.1em 0 #999999 inset; } .clock__ticks { background: linear-gradient(#17181c, #2e3138); } } /* Animations */ @keyframes hrHand { 0% { transform: rotate(0deg); } 4.1666666667% { transform: rotate(-330deg); } 8.3333333333% { transform: rotate(-660deg); } 12.5% { transform: rotate(-990deg); } 16.6666666667% { transform: rotate(-1320deg); } 20.8333333333% { transform: rotate(-1650deg); } 25% { transform: rotate(-1980deg); } 29.1666666667% { transform: rotate(-2310deg); } 33.3333333333% { transform: rotate(-2640deg); } 37.5% { transform: rotate(-2970deg); } 41.6666666667.........完整代码请登录后点击上方下载按钮下载查看
网友评论0