css+js实现简易秒表跑表计时效果代码
代码语言:html
所属分类:其他
代码描述:css+js实现简易秒表跑表计时效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; height: 100vh; background: #adaddf; font-family: sans-serif; } button { width: 140px; height: 46px; font-weight: bold; letter-spacing: 0.8px; text-transform: uppercase; border: 0; cursor: pointer; } button:nth-child(1) { background: #00d50f; color: #fff; } button:hover { opacity: 0.8; } button:nth-child(2) { background: #f0050f; color: #fff; } .cronometro { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; min-width: 200px; min-height: 200px; gap: 16px; } .board { display: flex; fkex-direction: row; gap: 24px; align-items: center; justify-content: center; height: 115px; position: relative; padding-right: 130px; } .relogio { background: #333; height: 100px; width: 100px; border-radius: 50%; position: relative; } .relogio::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; position: absolute; display: block; top: 50%; left: calc(50% + 1px); transform: translate(-50%, -50%); } .relogio::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #24242f; position: absolute; display: block; top: 50%; left: calc(50% + 1px); transform: translate(-50%, -50%); } .relogio .row { height: calc((100px / 2) - 5px); width: 3px; background: #fff; position: absolute; top: calc(50% - 22px); left: 50%; transform: translate(-50%, -50%); border-radius: 4px; } .time { color: #323232; position: absolute; right: 0; } </style> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0