css悬浮下划线菜单动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:css悬浮下划线菜单动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Oswald&display=swap"); :root { --color-bg: #f1e0c5; --color-text: #342a21; --color-underline: #da667b; } body { font-family: "Oswald", sans-serif; background-color: var(--color-bg); } header { display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { font-size: 3rem; color: var(--color-text); } .menu__list { --underline-width: 0; --underline-offset-x: 0; position: relative; display: inline-flex; margin: 0; padding: 0; list-style: none; } .menu__list::before { content: ""; display: block; position: absolute; top: 100%; height: 4px; width: var(--underline-width); transform: translateX(var(--underline-offset-x)); background-color: var(--color-underline); transition: transform 0.5s, width 0.5s; border-radius: 4px; } .menu__link { display: block; padding: 0.5rem 1rem; font-size: 2rem; color: var(--color-text); text-decoration: none; } </style> </head> <body > <header> <h1>Sliding <u&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0