div+css实现无限循环时钟指针动画效果代码
代码语言:html
所属分类:动画
代码描述:div+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 { --hue: 223; --bg: hsl(var(--hue),90%,95%); --fg: hsl(var(--hue),90%,5%); --trans-dur: 0.3s; font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320)); } body { background-color: var(--bg); color: var(--fg); font: 1em/1.5 sans-serif; height: 100vh; overflow: hidden; } .recursion { font-size: 12px; position: fixed; top: 50%; left: 50%; width: 50em; height: 50em; transform: translate(-50%, -50%); } .recursion__clock { animation-timing-function: cubic-bezier(0.29, 0.05, 0.76, 0.39); border-radius: 50%; box-shadow: 0 0 0 5em var(--fg) inset; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); } .recursion__clock, .recursion__clock-hands:before, .recursion__clock-hands:after { animation-duration: 5s; animation-iteration-count: infinite; } .recursion__clock--first { animation-name: clockA; transform: translate(-50%, -50%) scale(10); } .recursion__clock--second { animation-name: clockB; transform: translate(-50%, -50%) scale(1); } .recursion__clock--third { animation-name: clockC; transform: translate(-50%, -50%) scale(0.1); } .recursion__clock--fourth { animation-name: clockD; transform: translate(-50%, -50%) scale(0.02); } .recursion__clock--fifth { animation-name: clockE; transform: translate(-50%, -50%) scale(0); } .recursion__clock-hands { position: absolute; top: 50%; left: 50%; } .recursion__clock-hands:before, .recursion__clock-hands:after { animation-timing-function: linear; background-color: var(--fg); content: ""; display: block; position: absolute; top: 50%; left: calc(50% - 0.5em); width: 1em; transform: rotate(-0.5turn) translateY(2.4em); transform-origin: 50% 0; } .recursion__clock-hands:before { animation-name: hour; height: 8em; } .recursion__clock-hands:after { animation-name: minute; height: 16em; } .recursion__clock-ticks { width: 100%; height: 100%; } .recursion__clock-tick { background-color: var(--fg); position: absolute; top: 50%; left: calc(50% - 0.5em); width: 1em; height: 1em; transform: translateY(18em); transform-origin: 50% 0; } .recursion__clock-tick:nth-child(5n+1) { height: 2em; } .recursion__clock-tick:nth-child(2) { transform: rotate(6deg) translateY(18em); } .recursion__clock-tick:nth-child(3) { transform: rotate(12deg) translateY(18em); } .recursion__clock-tick:nth-child(4) { transform: rotate(18deg) translateY(18em); } .recursion__clock-tick:nth-child(5) { transform: rotate(24deg) translateY(18em); } .recursion__clock-tick:nth-child(6) { transform: rotate(30deg) translateY(18em); } .recursion__clock-tick:nth-child(7) { transform: rotate(36deg) translateY(18em); } .recursion__clock-tick:nth-child(8) { transform: rotate(42deg) translateY(18em); } .recursion__clock-tick:nth-child(9) { transform: rotate(48deg) translateY(18em); } .recursion__clock-tick:nth-child(10) { transform: rotate(54deg) translateY(18em); } .recursion__clock-tick:nth-child(11) { transform: rotate(60deg) translateY(18em); } .recursion__clock-tick:nth-child(12) { transform: rotate(66deg) translateY(18em); } .recursion__clock-tick:nth-child(13) { transform: rotate(72deg) translateY(18em); } .recursion__clock-tick:nth-child(14) { transform: rotate(78deg) translateY(18em); } .recursion__clock-tick:nth-child(15) { transform: rotate(84deg) translateY(18em); } .recursion__clock-tick:nth-child(16) { transform: rotate(90deg) translateY(18em); } .recursion__clock-tick:nth-child(17) { transform: rotate(96deg) translateY(18em); } .recursion__clock-tick:nth-child(18) { transform: rotate(102deg) translateY(18em); } .recursion__clock-tick:nth-child(19) { transform: rotate(108deg) translateY(18em); } .recursion__clock-tick:nth-child(20) { transform: rotate(114deg) translateY(18em); } .recursion__clock-tick:nth-child(21) { transform: rotate(120deg) translateY(18e.........完整代码请登录后点击上方下载按钮下载查看
网友评论0