css+js实现放大镜式滑动导航条点击切换效果代码
代码语言：html
所属分类：菜单导航
代码描述：css+js实现放大镜式滑动导航条点击切换效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
--primary: hsl(var(--hue),90%,55%);
--red: hsl(3,90%,55%);
--orange: hsl(33,90%,55%);
--purple: hsl(283,90%,55%);
--trans-dur: 0.3s;
--trans-dur2: 0.6s;
font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
a,
body {
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
body {
background-color: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
}
.nav {
--pos1: 3%;
--pos2: 0%;
--pos3: 0%;
--pos4: 0%;
background-color: hsl(0,0%,95%);
border-radius: 2em;
box-shadow:
0.75em 0.75em 3em hsla(0,0%,0%,0.15) inset,
0 0.05em 0 hsla(0,0%,0%,0.05) inset,
0 -0.15em 0 hsla(0,0%,0%,0.1) inset,
0.75em 0.75em 1em hsla(0,0%,0%,0.1);
display: flex;
padding: 0 1.5em;
position: relative;
width: calc(100% - 1.5em);
max-width: 24.375em;
height: 5.25em;
transition:
background-color var(--trans-dur),
box-shadow var(--trans-dur);
}
.nav__fake-icons,
.nav__glass {
pointer-events: none;
}
.nav__fake-icon,
.nav__item-icon {
display: block;
width: 1.5em;
height: 1.5em;
}
.nav__fake-icons {
background-color: hsl(0,0%,95%);
box-shadow: 0.75em 0.75em 3em hsla(0,0%,0%,0.15) inset;
clip-path: circle(2em at 2em 50%);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1.5em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition:
background-color var(--trans-dur),
clip-path var(--trans-dur2) ease-in-out;
}
.nav__fake-icon-box {
margin: 0.5em;
transform: scale(1.5);
}
.nav__fake-icon {
color: hsl(0,0%,60%);
transform: translateX(50%);
transition:
color var(--trans-dur),
transform var(--trans-dur2) ease-in-out;
}
.nav__glass,
.nav__glass:before,
.nav__glass:after {
border-radius: 50%;
position: absolute;
}
.nav__glass {
background-color: hsla(0,0%,100%,0.05);
box-shadow:
0 0 0 0.1em hsla(0,0%,0%,0.1) inset,
0 0 0 0.15em hsla(0,0%,100%,0.1) inset;
overflow: hidden;
top: 0.625em;
left: 0;
width: 4em;
height: 4em;
transition: left var(--trans-dur2) ease-in-out;
}
.nav__glass:before,
.nav__glass:after {
content: "";
display: block;
}
.nav__glass:before {
box-shadow: 0 0 0 0.1em hsla(0,0%,0%,0.2) inset;
top: 0.25em;
left: 0.25em;
width: 3.5em;
height: 3.5em;
}
.nav__glass:after {
border: 0.2em solid transparent;
border-right: 0.2em solid hsla(0,0%,100%,0.4);
border-left: 0.2em solid hsla(0,0%,50%,0.4);
top: 0.5em;
left: 0.5em;
width: 2.7em;
height: 2.7em;
transform: rotate(-45deg);
}
.nav__items {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
width: 100%;
}
.nav__item-link {
color: hsl(0,0%,60%);
display: block;
padding: 0.5em;
text-decoration: none;
}
.nav__item-link:focus {
outline: transparent;
}
.nav__item-link:focus,
.nav__item-link:hover,
.nav--on-page1 .nav__item-link--primary {
color: var(--primary);
}
.nav__item-link--red:focus,
.nav__item-link--red:hover,
.nav--on-page2 .nav__item-link--red {
color: var(--red);
}
.nav__item-link--orange:focus,
.nav__item-link--orange:hover,
.nav--on-page3 .nav__item-link--orange {
color: var(--orange);
}
.nav__item-link--purple:focus,
.nav__item-link--purple:hover,
.nav--on-page4 .nav__item-link--purple {
color: var(--purple);
}
.nav__item-sr {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
.nav--on-page1 .nav__fake-icons {
clip-path: circle(2em at calc(2em + var(--pos1)) 50%);
}
.nav--on-page1 .nav__fake-icon--primary {
color: var(--primary);
transform: translateX(0);
}
.nav--on-page1 .nav__glass {
left: var(--pos1);
}
.nav--on-page2 .nav__fake-icons {
clip-path: circle(2em at calc(2em + var(--pos2)) 50%);
}
.nav--on-page2 .nav__fake-icon--red {
color: var(--red);
transform: translateX(0);
}
.nav--on-page2 .nav__glass {
left: var(--pos2);
}
.nav--on-page3 .nav__fake-icons {
clip-path: circle(2em at calc(2em + var(--pos3)) 50%);
}
.nav--on-page3 .nav__fake-icon--orange {
color: var(--orange);
transform: translateX(0);
}
.nav--on-page3 .nav__glass {
left: var(--pos3);
}
.nav--on-page4 .nav__fake-icons {
clip-path: circle(2em at calc(2em + var(--pos4)) 50%);
}
.nav--on-page4 .nav__fake-icon--purple {
color: var(--purple);
transform: translateX(0);
}
.nav--on-page4 .nav__glass {
left: var(--pos4);
}
.nav--on-page2 .nav__fake-icon--primary,
.nav--on-page3 .nav__fake-icon--primary,
.nav--on-page4 .nav__fake-icon--primary,
.nav--on-page3 .nav__fake-icon--red,
.nav--on-page4 .nav__fake-icon--red,
.nav--on-page4 .nav__fake-icon--orange {
transform: translateX(-50%);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,10%);
--fg: hsl(var(--hue),10%,90%);
}
.nav,
.nav__fake-icons {
background-color: hsl(0,0%,25%);
}
.nav {
box-shadow:
0.75em 0.75em 3em hsla(0,0%,0%,0.3) inset,
0 0.05em 0 hsla(0,0%,0%,0.1) inset,
0 -0.15em 0 hsla(0,0%,0%,0.2) inset,
0.75em 0.75em 1em hsla(0,0%,0%,0.2);
}
.nav__fake-icons {
box-shadow: 0.75em 0.75em 3em hsla(0,0%,0%,0.3) inset;
}
}
</style>
</head>
<body >
<svg display="none">
<symbol i.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0