css实现地铁风格分支交叉线路路径效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现地铁风格分支交叉线路路径效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #262A47; } .path { position: absolute; top: 50%; left: 50%; white-space: nowrap; transform: translate(-50%, -50%); } .path .section { position: relative; display: inline-block; background: #39c; width: 120px; height: 10px; margin-left: -10px; vertical-align: middle; } .path .section:before, .path .section:after { width: 20px; height: 20px; border-radius: 100%; position: absolute; top: 50%; margin-top: -10px; z-index: 1; background: #335; box-sizing: border-box; border: 3px solid #bce; } .path .section:before { content: ""; left: -10px; } .path .section:last-child:after { content: ""; right: -10px; } .path .section.forked { height: 80px; border: none; background: none; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0