css实现中性圆形步骤条效果代码
代码语言:html
所属分类:其他
代码描述:css实现中性圆形步骤条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;500;700&display=swap"); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { --color: rgba(30, 30, 30); --bgColor: rgba(245, 245, 245); min-height: 100vh; display: grid; align-content: center; gap: 2rem; padding: 2rem; font-family: "Exo 2", sans-serif; color: var(--color); background: var(--bgColor); } h1 { text-align: center; } ol { width: min(60rem, 90%); margin-inline: auto; display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; list-style: none; counter-reset: stepnr; } li:nth-child(6n + 1) { --accent-color: #b8df4e; } li:nth-child(6n + 2) { --accent-color: #4cbccb; } li:nth-child(6n + 3) { --accent-color: #7197d3; } li:nth-child(6n + 4) { --accent-color: #ae78cb; } li:nth-child(6n + 5) { --accent-color: #7dc7a4; } li:nth-child(6n + 6) { --accent-color: #f078c2; } ol li { /* outline: 1px solid hotpink; */ counter-increment: stepnr; --borderS: 2rem; width: 18rem; aspect-ratio: 1; border-radius: 50%; border: var(--borderS) solid var(--bgColor); display: flex; flex-direction: column; justify-content: center; grid-template-rows: min-content min-content auto; position: relative; padding-left: 2.5rem; } ol li::before, ol li::after { position: absolute; border-radius: inherit; border: inherit; width: calc(100% + var(--borderS) * 2); height: calc(100% + var(--borderS) * 2); left: calc(var(--borderS) * -1); top: calc(var(--borderS) * -1); line-height: 1.1; } ol li::before { content: counter(stepnr); color: var(--accent-color); padding-left: 10rem; font-size: 12rem; font-weight: 700; overflow: hidden; } ol li::after { content: ""; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0