css实现一个步骤条效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现一个步骤条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { box-sizing: border-box; } .container { max-width: 640px; margin: 2rem auto; display: flex; align-items: flex-start; justify-content: center; } .step { position: relative; display: flex; flex-direction: column; align-items: center; } .step:not(:last-of-type) { margin-right: 2rem; } .step:nth-child(odd) { flex-direction: column-reverse; margin-top: 0.4rem; } .step:nth-child(odd) .circ::before, .step:nth-child(odd) .circ::after { margin-top: 0; } .step:nth-child(odd) .half { transform: rotate(180deg); top: 0; } .circ { width: 6rem; height: 6rem; border-radius: 6rem; position: relative; } .circ::before, .circ::after { content: ""; width: 0.5rem; height: 0.5rem; position: absolute; background: black; border-radius: 0.5rem; top: 50%; margin-top: 1px; transform: translateY(-50%); } .circ::before { left: -2.2rem; } .circ::after { right: -2.2rem; } .half { position: absolute; top: 50%; left: 0; border: 2px solid black; width: 6rem; height: 3rem; border-radius: 0 0 3rem 3rem; border-top-width: 0; } .half::before, .half::after { content: ""; width: 2.2rem; height: 2px; background: black; display: block; position: absolute; top: 0%; } .half::befor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0