lenis实现滚动驱动的餐厅电子菜单代码-html代码-BFW代码库

lenis实现滚动驱动的餐厅电子菜单代码

代码语言：html

代码描述：lenis实现滚动驱动的餐厅电子菜单代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Bungee+Shade&amp;family=Monoton&amp;family=Poller+One&amp;family=Nothing+You+Could+Do&amp;family=Quicksand:wght@300;400;500;600;700&amp;display=swap'>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/lenis.1.1.20.css">
<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: linear-gradient(135deg, #0a2f2f 0%, #1a4a4a 100%);
	font-family: "Quicksand", sans-serif;
	overflow-x: hidden;
	position: relative;
}

.ocean-bg {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.wave {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background: repeating-linear-gradient(
		transparent,
		transparent 98px,
		rgb(6 214 160 / 0.15) 98px,
		rgb(6 214 160 / 0.25) 100px
	);
	animation: waveMove 8s linear infinite;
}

.wave:nth-child(2) {
	bottom: 30px;
	opacity: 0.5;
	animation-duration: 12s;
	animation-direction: reverse;
}

.wave:nth-child(3) {
	bottom: 60px;
	opacity: 0.3;
	animation-duration: 16s;
}

@keyframes waveMove {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100px);
	}
}

.sun-sparkle {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(
		circle at 20% 30%,
		rgb(255 215 0 / 0.08) 0%,
		transparent 50%
	);
	animation: sparkle 4s ease-in-out infinite alternate;
}

@keyframes sparkle {
	0% {
		opacity: 0.3;
	}

	100% {
		opacity: 0.8;
	}
}

.hero {
	position: sticky;
	top: 0;
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	ali.........完整代码请登录后点击上方下载按钮下载查看