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