js+css实现垂直图标导航栏悬浮滑动动画效果代码
代码语言:html
所属分类:菜单导航
代码描述:js+css实现垂直图标导航栏悬浮滑动动画效果代码
代码标签: js 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/all.6.4.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:300;400;500;600;700;800;900&display=swap"); * { font-family: "Poppins", sans-serif; margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f53b57; transition: 0.5s; } .nav { position: relative; width: 70px; height: 350px; background: #fff; border-radius: 35px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); } .nav ul { position: absolute; top: 0; left: 0; width: 100%; display: flex; flex-direction: column; } .nav ul li { position: relative; list-style: none; width: 70px; height: 70px; z-index: 1; } .nav ul li a { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; color: #333; font-weight: 500; } .nav ul li a .icon { position: relative; display: block; line-height: 75px; text-align: center; transition: 0.5s; } .nav ul li a .icon i { font-size: 24px; } .nav ul li a .title { position: absolute; top: 50%; left: 110px; background: #fff; transform: translateY(-50%); padding: 5px 10px; border-radius: 6px; transition: 0.5s; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; } .nav ul li a .title::before { content: ""; position: absolute; width: 12px; height: 12px; background: #fff; left: -8px; top: 46%; transform: rotate(45deg) translateY(-50%); border-radius: 2px; } .nav ul li:hover a .title { opacity: 1; visibility: visible; transform: translateX(-25px) translateY(-50%); } .nav ul li.active a .icon { color: #fff; } .nav ul li.active02 a .icon { outline: 3px solid green; } .nav ul li:nth-child(1).active ~ .indicator { transform: translateY(calc(70px * 0)); } .nav ul li:nth-child(1).active ~ .indicator::before { background: #f53b57; } .nav ul li:nth-child(2).active ~ .indicator { transform: translateY(calc(70px * 1)); } .nav ul li:nth-child(2).active ~ .indicator::before { background: #3c40c6; } .nav ul li:nth-child(3).active ~ .indicator { transform: translateY(calc(70px * 2)); } .nav ul li:nth-child(3).active ~ .indicator::before { background: #05c46b; } .nav ul li:nth-child(4).active ~ .indicator { transform: translateY(calc(70px * 3)); } .nav ul li:nth-child(4).active ~ .indicator::before { background: #0fbcf9; } .nav ul li:nth-child(5).active ~ .indicator { transform: translateY(calc(70px * 4)); } .nav ul li:nth-child(5).active ~ .indicator::before { background: #ffa801; } .nav ul .indicator { position: absolute; left: 0; width: 70px; height: 70px; transition: 0.5s; } .nav ul .indicator::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: #333; border-radius: 50%; transition: 0.5s; } </style> </head> <body> <!-- p.........完整代码请登录后点击上方下载按钮下载查看
网友评论0