js+css实现网页滚动驱动母亲节快乐动画代码-html代码-BFW代码库

代码语言：html
代码描述：js+css实现网页滚动驱动母亲节快乐动画代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
:root {
	--day-top: #92d9ff;
	--day-mid: #d5f0ff;
	--day-bottom: #f7fbff;
	--night-top: #08111f;
	--night-mid: #11253d;
	--night-bottom: #1e3550;
	--flower-a: #ff7cb8;
	--flower-b: #ffd465;
	--flower-c: #7fcaff;
	--metal-top: #d7edf7;
	--metal-bottom: #88a7b8;
	--metal-edge: #40596a;
	--dome-top: #b7ffea;
	--dome-bottom: #6edec3;
	--stick: #1c2833;
	--panel-ink: #f8fbff;
	--panel-shadow: rgba(3, 10, 18, 0.18);
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
}

html {
	overflow-x: hidden;
	overflow-y: hidden;
	background: #040913;
}

body {
	font-family: Georgia, "Times New Roman", serif;
	height: 100vh;
	height: 100svh;
	min-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: y mandatory;
	overscroll-behavior-y: contain;
	-webkit-overflow-scrolling: touch;
	color: var(--panel-ink);
	background: transparent;
}

.scroll-snap-unsupported {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(1.25rem, 4vw, 2rem);
	z-index: 20;
	background:
		radial-gradient(circle at 18% 18%, rgba(196, 240, 255, 0.08), transparent 34%),
		radial-gradient(circle at 78% 20%, rgba(157, 243, 223, 0.08), transparent 30%),
		linear-gradient(180deg, #050b16 0%, #0a1221 100%);
	color: rgba(248, 251, 255, 0.96);
}

.scroll-snap-unsupported[hidden] {
	display: none;
}

.scroll-snap-unsupported__panel {
	width: min(40rem, 100%);
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid rgba(153, 207, 225, 0.3);
	border-radius: 1rem;
	background: rgba(8, 16, 30, 0.8);
	box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(3px);
}

.scroll-snap-unsupported__panel h1 {
	margin: 0;
	font-size: clamp(1.35rem, 4vw, 2rem);
	line-height: 1.2;
	color: #f6fbff;
}

.scroll-snap-unsupported__panel p {
	margin: 0.75rem 0 0;
	font-size: clamp(1rem, 2.5vw, 1.125rem);
	line-height: 1.45;
	color: rgba(233, 243, 255, 0.9);
}

body[data-scroll-snap-events="unsupported"] {
	overflow: hidden;
	scroll-snap-type: none;
}

body[data-scroll-snap-events="unsupported"] .scene-frame,
body[data-scroll-snap-events="unsupported"] .play-layer,
body[data-scroll-snap-events="unsupported"] .snap-shell {
	display: none;
}

body[data-scroll-snap-events="unsupported"] .scroll-snap-unsupported {
	display: flex;
}

.scene-frame {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.play-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

body[data-game="guessing"] .play-layer,
body[data-game="resolved"] .play-layer {
	z-index: 8;
}

.flow-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	transition: opacity 360ms ease;
}

.flow-overlay__panel {
	position: absolute;
	left: 50%;
	top: 16vh;
	width: min(68rem, calc(100vw - 2.5rem));
	transform: translate(-50%, 4.5rem) scale(0.965);
	transform-origin: top center;
	color: rgba(248, 251, 255, 0.96);
	text-shadow: 0 1px 8px rgba(5, 10, 20, 0.44);
	clip-path: inset(0 0 24% 0);
	transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1), clip-path 680ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flow-overlay__surface {
	position: relative;
	min-height: 18rem;
	user-select: none;
}

.flow-overlay__glyph {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(1.2rem) scale(0.96);
	transition:
		opacity 420ms ease,
		transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--glyph-index, 0) * 8ms);
}

.flow-overlay__glyph-inner {
	display: block;
	line-height: 1;
	color: rgba(250, 252, 255, 0.98);
	text-shadow:
		0 0 18px rgba(166, 255, 220, 0.14),
		0 2px 12px rgba(5, 10, 20, 0.48);
	transform: translate3d(0, 0, 0);
	will-change: transform;
}

.scene {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	background: #050a12;
}

.scene__sky,
.scene__night-wash,
.sun,
.moon,
.stars,
.garden,
.hills,
.flowers,
	.ufo-fleet,
.path,
.grass,
.stick-figure {
	position: absolute;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.scene__sky {
	inset: 0;
	transition: opacity 900ms ease, transform 900ms ease;
}

.scene__sky--day {
	background:
		radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.52), transparent 18%),
		radial-gradient(circle at 78% 16%, rgba(170, 229, 255, 0.38), transparent 18%),
		linear-gradient(180deg, var(--day-top) 0%, var(--day-mid) 46%, var(--day-bottom) 100%);
	opacity: 1;
	transform: scale(1);
}

.scene__sky--night {
	background:
		radial-gradient(circle at 22% 15%, rgba(72, 96, 214, 0.2), transparent 20%),
		radial-gradient(circle at 74% 18%, rgba(159, 247, 223, 0.1), transparent 18%),
		linear-gradient(180deg, var(--night-top) 0%, var(--night-mid) 48%, var(--night-bottom) 100%);
	opacity: 0;
	transform: scale(1.04);
}

.scene__night-wash {
	inset: 0;
	background:
		radial-gradient(circle at 58% 58%, rgba(255, 154, 73, 0.18), transparent 24%),
		linear-gradient(180deg, rgba(255, 157, 82, 0.08), rgba(8, 17, 31, 0.28) 44%, rgba(4, 10, 18, 0.5));
	opacity: 0;
	transition: opacity 1200ms ease;
}

