div+css卡通飞机导航条滚动切换效果代码
代码语言：html
所属分类：菜单导航
代码描述：div+css卡通飞机导航条滚动切换效果代码头鹰效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css2?family=Pacifico&display=swap");
* {
box-sizing: border-box;
}
:root {
--x: 0;
--y: 0;
--text-color: #fff;
--text-layer-1: --text-color;
--text-layer-2: #a5dbeb;
--text-layer-3: #347cb4;
--blur: 6px;
}
::-webkit-scrollbar {
display: none;
}
html {
scrollbar-gutter: stable;
scroll-behavior: smooth;
}
body {
margin: 0;
block-size: 100vh;
font-family: "Pacifico", cursive;
color: var(--text-color);
}
.container {
position: relative;
z-index: 1;
inline-size: 100%;
block-size: 100%;
display: flex;
flex-flow: row nowrap;
.card {
inline-size: inherit;
min-block-size: 100vh;
flex-shrink: 0;
display: flex;
justify-content: space-between;
align-items: start;
padding: 3rem;
& a {
display: inline-flex;
padding: 0.55rem 1rem;
text-decoration: none;
white-space: nowrap;
font-size: clamp(2rem, 3vw, 3rem);
color: var(--text-layer-2);
border-radius: 0.25rem;
transition: scale 200ms cubic-bezier(0.64, 0.11, 0.24, 2.47);
/* */
&:not(:hover) {
filter: blur(var(--blur));
-webkit-filter: blur(var(--blur));
}
/* */
animation: blur both linear;
animation-timeline: view(x 50vw auto);
&:nth-of-type(2) {
translate: 0 25vh;
}
&:nth-of-type(3n + 1) {
translate: 0 60vh;
&:not(:hover) {
color: var(--text-layer-2);
scale: 0.8;
}
}
&:nth-of-type(even) {
&:not(:hover) {
color: var(--text-layer-3);
}
}
&:hover {
scale: 1.35;
background: rgb(87 101 133 / 20%);
}
}
&:nth-of-type(2) {
& a {
&:nth-of-type(2) {
translate: 0 45vh;
}
&:nth-of-type(3n + 1) {
translate: 0 75vh;
}
}
}
}
}
.back {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* */
background-color: #1abcfe;
background-image: url(//repo.bfw.wiki/bfwrepo/image/651b7025b52b8.png);
background-position: var(--x) var(--y);
background-repeat: no-repeat;
background-size: 250vh;
/* */
animation: scroll-page both linear;
animation-timeline: scroll(inline);
}
.airplane {
position: fixed;
z-index: 2;
left: 1rem;
top: 50%;
translate: 0 -50%;
display: flex;
gap: 1rem;
animation: airplane both linear;
animation-timeline: scroll(inline);
& #airship {
display: none;
.screw {
transform-origin: 50% 46%;
animation: screw 100ms infinite;
}
}
}
label {
position: fixed;
top: 0.5rem;
right: 0.5rem;
z-index: 3;
padding: 0.25rem;
color: var(--text-layer-3);
background-color: var(--text-color);
backdrop-filter: blur(4px);
&:has(input[type="checkbox"]:checked) {
~ .container {
flex-direction: column;
& .card {
flex-direction: column;
& a {
translate: none;
/* color: var(--text-color); */
scale: 1;
animation-timeline: view(y 40vh auto);
}
}
~ .back {
animation-timeline: scroll();
}
}
~ .airplane {
top: 5rem;
right: 1rem;
left: auto;
flex-direction: column;
animation: airship both linear;
animation-timeline: scroll();
& #airplane {
display: none;
}
& #airship {
display: block;
}
}
}
}
.help {
position: fixed;
bottom: 1rem;
left: 50%;
translate: -50%;
}
@keyframes scroll-page {
to {
/* --x: 100%; */
/* --y: 100%; */
background-position: 100% 50%;
}
}
@keyframes airplane {
0% {
translate: -110%;
}
10% {
translate: 10vw 0;
}
20% {
translate: 20vw -20vh;
}
30% {
translate: 30vw -20vh;
}
40% {
translate: 30vw 20vh;
}
50% {
translate: 50vw 30vh;
}
60% {
translate: 60vw -35vh;
}
70% {
translate: 70vw 10vh;
}
100% {
translate: 100vw;
}
}
@keyframes airship {
0% {
scale: 0.25;
}
20% {
translate: -40vw 20vh;
}
40% {
translate: -30vw 60vh;
}
60% {
translate: -50vw 40vh;
}
100% {
translate: -80vw 100vh;
scale: 3;
}
}
@keyframes blur {
to {
filter: blur(0);
-webkit-filter: blur(0);
color: var(--text-color);
}
}
@keyframes screw {
to {
rotate: 180deg;
}
}
</style>
</head>
<body >
<label for="random">
<input id="random" type="checkbox"/>vertical navbar
</label>
<div class="airplane">
<svg id="airplane" width="120" viewBox="0 0 444 189" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M106.465 126.625H98.556V142.029H106.465V126.625Z" fill="#2A2B2B"></path>
<path d="M116.921 149.938C116.921 157.895 110.469 164.346 102.511 164.346C94.553 164.346 88.102 157.895 88.102 149.938C88.102 141.98 94.553 135.527 102.511 135.527C110.469 135.526 116.921 141.979 116.921 149.938Z" fill="#2A2B2B"></path>
<path d="M110.419 149.938C110.419 154.303 106.879 157.844 102.512 157.844C98.144 157.844 94.603 154.303 94.603 149.938C94.603 145.568 98.143 142.029 102.512 142.029C106.879 142.029 110.419 145.568 110.419 149.938Z" fill="white" fill-opacity="0.2"></path>
<path d="M339.651 140.148L331.257 143.665L340.214 165.045L348.609 161.528L339.651 140.148Z" fill="#2A2B2B"></path>
<path d="M363.477 165.795C367.017 174.244 363.036 183.961 354.585 187.499C346.137 191.038 336.418 187.058 332.88 178.608C329.34 170.159 333.321 160.44 341.77 156.902C350.221 153.363 359.938 157.346 363.477 165.795Z" fill="#2A2B2B"></path>
<path d="M356.575 168.688C358.515 173.322 356.333 178.657 351.694 180.598C347.058 182.54 341.723 180.354 339.783 175.721C337.839 171.079 340.025 165.745 344.661 163.805C349.3 161.861 354.631 164.047 356.575 168.688Z" fill="white" fill-opacity="0.2"></path>
<path d="M320.494 140.135L311.536 161.516L319.931 165.033L328.888 143.652L320.494 140.135Z" fill="#2A2B2B"></path>
<path d="M296.737 165.795C293.198 174.244 297.179 183.961 305.629 187.499C314.078 191.038 323.796 187.058 327.334 178.608C330.873 170.159 326.892 160.44 318.443 156.902C309.994 153.363 300.275 157.346 296.737 165.795Z" fill="#2A2B2B"></path>
<path d="M303.639 168.688C301.698 173.322 303.881 178.657 308.519 180.598C313.156 182.54 318.491 180.354 320.431 175.721C322.374 171.079 320.189 165.745 315.552 163.805C310.914 161.861 305.582 164.047 303.639 168.688Z" fill="white" fill-opacity="0.2"></path>
<path d="M426.787 115.387H436.143C440.444 115.387 443.933 111.899 443.933 107.595C443.933 103.293 440.445 99.806 436.143 99.806H426.787V115.387Z" fill="#BCC1C1"></path>
<path d="M433.329 147.575V67.783C433.329 64.171 430.4 61.244 426.787 61.244V154.116C430.4 154.116 433.329 151.188 433.329 147.575Z" fill="#2A2B2B"></path>
<path d="M407.982 82.842V107.594H25.345C23.652 66.076 38.109 32.627 48.872 13.756C54.7 3.55197 66.476 -1.70199 77.959 0.791006C86.002 2.53901 92.804 7.88702 96.418 15.288L110.062 43.23C123.092 69.931 156.087 70.131 164.397 69.29C241.137 61.595 297.047 63.408 329.296 66.05V78.252H366.772L407.904 82.827C407.93 82.828 407.956 82.828 407.982 82.842Z" fill="#FFD546"></path>
<path d="M407.982 107.595V140.151C406.741 140.604 405.461 141.005 404.141 141.324C307.887 164.825 97.204 141.632 25.344 107.595H407.982Z" fill="#FFD546"></path>
<path d="M407.982 107.595V140.151C406.741 140.604 405.461 141.005 404.141 141.324C307.887 164.825 97.204 141.632 25.344 107.595H407.982Z" fill="black" fill-opacity="0.1"></path>
<path d="M366.771 78.253H329.295V66.051C338.537 66.81 345.845 67.637 351.14 68.331C357.569 69.158 363.291 72.785 366.771 78.253Z" fill="white" fill-opacity="0.2"></path>
<path d="M426.787 103.928V107.595H407.983V82.843C418.693 84.055 426.787 93.138 426.787 103.928Z" fill="#2A2B2B"></path>
<path d="M426.787 107.595C426.787 125.454 419.386 135.857 407.983 140.151V107.595H426.787Z" fill="#2A2B2B"></path>
<path d="M426.787 107.595C426.787 125.454 419.386 135.857 407.983 140.151V107.595H426.787Z" fill="white" fill-opacity="0.1"></path>
<path d="M85.157 80.9769C85.157 84.4629 82.33 87.2819 78.851 87.2819H7.19499C3.71799 87.2819 0.890991 8.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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