js实现倒计时圈圈电子时钟效果代码
代码语言:html
所属分类:其他
代码描述:使用js和css布局实现将秒变成倒计时圈圈进度效果的电子时钟。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @font-face { font-family:ds-digi; src:url(DS-DIGI.TTF) } :root { --clockSize:30rem; --bgColor:#111; --mainColor:#37f; --loadingSize:0; --dashArray:876 } * { margin:0; padding:0; box-sizing:border-box } html { font-size:62.5% } body { background:var(--bgColor); font-family:ds-digi,sans-serif } .container { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; min-height:100vh } .box { margin:0; padding:0; position:relative; margin-top:10rem } .clock-container { background:0 0; margin:0; padding:0; width:var(--clockSize); height:var(--clockSize); display:flex; align-items:center; justify-content:center } .clock-shape { fill:transparent; stroke-width:calc(var(--clockSize) * 0.05); stroke:rgba(255,255,255,.1); stroke-dasharray:var(--dashArray); stroke-dashoffset:0; stroke-linecap:round; transition:1s } .main-circle { stroke:var(--mainColor); stroke-dashoffset:calc(var(--dashArray) - (var(--dashArray) * (var(--loadingSize)/60))) } .content { color:var(--mainColor); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:5.5rem } .sec { animation:secAnimation 1s infinite } @keyframes secAnimation { from { opacity:0 } to { opacity:1 } }footer { color:#fff; margin-top:20rem; font-size:2rem } .link { color:var(--mainColor); text-decoration:none } @media(max-width:300px) { html { font-size:40.5% } :root { --dashArray:565 } } </style> </head> <body onload="resizeClock()"> <main class="container"> <div class="box"> <svg class="clock-container"> <circle class="clock-shape".........完整代码请登录后点击上方下载按钮下载查看
网友评论0