css实现赛博朋克官网按钮

css代码

{
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        font-family: BlenderProBold, "PingFang SC", "Microsoft Yahei",
          sans-serif;
      }


      main {
        background: hsl(55, 100%, 65%);
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .button {
        width: 300px;
        height: 80px;
        background: none;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        cursor: pointer;
      }

      .button::after,
      .button::before,
      .glitch {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        clip-path: polygon(
          0 0,
          100% 0,
          100% 100%,
          calc(100% - 25px) 100%,
          calc(100% - 25px) calc(100% - 10px),
          calc(100% - 55px) calc(100% - 10px),
          calc(100% - 55px) 100%,
          20px 100%,
          0 calc(100% - 20px)
        );
      }

      .button::before {
        left: 2px;
        background: hsl(180, 100%, 50%, 50%);
      }
      .button::after {
        background: hsl(0deg, 100%, 60%);
      }

      .glitch {
        background: hsl(0deg, 100%, 60%);
        box-shadow: 0 0 0 1px hsl(180, 100%, 50%) inset;
        z-index: 10;
        opacity: 0;
      }

      .text {
        font-size: 24px;
        font-weight: 800;
        color: white;
        position: relative;
        z-index: 15;
      }
      .text::before {
        content: attr(data-text);
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        text-shadow: 1px 1px hsl(180, 100%, 50%),
          -1px -2px hsl(50deg, 100%, 60%);
        opacity: 0;
      }

      .button:hover .glitch,
      .button:hover .text::before {
        animation: glitch-effect 2s infinite;
        opacity: 1;
      }

      .platform {
        position: absolute;
        right: 28px;
        bottom: -4px;
        font-size: 10px;
        letter-spacing: 1px;
        font-weight: 500;
      }

      @keyframes glitch-effect {
        0% {
          clip-path: polygon(0 0, 100% 0, 100% 2%, 0 2%);
        }
        5% {
          clip-path: polygon(0 8%, 100% 8%, 100% 16%, 0 16%);
        }
        10% {
          clip-path: polygon(0 80%, 100% 80%, 100% 88%, 0 88%);
          transform: translate3d(-5px, 0, 0);
        }
        15% {
          clip-path: polygon(0 80%, 100% 80%, 100% 88%, 0 88%);
          transform: translate3d(5px, 0, 0);
        }
        16% {
          clip-path: polygon(0 80%, 100% 80%, 100% 88%, 0 88%);
          transform: translate3d(5px, 0, 0);
        }
        17% {
          clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
          transform: translate3d(5px, 0, 0);
        }
        18% {
          clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        }
        20% {
          clip-path: polygon(0 30%, 100% 30%, 100% 65%, 0 65%);
        }
        25% {
          clip-path: polygon(0 30%, 100% 30%, 100% 65%, 0 65%);
          transform: translate3d(-5px, 0, 0);
        }
        28% {
          clip-path: polygon(0 30%, 100% 30%, 100% 65%, 0 65%);
          transform: translate3d(-5px, 0, 0);
        }
        29% {
          clip-path: polygon(0 30%, 100% 30%, 100% 65%, 0 65%);
          transform: translate3d(5px, 0, 0);
        }
        30% {
          clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
        }

        40% {
          clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
        }
        42% {
          clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
          transform: translate3d(-5px, 0, 0);
        }
        45% {
          clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
          transform: translate3d(5px, 0, 0);
        }
        48% {
          clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
          transform: translate3d(-5px, 0, 0);
        }
        50% {
          clip-path: polygon(0 0, 0 0, 0 0, 0 0);
        }
        60% {
          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
        }
        100% {
          clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
          transform: translate3d(0, 0, 0);
        }
      }

效果