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

代码语言：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(70% 60% at 10% 5%, #ffffff18 73%, #0000 80%),
            radial-gradient(17% 140% at 100% 100%, #ffffff08 80%, #0000 85%),
            linear-gradient(#12121466 0 0) 81.75% 80% / 29% 70%,
            linear-gradient(#12121466 0 0) 81.75% 180% / 29% 70%,
            /* base - top */
            linear-gradient(90deg, #eee1, #fff0 20%),
            linear-gradient(47deg, #000, #0005 17.5%, #0000 18.1%),
            linear-gradient(180deg, #242424, #fffc 1%, #000 0 2.5%, #242424 0, #fff4 3%, #242424 5% 13%, #fff0 0 64%, #242424 0), 
            linear-gradient(44.5deg, #242424 22.5%, #fff3 22.55%, #000 22.65% 22.75%, #0000 23% 28.75%, #242424 29%),
            linear-gradient(180deg, #000 13%, #fff0 14% 62%, #000 64%), 
            /* metallic chip */
            linear-gradient(45deg, #0000 44%, #003 0, #0000 45%, #fff3 48%, #0005 49% 50%, #0000 0) 11.125% 29.75% / 8% 12%,
            linear-gradient(45deg, #0000 44%, #003 0, #0000 45%, #fff3 48%, #0005 49% 50%, #0000 0) 14.5% 45% / 8% 12%,
            linear-gradient(45deg, #0000 44%, #003 0, #0000 45%, #fff3 48%, #0005 49% 50%, #0000 0) 14% 23% / 7% 11%,
            linear-gradient(45deg, #0000 45%, #000a 50% 50.05%, #0000 0) 14% 23% / 7% 11%,
            linear-gradient(45deg, #0000 44%, #003 0, #0000 45%, #fff3 48%, #0005 49% 50%, #0000 0) 20% 49% / 7% 11%,
            linear-gradient(45deg, #0000 45%, #000a 50% 50.05%, #0000 0) 20% 49% / 7% 11%,
            linear-gradient(45deg, #0000 45%, #000a 50% 50.05%, #0000 0) 12.75% 35% / 8% 25%,
            linear-gradient(180deg, #e9e8e688, #bebdb988 70%, #706f6d88) -3% 25% / 30% 52%,
            radial-gradient(farthest-side at 50% 0%, #fff9, #fff0) 12% 24% / 10% 40%,
            radial-gradient(farthest-side at 50% 0%, #fffc, #fff0) 9% 22% / 10% 44%,
            radial-gradient(farthest-side at 30% 80%, #fff6, #fff0) 15% 30% / 10% 50%,
            #343434;
          background-repeat: no-repeat;
        }
        
        input::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 150%;
          top: -95%;
          left: 3%;
          clip-path:
            polygon(54% 100%, 54% 80%, 14% 79%, 14% 67%, 12% 66.5%, 0 36%, 1% 6%, 76% 30%, 100% 75%, 100% 100%, 0 100%);
          clip-path:
            polygon(54% 100%, 54% 80%, 14% 79%, 14% 67%, 12% 66.5%, 0 36%, 0.95% 6.1%, 1.3% 5.9%, 76% 30%, 99.8% 74.3%, 100% 75%, 100% 100%, 0 100%);
          background: 
            /* top cover */
            linear-gradient(40deg, #0000 35%, #2124 44%, #0002 46%, #fff3 0, #0002 46.75%, #0000 0) 0% -9% / 12.5% 40%,
            linear-gradient(#0000 45%, #0008 0 55%, #0000 0) 86% 76% / 1% 6%,
            linear-gradient(90deg, #0000 40%, #0008 60%, #0000 0) 85.75% 75.8% / 1.5% 4.5%,
            radial-gradient(20% 50%, #d6c6d588 40%, #2109, #0000) 86.75% 76.25% / 4% 7%,
            radial-gradient(20% 50%, #ccc6 40%, #012c, #0000) 87% 76% / 4% 7%,
            linear-gradient(90deg, #0000 20%, #0002, #ffe1) 9% 50% / 4% 35%,
            radial-gradient(20% 60%, #ddd2, #0000) 11.25% 33.5% / 4% 7%,
        /*     radial-gradient(60% 100%, #ccc1, #1232, #0000) 11.25% 36% / 4% 6%, */
          .........完整代码请登录后点击上方下载按钮下载查看