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