css实现创意圆环tick时钟效果代码
代码语言:html
所属分类:其他
代码描述:css实现创意圆环tick时钟效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Secular+One&display=swap'> <style> @import url("https://fonts.googleapis.com/css2?family=League+Gothic&display=swap"); html, body { height: 100%; overflow: hidden; } body { display: flex; justify-content: center; align-items: center; margin: 0; font-family: "League Gothic", sans-serif; background-color: #000000; } .clock { --clock-size: 400px; --hand-color: #535353; height: var(--clock-size); width: var(--clock-size); margin: auto; position: relative; } .clock .indicator { height: calc(var(--clock-size) * 0.5); position: absolute; width: 0; left: 0; right: 0; margin: auto; transform-origin: bottom; } .clock .indicator::before { position: absolute; left: 50%; transform: translateX(-50%); margin: auto; top: -10%; font-size: 1.5rem; color: var(--hand-color); transition: all ease 0.25s; } .clock .indicator.active::before { color: #ffd60a; text-shadow: 0px 0px #ffd60a; } .clock .indicator:nth-child(0) { transform: rotate(0deg); } .clock .indicator:nth-child(0)::before { content: "TICK"; } .clock .indicator:nth-child(1) { transform: rotate(6deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(1)::before { content: "TOCK"; } .clock .indicator:nth-child(2) { transform: rotate(12deg); } .clock .indicator:nth-child(2)::before { content: "TICK"; } .clock .indicator:nth-child(3) { transform: rotate(18deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(3)::before { content: "TOCK"; } .clock .indicator:nth-child(4) { transform: rotate(24deg); } .clock .indicator:nth-child(4)::before { content: "TICK"; } .clock .indicator:nth-child(5) { transform: rotate(30deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(5)::before { content: "TOCK"; } .clock .indicator:nth-child(6) { transform: rotate(36deg); } .clock .indicator:nth-child(6)::before { content: "TICK"; } .clock .indicator:nth-child(7) { transform: rotate(42deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(7)::before { content: "TOCK"; } .clock .indicator:nth-child(8) { transform: rotate(48deg); } .clock .indicator:nth-child(8)::before { content: "TICK"; } .clock .indicator:nth-child(9) { transform: rotate(54deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(9)::before { content: "TOCK"; } .clock .indicator:nth-child(10) { transform: rotate(60deg); } .clock .indicator:nth-child(10)::before { content: "TICK"; } .clock .indicator:nth-child(11) { transform: rotate(66deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(11)::before { content: "TOCK"; } .clock .indicator:nth-child(12) { transform: rotate(72deg); } .clock .indicator:nth-child(12)::before { content: "TICK"; } .clock .indicator:nth-child(13) { transform: rotate(78deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(13)::before { content: "TOCK"; } .clock .indicator:nth-child(14) { transform: rotate(84deg); } .clock .indicator:nth-child(14)::before { content: "TICK"; } .clock .indicator:nth-child(15) { transform: rotate(90deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(15)::before { content: "TOCK"; } .clock .indicator:nth-child(16) { transform: rotate(96deg); } .clock .indicator:nth-child(16)::before { content: "TICK"; } .clock .indicator:nth-child(17) { transform: rotate(102deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(17)::before { content: "TOCK"; } .clock .indicator:nth-child(18) { transform: rotate(108deg); } .clock .indicator:nth-child(18)::before { content: "TICK"; } .clock .indicator:nth-child(19) { transform: rotate(114deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(19)::before { content: "TOCK"; } .clock .indicator:nth-child(20) { transform: rotate(120deg); } .clock .indicator:nth-child(20)::before { content: "TICK"; } .clock .indicator:nth-child(21) { transform: rotate(126deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(21)::before { content: "TOCK"; } .clock .indicator:nth-child(22) { transform: rotate(132deg); } .clock .indicator:nth-child(22)::before { content: "TICK"; } .clock .indicator:nth-child(23) { transform: rotate(138deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(23)::before { content: "TOCK"; } .clock .indicator:nth-child(24) { transform: rotate(144deg); } .clock .indicator:nth-child(24)::before { content: "TICK"; } .clock .indicator:nth-child(25) { transform: rotate(150deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(25)::before { content: "TOCK"; } .clock .indicator:nth-child(26) { transform: rotate(156deg); } .clock .indicator:nth-child(26)::before { content: "TICK"; } .clock .indicator:nth-child(27) { transform: rotate(162deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(27)::before { content: "TOCK"; } .clock .indicator:nth-child(28) { transform: rotate(168deg); } .clock .indicator:nth-child(28)::before { content: "TICK"; } .clock .indicator:nth-child(29) { transform: rotate(174deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(29)::before { content: "TOCK"; } .clock .indicator:nth-child(30) { transform: rotate(180deg); } .clock .indicator:nth-child(30)::before { content: "TICK"; } .clock .indicator:nth-child(31) { transform: rotate(186deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(31)::before { content: "TOCK"; } .clock .indicator:nth-child(32) { transform: rotate(192deg); } .clock .indicator:nth-child(32)::before { content: "TICK"; } .clock .indicator:nth-child(33) { transform: rotate(198deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(33)::before { content: "TOCK"; } .clock .indicator:nth-child(34) { transform: rotate(204deg); } .clock .indicator:nth-child(34)::before { content: "TICK"; } .clock .indicator:nth-child(35) { transform: rotate(210deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(35)::before { content: "TOCK"; } .clock .indicator:nth-child(36) { transform: rotate(216deg); } .clock .indicator:nth-child(36)::before { content: "TICK"; } .clock .indicator:nth-child(37) { transform: rotate(222deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size) * 0.06); } .clock .indicator:nth-child(37)::before { content: "TOCK"; } .clock .indicator:nth-child(38) { transform: rotate(228deg); } .clock .indicator:nth-child(38)::before { content: "TICK"; } .clock .indicator:nth-child(39) { transform: rotate(234deg); height: calc(var(--clock-size) * 0.44); top: calc(var(--clock-size.........完整代码请登录后点击上方下载按钮下载查看
网友评论0