div+css实现立体面板进度条动画效果代码
代码语言:html
所属分类:进度条
代码描述:div+css实现立体面板进度条动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .container { width: 100%; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 80px 100px; overflow: hidden; background: #cfd1e1; } .box { position: relative; width: 240px; height: 250px; display: flex; justify-content: center; align-items: center; } .box::before { content: ''; position: absolute; top: 0; left: 0; width: 20px; height: 100%; background: linear-gradient(#fff, #fff, #e3e3e3); filter: blur(1px); z-index: 1; } .box::after { content: ''; position: absolute; top: 1px; right: -1px; width: 20px; height: 100%; background: #9d9d9d; filter: blur(1px); z-index: 1; } .box .shadow { position: absolute; width: 100%; height: 100%; background: #eee; } .box .shadow::before { content: ''; position: absolute; top: 0; left: calc(100% + 5px); width: 100%; height: 200%; background: linear-gradient(rgba(0,0,0,0.075), transparent); transform: skewX(45deg); } .box .shadow::after { content: ''; position: absolute; bottom: -200%; left: calc(100% + 15px); width: 100%; height: 200%; background: linear-gradient(rgba(0,0,0,0.075), transparent); transform: skewX(45deg); } .box .content { position: relative; width: 100%; height: 100%; background: linear-gradient(#dbdae1, #a3aaba); box-shadow: 5px 5px 5px rgba(0,0,0,0.1), 15px 15px 15px rgba(0,0,0,0.1), 20px 20px 20px rgba(0,0,0,0.1), 50px 50px 50px rgba(0,0,0,0.1), inset 3px 3px 2px #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; } .box .content .percent { position: relative; width: 150px; height: 150px; } .box .content .percent::before { content: attr(data-text); position: absolute; inset: 20px; background: #555; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1.75rem; letter-spacing: 0.1rem; text-transform: uppercase; } .box .content .percent svg { position: relative; width: 150px; height: 150px; transform: rotate(270deg); } .box .content .percent svg circle { width: 100%; height: 100%; fill: transparent; stroke-width: 3; stroke: rgba(0,0,0,0.05); transform: translate(5px, 5px); } .box .content .percent svg circle:nth-child(2) { stroke: #555; stroke-dasharray: 440; stroke-dashoffset: calc(440 - (440 * var(--num)) / 100); opacity: 0; animation: fadeIn 1s linear forwards; animation-delay: 2.5s; } @keyframes fadeI.........完整代码请登录后点击上方下载按钮下载查看
网友评论0