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 t.........完整代码请登录后点击上方下载按钮下载查看