css实现服务器500故障灭火交互动画页面代码-html代码-BFW代码库

css实现服务器500故障灭火交互动画页面代码

代码语言：html

代码描述：css实现服务器500故障灭火交互动画页面代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
  
<style>
*, ::before, ::after {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	background-color: #313131;
	font-family: system-ui, sans-serif;
	color: white;
	font-size: clamp(0.8rem, 4vw, 1.5rem);
	text-wrap: balance;
	max-width: 50rem;
	margin-inline: auto;
	padding-inline: 0.7rem;
	user-select: none;
}

h1 {
	padding-block: 0.3em;
}

.extinguisher {
	width: 5rem;
	position: fixed;
	top: var(--mouse-y, -50vh);
	left: var(--mouse-x, 50vw);
	translate: -50% -50%;
	transition: top 0.1s ease-out,
		left 0.1s ease-out,
		rotate 0.15s ease-in-out;
	z-index: 2;
}

.extinguisher.click {
	rotate: 15deg;
}

.server {
	position: absolute;
	top: 50%;
	right: 15%;
	width: 15rem;
	translate: 0 -50%;
	z-index: -1;
}

.flame {
	position: fixed;
	top: var(--y);
	left: var(--x);
	z-index: 0;
	width: calc(var(--size, 1) * 2.5rem);
	transform-origin: center 73%;
	animation: rotate 0.5s ease-in-out infinite;
}

@keyframes rotate {
	from, to {
		rotate: -10deg;
	}
	50% {
		rotate: 10deg;
	}
}

.foam {
	position: fixed;
	top: var(--y);
	left: var(--x);
	width: 2rem;
	aspect-ratio: 1;
	background: white;
	z-index: 1;
	border-radius: 50%;
	filter: blur(0.1rem);
	animation: foam 0.9s ease-out both,
		fall 0.9s ease-in both;
	translate: -50% -50%;
}

@keyframes foam {
	to {
		opacity: 0;
		translate: 600% -50%;
		filter: blur(0.5rem);
	}
}

@keyframes fall {
	to {
		transform: translateY(400%);
	}
}
</style>

  
  
</head>

<body translate="no">
  <h1>500 internal server error</h1>
<p>Our servers catch fire. Please help us keep them safe.</p>
<div class="flames"></div>
<div class="foams"></div>
<svg class="extinguisher" viewBox="0 0 22 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="4.15314" y="7" width="13" height="32" rx="6.5" fill="#E44141"/>
<rect x="4.15314" y="18" width="13" height="5" fill="#FFEDED"/>
<rect x="11.1531" y="4.5" width="10" height="2" fill="#C6C1C1"/>
<rect x="4.33884" width="8" height="2" transform="rotate(36.3592 4.33884 0)" fill="black"/>
<path d="M1.15314 13C2.15315 7 8.35721 5.23635 8.35721 5.23635L9.79064 6.63107C9.79064 6.63107 3.7763 8 2.65314 14L1.15314 13Z" fill="black"/>
<rect x="8.65314" y="4" width="4" height="4" fill="#E44141"/>
</svg>
<svg class="server" viewBox="0 0 37 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="36.9671" height="43.2815" fill="#545967"/>
<rect x="2" y="2" width="32.9671" height="4.88025" fill="#00123F"/>
<ellipse cx="32.6123" cy="4.44013" rx="1.17739" ry="1.22006" fill=&quo.........完整代码请登录后点击上方下载按钮下载查看