css按钮悬浮文字提示的竖形导航条效果代码
代码语言:html
所属分类:菜单导航
代码描述:css按钮悬浮文字提示的竖形导航条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"); *, *:after, *:before { box-sizing: border-box; } body { font-family: "Inter", sans-serif; line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 5vh; padding-bottom: 5vh; background-color: #f2f5f7; } ul { list-style: none; margin: 0; padding: 0; margin-left: auto; margin-right: auto; background-color: #05043e; display: flex; flex-direction: column; justify-content: space-between; padding: 0.75rem; border-radius: 10px; box-shadow: 0 10px 50px 0 rgba(5, 4, 62, 0.25); } li:nth-child(6) { margin-top: 5rem; padding-top: 1.25rem; border-top: 1px solid #363664; } li + li { margin-top: 0.75rem; } a { color: #FFF; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 8px; position: relative; } a:hover, a:focus, a.active { background-color: #30305a; outline: 0; } a:hover span, a:focus span, a.active span { transform: scale(1); opacity: 1; } a i { font-size: 1.375rem; } a span { position: absolute; background-color: #30305a; white-space: nowrap; padding: 0.5rem 1rem; border-radius: 6px; left: calc(100% + 1.5rem); transform-origin: center left; transform: scale(0); opacity: 0; transition: 0.15s ease; } a span:before { content: ""; display: block; width: 12px; height: 12px; position: absolute; background-color: #30305a; left: -5px; top: 50%; transform: translatey(-50%) rotate(45deg); border-radius: 3px; } details { position: fixed; right: 1rem; bottom: 1rem; margin-top: 2rem; color: #05043e; display: flex; flex-direction: column; } details div { background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); padding: 1.25rem; border-radius: 8px; position: absolute; max-height: calc(100vh - 100px); width: 400px; max-width: calc(100vw - 2rem); bottom: calc(100% + 1rem); right: 0; overflow: auto; transform-origin: 100% 100%; } details div::-webkit-scrollbar { width: 15px; background-color: #fff; } details div::-webkit-scrollbar-thumb { width: 5px; border-radius: 99em; background-color: #ccc; border: 5px solid #fff; } details div > * + * { margin-top: 0.75em; } details div.........完整代码请登录后点击上方下载按钮下载查看
网友评论0