css实现简洁手机底部导航条点击弹出子菜单环绕效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现简洁手机底部导航条点击弹出子菜单环绕效果代码
代码标签: 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/simple-line-icons.min.css"> <style> body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; padding: 0; margin: 0; background: white; background: linear-gradient(236deg, rgba(255, 255, 255, 0.8169642857) 0%, #deaed4 100%); } a { text-decoration: none; font-family: sans-serif; text-transform: lowercase; font-size: 1.5em; color: #222; } .menu { display: flex; justify-content: space-around; align-items: center; position: relative; width: 500px; height: 60px; padding: 0 15px 15px; border-radius: 10px 10px 30px 30px; background-color: #fff; box-shadow: 0px 6px 18px 0px #9f9f9f; margin: 10px; } .menu .nav-item { position: relative; } .menu .nav-item .tab-title { display: none; position: absolute; top: -40px; left: 50%; transform: translate(-50%, 0); font-size: 12px; background: #222; color: #fff; padding: 5px; border-radius: 5px; width: max-content; text-transform: capitalize; } .menu .nav-item .tab-title:before { content: ""; position: absolute; border-color: #222 transparent transparent transparent; border-style: solid; border-width: 6px; width: 0px; height: 0px; bottom: -12px; left: 50%; transform: translate(-50%, 0); } .menu .nav-item:hover .tab-title { display: block; } .menu .checkbox { background-color: #fff; cursor: pointer; width: 0; height: 0; position: relative; z-index: 1; } .menu .checkbox:before { content: ""; width: 80px; aspect-ratio: 1; transform: translate(-50%, -50%); top: -30px; left: 0; position: absolute; border-radius: 100%; background-color: #ea4c89; transition: all 0.2s linear; border: 4px solid #fff; } .menu .checkbox:after { content: "+"; position: absolute; font-size: 4em; color: #fff; top: -30px; left: 0; transform: translate(-50%, -50%); transition: all 0.1s linear; } .menu .checkbox:checked + * { top: -100px; transform: rotate(0deg); } .menu .checkbox:checked + * .nav-item { border-radius: 100%; display: flex; align-items: center; justify-content: center; width: 60px; aspect-ratio: 1; position: absolute; left: 0; transform: translate(-50%, -15p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0