css+js实现进度条式菜单栏悬浮点击效果代码
代码语言:html
所属分类:菜单导航
代码描述:css+js实现进度条式菜单栏悬浮点击效果代码,有点类似站点,悬浮进度条填充过来,点击一下圆点就切换过来了。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --body--background: #f3f3f3; --rail--inactive-color: #d0d0d0; --tracker-dot--color: #F44336; --tracker-dot--size: 10px; } body { background-color: #f3f3f3; color: #000; font-family: "Johnston100 W03 Regular"; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .nav { position: relative; } .nav-rail { --index: 1; --position: calc((var(--index) * 10rem) - 5rem - ((var(--tracker-dot--size) / 2) + 2px)); position: absolute; height: 6px; background: var(--rail--inactive-color); width: 100%; } .nav-rail:before { content: ""; position: absolute; left: 0; background: black; height: 100%; width: var(--position); transition: width 0.5s ease-in-out; } .nav-rail:after { content: ""; position: absolute; right: 0; height: 100%; left: var(--position); transition: left 0.5s ease-in-out; } .nav-rail span { position: absolute; width: var(--tracker-dot--size); height: var(--tracker-dot--size); background: var(--tracker-dot--color); border: 2px solid var(--body--background); box-shadow: 0 0 0 3px var(--body--background); animation: pulse 1s infinite linear; top: 50%; transform: translateY(-50%); border-radius: 2rem; transition: left 0.5s ease-in-out; left: var(--position); z-index: 10; } .nav-items { display: flex; align-items: center; } .nav-item { text-decoration: none; position: relative; width: 10rem; height: 6px; color: #000; } .nav-item:before { background: var(--rail--inactive-color); content: ""; width: 6px; height: 16px; background: var(--rail--inactive-color); position: absolute; bottom: 0; left: 50%; transform: translat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0