css+svg实现网页滚动人类登月火箭发射升空代码-html代码-BFW代码库

css+svg实现网页滚动人类登月火箭发射升空代码

代码语言：html

代码描述：css+svg实现网页滚动人类登月火箭发射升空代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>

@import url(https://fonts.bunny.net/css?family=abeezee:400);

@layer base, mouse, rocket;

@layer rocket {
	@property --scroll {
		syntax: "<number>";
		inherits: true;
		initial-value: 0;
	}
	body {
		/* lightning towers */
		&::before,
		&::after {
			--tower-x: -300%;
			content: "";
			position: fixed;
			left: 50%;
			translate: var(--tower-x) 0;
			bottom: 0;
			width: 40px;
			height: 450px;
			clip-path: polygon(50% 0, 100% 100%, 0 100%);

			background-image: repeating-conic-gradient(
					at top center,
					#0000 0deg 1deg,
					#555 0 1.3deg
				),
				linear-gradient(
					#0000 120px,
					#444 0 121px,
					#0000 0 212px,
					#444 0 213px,
					#0000 0 310px,
					#444 0 311px,
					#0000 0 410px,
					#444 0 411px,
					#0000 0
				);
			z-index: 999;
			animation: --💫-tower 1ms linear;
			animation-timeline: scroll(root);
			animation-range: 4% 100%;
		}
		&::after {
			--tower-x: 200%;
		}
	}
	@keyframes --💫-tower {
		to {
			translate: var(--tower-x) 1000px;
		}
	}

	.scene {
		--g-round: linear-gradient(90deg, #999, white 20% 80%, #ccc);
		--rocket-width: 40px;
		--rocket-height: 350px;

		--capsule-width: 20px;
		--capsule-height: 35px;
		--capsule-bg: linear-gradie.........完整代码请登录后点击上方下载按钮下载查看