css实现万圣节坟墓式释放小鬼按钮点击效果代码-html代码-BFW代码库

代码语言：html
代码描述：css实现万圣节坟墓式释放小鬼按钮点击效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        /*
        * Design: https://dribbble.com/shots/16658222-Family-Gathering
        */
        @import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&display=swap");
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body {
          width: 100vw;
          height: 100vh;
          overflow: hidden;
          font-family: "Balsamiq Sans", sans-serif;
          color: #fff;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: center;
          background: #000408;
          background: radial-gradient(circle at bottom, #0E6264 0%, #04333B 50%, #000408 100%);
        }
        
        .glow {
          position: absolute;
          width: 12rem;
          height: 12rem;
          background: #13B8A9;
          filter: blur(10rem);
        }
        
        #container {
          position: relative;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: center;
          margin-bottom: 20vmin;
        }
        
        @media (max-height: 800px) {
          #container {
            margin-bottom: 40vmin;
          }
        }
        .ghost {
          opacity: 0;
          display: flex;
          flex-flow: column nowrap;
          align-items: center;
          justify-content: flex-end;
        }
        .ghost-1 {
          position: absolute;
          top: 2rem;
          left: -1rem;
        }
        .ghost-2 {
          position: absolute;
          top: 10rem;
          left: 8rem;
          z-index: 2;
        }
        .ghost-3 {
          position: absolute;
          top: -1rem;
          left: 10rem;
        }
        
        .appear-1 {
          opacity: 1;
          animation: appear 3s linear, float 5s ease-in-out 1s infinite;
        }
        
        .disappear-1 {
          opacity: 0;
          animation: disappear 3s linear, float 5s ease-in-out 1s infinite;
        }
        
        .appear-2 {
          opacity: 1;
          animation: appear 3s linear, float 5s ease-in-out 2s infinite;
        }
        
        .disappear-2 {
          opacity: 0;
          animation: disappear 3s linear, float 5s ease-in-out 2s infinite;
        }
        
        .appear-3 {
          opacity: 1;
          animation: appear 3s linear, float 5s ease-in-out 3s infinite;
        }
        
        .disappear-3 {
          opacity: 0;
          animation: disappear 3s linear, float 5s ease-in-out 3s infinite;
        }
        
        .body {
          position: relative;
          width: 5.75rem;
          height: 6.5rem;
          border-top-left-radius: 5.75rem;
          border-top-right-radius: 5.75rem;
          background: radial-gradient(white, #A5F9F1);
          box-shadow: inset -1rem 0.5rem 0.5rem -0.75rem #13B8A9, inset 1rem 0.5rem 0.5rem -0.75rem #fff;
        }
        
        .face {
          position: absolute;
          top: 15%;
          left: 10%;
          width: 5rem;
          height: 5rem;
          animation: look-around 12s ease-in-out infinite;
        }
        .face .eyes:before {
          content: "";
          position: absolute;
          top: 50%;
          left: 28%;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 0.5rem;
          background: #04333B;
          box-shadow: inset 0 0 0.25rem #13B8A9, 0 0 0.25rem #13B8A9;
          animation: blink 5.5s ease-in-out infinite;
        }
        .face .eyes:after {
          content: "";
          position: absolute;
          top: 50%;
          right: 28%;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 0.5rem;
          background: #04333B;
          box-shadow: inset 0 0 0.25rem #13B8A9, 0 0 0.25rem #13B8A9;
          animation: blink 5.5s ease-in-out infinite;
        }
        .face .mouth {
          position: absolute;
          top: 55%;
          left: 45%;
          width: 0.625rem;
          height: 0.375rem;
          border-top-left-radius: 0.625rem;
          border-top-right-radius: 0.625rem;
          background: #04333B;
          box-shadow: inset 0 0 0.25rem #13B8A9, 0 0 0.25rem #13B8A9;
          animation: boo 3s ease-in-out infinite;
        }
        
        .bottom {
          width: 5.75rem;
          height: 2rem;
          border-bottom-left-radius: 25%;
          border-bottom-right-radius: 100%;
          background: radial-gradient(ellipse at top, #bafff8, #A5F9F1);
          box-shadow: inset -1rem -0.5rem 0.5rem -0.75rem #13B8A9, inset 1rem 0.5rem 0.5rem -0.75rem #fff;
          animation: bottom 2s ease-in-out infinite;
        }
        
        .fence.left {
          position: absolute;
          transform-style: preserve-3d;
          width: 15rem;
          height: 15rem;
          transform: rotateX(30deg) rotateY(315deg) rotateX(360deg);
          top: 0;
          left: -5.5rem;
          z-index: -5;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: center;
        }
        .fence.left .panel .top {
          width: 1rem;
          height: 1.5rem;
          margin: 0 1rem;
          background: linear-gradient(to right, #13B8A9 0%, #0E6264 100%);
          box-shadow: inset -0.2rem 0.1rem 0.25rem 0.25rem #0b4c4e;
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
        .fence.left .panel .post {
          width: 0.8rem;
          height: 8rem;
          margin: 0 1.2rem;
          background: linear-gradient(#13B8A9 0%, #0E6264 20%, #000408);
          box-shadow: inset -0.1rem -0.5rem 0.25rem 0.25rem #04333B;
        }
        
        .fence.right {
          position: absolute;
          transform-style: preserve-3d;
          width: 15rem;
          height: 15rem;
          transform: rotateX(-30deg) rotateY(315deg) rotateX(360deg);
          top: 0;
          left: 5.5rem;
          z-index: -5;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: center;
        }
        .fence.right .panel .top {
          width: 1rem;
          height: 1.5rem;
          margin: 0 1rem;
          background: linear-gradient(to right, #13B8A9 0%, #0E6264 100%);
          box-shadow: inset -0.2rem 0.1rem 0.25rem 0.25rem #0b4c4e;
          clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        }
        .fence.right .panel .post {
          width: 0.8rem;
          height: 8rem;
          margin: 0 1.2rem;
          background: linear-gradient(#13B8A9 0%, #0E6264 20%, #000408);
          box-shadow: inset -0.1rem -0.5rem 0.25rem 0.25rem #04333B;
        }
        
        .fence.bars-left {
          position: absolute;
          transform-style: preserve-3d;
          width: 15rem;
          height: 15rem;
          transform: rotateX(30deg) rotateY(315deg) rotateX(360deg);
          top: 0;
          left: -5.5rem;
          z-index: -5;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: center;
        }
        .fence.bars-left .bar {
          width: 13.5rem;
          height: 0.5rem;
          margin: 1rem;
          background: linear-gradient(to right, #13B8A9 0%, #0E6264 10%, #04333B);
          box-shadow: inset 0 -0.15rem 0.25rem 0.05rem #0A5F51, inset 0 -0.05rem 0.25rem 0.05rem #04333B;
        }
        
        .fence.bars-middle {
          position: absolute;
          transform-style: preserve-3d;
          width: 2rem;
          height: 2rem;
          transform: rotateX(360deg) rotateY(315deg) rotateX(360deg);
          top: 4.45rem;
          left: 6.5rem;
          z-index: -5;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: center;
        }
        .fence.bars-middle .bar {
          width: 2rem;
          height: 0.45rem;
          margin: 0.85rem;
          background: linear-gradient(to right, #13B8A9 0%, #0E6264 10%, #04333B);
          box-shadow: inset 0.25rem 0.25rem 0.25rem 0.05rem #04333B;
        }
        
        .fence.bars-right {
          position: absolute;
          transform-style: preserve-3d;
          width: 15rem;
          height: 15rem;
          transform: rotateX(-30deg) rotateY(315deg) rotateX(360deg);
          top: 0;
          left: 5.5rem;
          z-index: -5;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          justify-content: center;
        }
        .fence.bars-right .bar {
          width: 13.5rem;
          height: 0.5rem;
          margin: 1rem;
          background: linear-gradient(to right, #13B8A9 0%, #0E6264 10%, #04333B);
          box-shadow: inset 0 -0.15rem 0.25rem 0.05rem #0A5F51, inset 0 -0.05rem 0.25rem 0.05rem #04333B;
        }
        
        .ground {
          position: absolute;
          transform-style: preserve-3d;
          width: 15rem;
          height: 15rem;
          transform: rotateX(30deg) rotateY(315deg) rotateX(270deg);
        }
        .ground.first-level.over {
          top: 5rem;
          background: radial-gradient(#13B8A9, #04333B);
          border-radius: 2rem;
          z-index: -1;
        }
        .ground.first-level.under {
          top: 5.75rem;
          background: linear-gradient(#04333B, #000408);
          border-radius: 2rem;
          z-index: -2;
        }
        .ground.second-level.over {
          height: 16rem;
          width: 16rem;
          top: 5.75rem;
          background: radial-gradient(#0E6264, #04333B);
          border-radius: 2rem;
          z-index: -3;
        }
        .ground.second-level.under {
          height: 16.15rem;
          width: 16.15rem;
          top: 6.5rem;
          background: linear-gradient(#04333B 0%, #000408 100%);
          border-radius: 2rem;
          z-index: -4;
        }
        
        .crop {
          position: absolute;
          top: 6.375rem;
          left: -2.25rem;
          width: 2.5rem;
          height: 1rem;
          transform: rotate(40deg);
          background: linear-gradient(#0e857a, #107174);
     .........完整代码请登录后点击上方下载按钮下载查看