.sun,
.moon {
	top: 8vh;
	right: 10vw;
	width: clamp(72px, 10vw, 140px);
	aspect-ratio: 1;
	border-radius: 50%;
	transition: opacity 1100ms ease, transform 1100ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1100ms ease;
	transition-delay: 0ms;
}

.sun {
	background: radial-gradient(circle at 35% 35%, #fff8d0, #ffdf7c 60%, #f6a53a 100%);
	box-shadow: 0 0 0 20px rgba(255, 221, 112, 0.22), 0 0 90px rgba(255, 216, 122, 0.3);
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

.moon {
	background: radial-gradient(circle at 35% 35%, #fffdf2, #f5efc4 60%, #d0c78c 100%);
	box-shadow: 0 0 0 18px rgba(245, 239, 196, 0.12), 0 0 90px rgba(245, 239, 196, 0.12);
	opacity: 0;
	transform: translate3d(8vw, 18vh, 0) scale(0.5);
}

.stars {
	inset: 0;
	background-repeat: repeat;
	opacity: 0;
	transition: opacity 800ms ease;
}

.stars-a {
	background-image:
		radial-gradient(circle at 10% 20%, #fff 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 24% 14%, #d6ebff 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 42% 8%, #fff 0 1.4px, transparent 2.4px),
		radial-gradient(circle at 58% 18%, #fff7cf 0 1.6px, transparent 2.6px),
		radial-gradient(circle at 70% 10%, #d6ebff 0 1.4px, transparent 2.4px),
		radial-gradient(circle at 84% 24%, #fff 0 1.5px, transparent 2.5px);
}

.stars-b {
	background-image:
		radial-gradient(circle at 16% 30%, rgba(255, 255, 255, 0.8) 0 1.2px, transparent 2.2px),
		radial-gradient(circle at 37% 22%, rgba(255, 255, 255, 0.75) 0 1.2px, transparent 2.2px),
		radial-gradient(circle at 63% 28%, rgba(214, 235, 255, 0.7) 0 1.2px, transparent 2.2px),
		radial-gradient(circle at 88% 16%, rgba(255, 255, 255, 0.85) 0 1.2px, transparent 2.2px);
	animation: twinkle 5s ease-in-out infinite alternate;
}

.garden {
	inset: auto 0 0;
	height: 70vh;
	min-height: 420px;
	transition: filter 900ms ease;
}

.hills {
	left: -8%;
	width: 116%;
	border-radius: 50%;
}

.hill-back {
	bottom: 18vh;
	height: 28vh;
	background: radial-gradient(circle at 50% 30%, #7db26a, #5f954f 68%);
}

.hill-front {
	bottom: 8vh;
	height: 32vh;
	background: radial-gradient(circle at 50% 30%, #638f54, #436e38 70%);
}

.path {
	left: 50%;
	bottom: 0;
	width: clamp(160px, 24vw, 320px);
	height: 22vh;
	transform: translateX(-50%);
	clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 14%),
		linear-gradient(180deg, #b8bcae, #8f9786);
	opacity: 0.78;
	transition: filter 900ms ease, opacity 900ms ease;
}

.grass {
	left: 0;
	right: 0;
	bottom: 0;
	height: 22vh;
	background:
		linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.08) 22%),
		linear-gradient(180deg, #46874a, #234b21);
	transition: filter 900ms ease;
}

.grass::before,
.grass::after {
	position: absolute;
	inset: auto 0 0;
	content: "";
}

.grass::before {
	height: 9vh;
	background:
		linear-gradient(110deg, transparent 0 6%, #2d6a33 6% 7%, transparent 7% 12%, #2d6a33 12% 13%, transparent 13% 100%),
		linear-gradient(70deg, transparent 0 10%, #25562a 10% 11%, transparent 11% 16%, #25562a 16% 17%, transparent 17% 100%);
	opacity: 0.7;
}

.grass::after {
	height: 2px;
	background: rgba(255, 255, 255, 0.14);
	bottom: 22vh;
}

.flowers {
	bottom: 8vh;
	width: min(28vw, 300px);
	height: 18vh;
	opacity: 0.96;
	transition: filter 900ms ease, opacity 900ms ease;
}

.flowers::before,
.flowers::after {
	position: absolute;
	inset: 0;
	content: "";
}

.flowers-left {
	left: 3vw;
	transform: rotate(-2deg);
}

.flowers-right {
	right: 4vw;
	transform: scaleX(-1) rotate(-2deg);
}

.flowers::before {
	background:
		radial-gradient(circle at 14% 68%, var(--flower-a) 0 8px, transparent 9px),
		radial-gradient(circle at 30% 54%, var(--flower-b) 0 7px, transparent 8px),
		radial-gradient(circle at 47% 70%, var(--flower-c) 0 8px, transparent 9px),
		radial-gradient(circle at 66% 50%, var(--flower-a) 0 7px, transparent 8px),
		radial-gradient(circle at 82% 64%, var(--flower-b) 0 8px, transparent 9px),
		linear-gradient(84deg, transparent 0 12%, #2e6f39 12% 13%, transparent 13% 28%, #2e6f39 28% 29%, transparent 29% 44%, #2e6f39 44% 45%, transparent 45% 60%, #2e6f39 60% 61%, transparent 61% 76%, #2e6f39 76% 77%, transparent 77% 100%);
}

.flowers::after {
	background:
		radial-gradient(circle at 14% 68%, rgba(255, 255, 255, 0.35) 0 2px, transparent 3px),
		radial-gradient(c.........完整代码请登录后点击上方下载按钮下载查看