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

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

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