css实现多彩下划线滚动式菜单栏效果代码
代码语言:html
所属分类:菜单导航
代码描述:css实现多彩下划线滚动式菜单栏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=DM+Sans:500,700&display=swap"); * { box-sizing:border-box; } body { text-align:center; display:flex; height:100vh; width:100%; justify-content:center; align-items:center; padding:0 20px; background-image:url("https://www.toptal.com/designers/subtlepatterns/patterns/debut_light.png"); } .nav { display:inline-flex; position:relative; overflow:hidden; max-width:100%; background-color:#fff; padding:0 20px; border-radius:40px; box-shadow:0 10px 40px rgba(159,162,177,0.8); } .nav-item { color:#83818c; padding:20px; text-decoration:none; transition:.3s; margin:0 6px; z-index:1; font-family:'DM Sans',sans-serif; font-weight:500; position:relative; } .nav-item:before { content:""; position:absolute; bottom:-6px; left:0; width:100%; height:5px; background-color:#dfe2ea; border-radius:8px 8px 0 0; opacity:0; transition:.3s; } .nav-item:not(.is-active):hover:before { opacity:1; bottom:0; } .nav-item:not(.is-active):hover { color:#333; } .nav-indicator { position:absolute; left:0; bottom:0; height:4px; transition:.4s; height:5px; z-index:1; border-radius:8px 8px 0 0; } @media (max-width:580.........完整代码请登录后点击上方下载按钮下载查看
网友评论0