css实现马路旅行菜单切换效果代码
代码语言：html
所属分类：菜单导航
代码描述：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.min.css">
<link href="https://fonts.googleapis.com/css2?family=Original+Surfer&display=swap" rel="stylesheet">
<style>
:root {
"rgb(199,117,166)","rgb(245,51,100)"
/*green-ish*/
--base: rgb(68, 143, 48);
/*teal-ish*/
--base2: rgb(36, 108, 96);
/*orange-ish*/
--base3: rgb(170, 102, 57);
/*red-ish*/
--base4: rgb(163, 54, 67);
--r: 73;
--g: 243;
--b: 218;
--r2: 60;
--g2: 39;
--b2: 119;
--r3: 170;
--g3: 102;
--b3: 57;
--r4: 163;
--g4: 54;
--b4: 67;
--col1-00: rgb(calc(var(--r) - 100), 0, 0);
--col1-0: rgb(calc(var(--r) - 50), calc(var(--g) - 50), calc(var(--b) - 50));
--col1-1: rgb(calc(var(--r) - 40), calc(var(--g) - 40), calc(var(--b) - 40));
--col1-2: rgb(calc(var(--r) - 30), calc(var(--g) - 30), calc(var(--b) - 30));
--col1-3: rgb(calc(var(--r) - 20), calc(var(--g) - 20), calc(var(--b) - 20));
--col1-4: rgb(calc(var(--r) - 10), calc(var(--g) - 10), calc(var(--b) - 10));
--col1-5: rgb(var(--r), var(--g), var(--b));
--col1-6: rgb(calc(var(--r) + 10), calc(var(--g) + 10), calc(var(--b) + 10));
--col1-7: rgb(calc(var(--r) + 20), calc(var(--g) + 20), calc(var(--b) + 20));
--col1-8: rgb(calc(var(--r) + 30), calc(var(--g) + 30), calc(var(--b) + 30));
--col1-9: rgb(calc(var(--r) + 40), calc(var(--g) + 40), calc(var(--b) + 40));
--col1-10: rgb(calc(var(--r) + 50), calc(var(--g) + 50), calc(var(--b) + 50));
--col1-11: rgb(calc(var(--r) + 60), calc(var(--g) + 60), calc(var(--b) + 60));
--col1-12: rgb(calc(var(--r) + 70), calc(var(--g) + 70), calc(var(--b) + 70));
--col1-13: rgb(calc(var(--r) + 80), calc(var(--g) + 80), calc(var(--b) + 80));
--col2-00: rgb(calc(var(--r2) - 100), 0, 0);
--col2-0: rgb(
calc(var(--r2) - 50),
calc(var(--g2) - 50),
calc(var(--b2) - 50)
);
--col2-1: rgb(
calc(var(--r2) - 40),
calc(var(--g2) - 40),
calc(var(--b2) - 40)
);
--col2-2: rgb(
calc(var(--r2) - 30),
calc(var(--g2) - 30),
calc(var(--b2) - 30)
);
--col2-3: rgb(
calc(var(--r2) - 20),
calc(var(--g2) - 20),
calc(var(--b2) - 20)
);
--col2-4: rgb(
calc(var(--r2) - 10),
calc(var(--g2) - 10),
calc(var(--b2) - 10)
);
--col2-5: rgb(var(--r2), var(--g2), var(--b2));
--col2-6: rgb(
calc(var(--r2) + 10),
calc(var(--g2) + 10),
calc(var(--b2) + 10)
);
--col2-7: rgb(
calc(var(--r2) + 20),
calc(var(--g2) + 20),
calc(var(--b2) + 20)
);
--col2-8: rgb(
calc(var(--r2) + 30),
calc(var(--g2) + 30),
calc(var(--b2) + 30)
);
--col2-9: rgb(
calc(var(--r2) + 40),
calc(var(--g2) + 40),
calc(var(--b2) + 40)
);
--col2-10: rgb(
calc(var(--r2) + 50),
calc(var(--g2) + 50),
calc(var(--b2) + 50)
);
--col2-11: rgb(
calc(var(--r2) + 60),
calc(var(--g2) + 60),
calc(var(--b2) + 60)
);
--col2-12: rgb(
calc(var(--r2) + 70),
calc(var(--g2) + 70),
calc(var(--b2) + 70)
);
--col2-13: rgb(
calc(var(--r2) + 80),
calc(var(--g2) + 80),
calc(var(--b2) + 80)
);
--col3-00: rgb(calc(var(--r3) - 100), 0, 0);
--col3-0: rgb(
calc(var(--r3) - 50),
calc(var(--g3) - 50),
calc(var(--b3) - 50)
);
--col3-1: rgb(
calc(var(--r3) - 40),
calc(var(--g3) - 40),
calc(var(--b3) - 40)
);
--col3-2: rgb(
calc(var(--r3) - 30),
calc(var(--g3) - 30),
calc(var(--b3) - 30)
);
--col3-3: rgb(
calc(var(--r3) - 20),
calc(var(--g3) - 20),
calc(var(--b3) - 20)
);
--col3-4: rgb(
calc(var(--r3) - 10),
calc(var(--g3) - 10),
calc(var(--b3) - 10)
);
--col3-5: rgb(var(--r3), var(--g3), var(--b3));
--col3-6: rgb(
calc(var(--r3) + 10),
calc(var(--g3) + 10),
calc(var(--b3) + 10)
);
--col3-7: rgb(
calc(var(--r3) + 20),
calc(var(--g3) + 20),
calc(var(--b3) + 20)
);
--col3-8: rgb(
calc(var(--r3) + 30),
calc(var(--g3) + 30),
calc(var(--b3) + 30)
);
--col3-9: rgb(
calc(var(--r3) + 40),
calc(var(--g3) + 40),
calc(var(--b3) + 40)
);
--col3-10: rgb(
calc(var(--r3) + 50),
calc(var(--g3) + 50),
calc(var(--b3) + 50)
);
--col3-11: rgb(
calc(var(--r3) + 60),
calc(var(--g3) + 60),
calc(var(--b3) + 60)
);
--col3-12: rgb(
calc(var(--r3) + 70),
calc(var(--g3) + 70),
calc(var(--b3) + 70)
);
--col3-13: rgb(
calc(var(--r3) + 80),
calc(var(--g3) + 80),
calc(var(--b3) + 80)
);
--col4-00: rgb(calc(var(--r4) - 100), 0, 0);
--col4-0: rgb(
calc(var(--r4) - 50),
calc(var(--g4) - 50),
calc(var(--b4) - 50)
);
--col4-1: rgb(
calc(var(--r4) - 40),
calc(var(--g4) - 40),
calc(var(--b4) - 40)
);
--col4-2: rgb(
calc(var(--r4) - 30),
calc(var(--g4) - 30),
calc(var(--b4) - 30)
);
--col4-3: rgb(
calc(var(--r4) - 20),
calc(var(--g4) - 20),
calc(var(--b4) - 20)
);
--col4-4: rgb(
calc(var(--r4) - 10),
calc(var(--g4) - 10),
calc(var(--b4) - 10)
);
--col4-5: rgb(var(--r4), var(--g4), var(--b4));
--col4-6: rgb(
calc(var(--r4) + 10),
calc(var(--g4) + 10),
calc(var(--b4) + 10)
);
--col4-7: rgb(
calc(var(--r4) + 20),
calc(var(--g4) + 20),
calc(var(--b4) + 20)
);
--col4-8: rgb(
calc(var(--r4) + 30),
calc(var(--g4) + 30),
calc(var(--b4) + 30)
);
--col4-9: rgb(
calc(var(--r4) + 40),
calc(var(--g4) + 40),
calc(var(--b4) + 40)
);
--col4-10: rgb(
calc(var(--r4) + 50),
calc(var(--g4) + 50),
calc(var(--b4) + 50)
);
--col4-11: rgb(
calc(var(--r4) + 60),
calc(var(--g4) + 60),
calc(var(--b4) + 60)
);
--col4-12: rgb(
calc(var(--r4) + 70),
calc(var(--g4) + 70),
calc(var(--b4) + 70)
);
--col4-13: rgb(
calc(var(--r4) + 80),
calc(var(--g4) + 80),
calc(var(--b4) + 80)
);
--col4-14: rgba(
calc(var(--r4) + 80),
calc(var(--g4) + 80),
calc(var(--b4) + 80),
0.5
);
--clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0%25' style='stop-color:%23fff;stop-opacity:0' /%3E%3Cstop offset='70%25' style='stop-color:%23fff;stop-opacity:0.8' /%3E%3Cstop offset='100%25' style='stop-color:%23fff;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cfilter id='filter269'%3E%3CfeTurbulence baseFrequency='0.0025' numOctaves='10' seed='14' /%3E%3CfeColorMatrix values='4.2 -4.6 3.1 -1.4 4.8 -0.8 -0.8 -1.9 2.7 4.4 0.8 -3.6 4.1 1.9 4.3 -3.4 0.1 1.7 3.5 -2.1' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='rgb(124, 201, 249)' id='bgRect' /%3E%3Crect width='100%25' height='100%25' filter='url(%23filter269)' /%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)' /%3E%3C/svg%3E")
center center no-repeat;
--grass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cfilter id='filter175'%3E%3CfeTurbulence baseFrequency='0.07911' numOctaves='9' seed='175' /%3E%3CfeColorMatrix values=' 2.6 3.8 -4.7 -0.5 -4.8 -2.5 -2.9 0.8 2.3 3.7 0.4 -0.3 -2.7 4.8 -1.1 -2.5 4.5 1.5 -4.4 0.2 ' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='rgb(138,249,96)' id='bgRect' /%3E%3Crect width='100%25' height='100%25' filter='url(%23filter175)' /%3E%3C/svg%3E")
center center no-repeat;
}
body {
margin: 0 auto;
overflow: hidden;
font-family: 'Original Surfer', cursive;
}
svg {
height: 100%;
}
h1 {
text-align: center;
}
button {
cursor: pointer;
font-weight: bold;
color: #000;
border: 0px solid #000;
}
button:hover {
opacity: 0.8;
}
p {
font-size: 1em;
color: #000;
}
ul {
text-align: left;
}
.text {
padding: 25px;
}
.streetCover {
position: fixed;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.7);
border-left: 15px solid #fff;
border-right: 15px solid #fff;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: 600ms;
opacity: 0;
user-select:none;
z-index:1000;
}
.main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
perspective: 60px;
perspective-origin: 50% center;
overflow: hidden;
z-index: 200;
}
.padder{
position:relative;
display:block;
height:90px;
width:90vw;
user-select:none;
}
.tilted {
transform: rotateX(95deg);
}
.content {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
left: 0%;
background: var(--col2-13);
transform-origin: 0% 100%;
transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
overflow: auto;
z-index: 100;
}
.streetRight {
left: calc(100% - 25px);
}
.menuBtn,
.randomize {
position: absolute;
bottom: 0%;
transform: translate(-50%, -10px);
padding: 4px;
cursor: pointer;
transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
background: var(--col2-3);
color: var(--col2-13);
height:90px;
width:90px;
border: 0px;
border-radius: 50%;
z-index: 1000;
outline: none;
box-shadow:0px 4px 5px var.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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