svg+js实现玻璃圆环进度条效果代码
代码语言:html
所属分类:进度条
代码描述:svg+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"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&display=swap'> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),90%,10%); --fg: hsl(var(--hue),90%,90%); --primary: hsl(var(--hue),90%,50%); --trans-dur: 0.3s; --trans-timing: cubic-bezier(0.65,0,0.35,1); font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320)); } body, button { color: var(--fg); font: 1em/1.5 "DM Sans", sans-serif; } body { background-color: var(--bg); display: flex; height: 100vh; transition: background-color var(--trans-dur), color var(--trans-dur); } main { margin: auto; text-align: center; } svg { display: block; } .btn { background-color: transparent; cursor: pointer; outline: transparent; width: 3em; height: 3em; transition: opacity 0.15s linear; -webkit-tap-highlight-color: #0000; } .btn:focus-visible, .btn:hover { opacity: 0.5; } .btn__icon { width: 100%; height: auto; } .pl { --percent: 0; margin-bottom: 1.5em; overflow: visible; width: 16.875em; height: 16.875em; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .pl__ring, .pl__ring-glow1, .pl__ring-glow2 { stroke: var(--primary); transition: stroke var(--trans-dur); } .pl__ring { stroke-dashoffset: calc(659.74px * (1 - var(--percent))); } .pl__ring-glow1 { stroke-dashoffset: calc(502.66px * (1 - var(--percent))); } .pl__ring-glow2 { stroke-dashoffset: calc(816.82px * (1 - var(--percent))); } .pl[data-complete="false"] { animation: fade-slide-in 0.5s var(--trans-timing); } .pl[data-complete="false"] + .btn { visibility: hidden; } .pl[data-complete="true"] + .btn { animation: fade-in 0.6s; } /* Animations */ @keyframes fade-in { from { animation-timing-function: steps(1,end); opacity: 0; visibility: hidden; } 50% { animation-timing-function: var(--trans-timing); opacity: 0; visibility: visible; } to { opacity: 1; } } @keyframes fade-slide-in { from { opacity: 0; transform: translateY(20%); } to { opacity: 1; transform: translateY(0); } } </style> </head> <body translate="no"> <main> <svg class="pl" viewBox="0 0 270 270" width="270px" height="270px" role="img" aria-labelledby="pl-percent"> <defs> <radialGradient id="glass1" r="1"> <stop stop-color="hsla(0,0%,100%,0.05)" offset="0.4" /> <stop stop-color="hsla(0,0%,100%,0.35)" offset="1" /> </radialGradient> <linearGradient id="glass2" x1="0" y1="0" x2="0.75" y2="1"> <stop stop-color="hsla(0,0%,100%,0.3)" offset="0" /> <stop stop-color="hsla(0,0%,100%,0.08)" offset="1" /> </linearGradient> <linearGradient id="glass3" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="hsla(0,0%,100%,0.3)" offset="0" /> <stop stop-color="hsla(0,0%,100%,0)" offset="0.5" /> </linearGradient> <linearGradient id="glass4" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="hsla(0,0%,100%,0)" offset="0.6" /> <stop stop-color="hsla(0,0%,100%,0.3)" offset="1" /> </linearGradient> <radialGradient id="glass5" r="1"> <stop stop-color="hsla(0,0%,0%,0.2)" offset="0.45" /> <stop stop-color="hsla(0,0%,0%,0)" offset="0.55" /> </radialGradient> <linearGradient id="glass6" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="hsla(0,0%,100%,0.15)" offset="0" /> <stop stop-color="hsla(0,0%,100%,0)" offset="0.3" /> </linearGradient> <linearGradient id="glass7" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="hsla(0,0%,100%,0)" offset="0.7" /> <stop stop-color="hsla(0,0%,100%,0.1)" offset="1" /> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0