单个元素+css实现可交互点击的订书机效果代码-html代码-BFW代码库

单个元素+css实现可交互点击的订书机效果代码

代码语言：html

代码描述：单个元素+css实现可交互点击的订书机效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          position: relative;
          width: 100vw;
          height: 100vh;
          display: grid;
          place-items: center;
        }
        
        input {
          -webkit-appearance: none;
          -moz-appearance: none;
          -webkit-tap-highlight-color: transparent;
          appearance: none;
          display: inline-block;
          width: 85vmin;
          height: 20vmin;
          position: relative;
          transform-origin: 0 0;
          transform: perspective(1000px) rotateY(17.5deg) skewY(-25deg);
        /*   clip-path: polygon(0 0, 78% 0, 99.25% 72.5%, 100% 100%, 17.1% 100%, 16.6% 99%, 0 22%); */
          clip-path: polygon(0 0, 0 -500%, 500% -500%, 87% -100%, 95.5% 23.5%, 94% 35%, 88% 36.75%,  99.5% 72.5%, 100% 100%, 17.1% 100%, 16.6% 99%, 0 22%);
          border-radius: 0.5vmin;
          background:
            /* base - sides */
            conic-gradient(#0002, #fff8 50%, #fff0 66%) 86.9% 51% / 2% 5%,
            linear-gradient(92deg, #1117, #fff1, #1118) 16% 100% / 2% 23%,
            linear-gradient(45deg, #000 20%, #242424 56%, #555 0, #121212 56.5%, #0000 0) 0 50% / 17% 100%,
            linear-gradient(-0.5deg, #242424, #343434 , #242424 88%, #444 0, #343434 90%, #0000 0) 100% 100% / 100% 27%,
            /* light/shadow */
            radial-gradient(7.........完整代码请登录后点击上方下载按钮下载查看