css+js实现数字中性时钟显示当前时分秒走动效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现数字中性时钟显示当前时分秒走动效果代码
代码标签: 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 { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320)); } body { background-color: var(--bg); color: var(--fg); display: flex; font: 1em/1.5 sans-serif; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } .clock { --shadow1: hsl(var(--hue),10%,60%); --shadow2: hsl(0,0%,100%); display: flex; align-items: center; margin: auto; } .clock__colon { margin-left: 0.5em; position: relative; width: 0.75em; height: 2.25em; } .clock__colon:before, .clock__colon:after, .clock__digit-stroke { box-shadow: 0.1em 0.1em 0.2em var(--shadow1), -0.1em -0.1em 0.2em var(--shadow2), -0.05em -0.05em 0.1em var(--shadow1) inset, 0.05em 0.05em 0.1em var(--shadow2) inset; position: absolute; transition: box-shadow var(--trans-dur); } .clock__colon:before, .clock__colon:after { border-radius: 50%; content: ""; display: block; top: 0.125em; left: 0.125em; width: 0.5em; height: 0.5em; } .clock__colon:after { top: auto; bottom: 0.12.........完整代码请登录后点击上方下载按钮下载查看
网友评论0