qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 大数据 › 数据仓库与分析 › html+css+js实现盒子

html+css+js实现盒子

[复制链接]
发表于 前天 12:11 | 显示全部楼层 |阅读模式
结果图：


代码：
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <title>禁止打开盖子</title>
  7.     <style>
  8.       * {
  9.         box-sizing: border-box;
  10.         -webkit-font-smoothing: antialiased;
  11.         text-rendering: optimizeLegibility;
  12.         scroll-behavior: smooth;
  13.       }
  14.       html,
  15.       body {
  16.         height: 100%;
  17.         overflow: hidden;
  18.       }
  19.       body {
  20.         display: flex;
  21.         flex-direction: row;
  22.         flex-wrap: wrap;
  23.         justify-content: center;
  24.         align-items: center;
  25.         margin: 0;
  26.         background: #cecece;
  27.       }
  28.       .box {
  29.         width: 20em;
  30.         height: 12em;
  31.         background: #0f0f0f;
  32.         overflow: hidden;
  33.         border-radius: 1em;
  34.         cursor: not-allowed;
  35.         position: relative;
  36.         margin: 1em;
  37.         border: 0;
  38.         box-shadow: 0.1em 0.1em 0.2em 0 #fff3, -0.1em -0.1em 0.2em 0 #0003;
  39.       }
  40.       .box .inset {
  41.         background: #cecece;
  42.         border-radius: 0.9em;
  43.         width: 100%;
  44.         height: 100%;
  45.         position: relative;
  46.         box-shadow: inset 0em 0em 0em 0em #0006, inset 0.1em 0.1em 0.2em 0 #fff3,
  47.           inset -0.1em -0.1em 0.2em 0 #0003;
  48.       }
  49.       .box .inset::before {
  50.         content: '';
  51.         display: block;
  52.         width: 0.8em;
  53.         height: 7em;
  54.         box-shadow: inset -0.1em -0.1em 0.1em 0.1em #fff3, inset 0.1em 0.1em
  55.             0.1em 0.1em #0003;
  56.         border-radius: 10px;
  57.         position: absolute;
  58.         top: 0;
  59.         bottom: 0;
  60.         margin: auto;
  61.         left: 1em;
  62.       }
  63.       .box.moving {
  64.         pointer-events: none;
  65.       }
  66.       .box.pushed .inset {
  67.         animation: pushed 2s ease-in-out forwards;
  68.       }
  69.       .box.reverse .inset {
  70.         animation: pushed 0.6s ease-in-out reverse forwards;
  71.       }
  72.       @keyframes pushed {
  73.         0% {
  74.           box-shadow: inset 0em 0em 0em 0em #0006, inset 0.1em 0.1em 0.2em 0
  75.               #fff3, inset -0.1em -0.1em 0.2em 0 #0003;
  76.           scale: 1;
  77.           translate: 0%;
  78.         }
  79.         24% {
  80.           box-shadow: inset 1.6em 1.6em 1em 0em #0006, inset 0.1em 0.1em 0.2em 0
  81.               #fff3, inset -0.1em -0.1em 0.2em 0 #0003;
  82.           translate: 0%;
  83.           scale: 0.9;
  84.         }
  85.         100% {
  86.           box-shadow: inset -2.8em 1.6em 1em 0em #0006, inset 0.1em 0.1em 0.2em
  87.               0 #fff3, inset -0.1em -0.1em 0.2em 0 #0003;
  88.           translate: 88%;
  89.           scale: 0.9;
  90.         }
  91.       }
  92.       .box .inset::after {
  93.         content: '';
  94.         display: block;
  95.         width: 100%;
  96.         height: 100%;
  97.         left: 0;
  98.         right: 0;
  99.         top: 0;
  100.         bottom: 0;
  101.         margin: auto;
  102.         background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M32,62A30,30,0,1,0,2,32,30,30,0,0,0,32,62ZM32,4A28,28,0,1,1,4,32,28,28,0,0,1,32,4Z"/><path d="M13.4 49.74h0a1 1 0 0 0 .71-.29L49.45 14.14a1 1 0 0 0 0-1.45A26 26 0 0 0 12.69 49.41 1 1 0 0 0 13.4 49.74zM26 32V17.5a1.5 1.5 0 0 1 3 0V31.76l-8 8V20.5a1.5 1.5 0 0 1 3 0V32zM37.5 16A1.5 1.5 0 0 1 39 17.5v4.26l-3 3V17.5A1.5 1.5 0 0 1 37.5 16zM34 17.5v9.26l-3 3V14.5a1.5 1.5 0 0 1 3 0zM32 8a24 24 0 0 1 15.27 5.48L41 19.76V17.5a3.47 3.47 0 0 0-5-3.14A3.53 3.53 0 0 0 35 12a3.5 3.5 0 0 0-6 2.34A3.36 3.36 0 0 0 27.5 14 3.5 3.5 0 0 0 24 17.36 3.36 3.36 0 0 0 22.5 17 3.5 3.5 0 0 0 19 20.5V41.76l-5.52 5.51A24 24 0 0 1 32 8zM15.63 50.78a1 1 0 0 0 .08 1.49A26 26 0 0 0 52.27 15.71a1 1 0 0 0-1.49-.08L20.45 46zM51.39 17.85A24 24 0 0 1 17.85 51.39L21 48.27A11 11 0 0 0 30 53h1.67a11 11 0 0 0 8-3.48L50.17 38.35A3.72 3.72 0 0 0 48 32.12a3.66 3.66 0 0 0-2.75.71L41 36V28.24zm-11.84 21a1 1 0 0 0 1.05-.09l5.83-4.37a1.7 1.7 0 0 1 2.39.33 1.74 1.74 0 0 1 .35 1A1.72 1.72 0 0 1 48.71 37L38.23 48.16A9 9 0 0 1 31.67 51H30a8.94 8.94 0 0 1-7.57-4.18L39 30.24V38A1 1 0 0 0 39.55 38.89z"/></svg>');
  103.         background-position: 50% 50%;
  104.         background-size: 24%;
  105.         background-repeat: no-repeat;
  106.         position: absolute;
  107.         opacity: 0.05;
  108.         transition: all 0.2s ease-in-out;
  109.       }
  110.       .box .inset:hover::after {
  111.         animation: red-glow 2s infinite ease-out;
  112.       }
  113.       @keyframes red-glow {
  114.         0% {
  115.           opacity: 0.1;
  116.           filter: invert(10%) sepia(90%) saturate(4763%) hue-rotate(357deg)
  117.             brightness(140%) contrast(114%) drop-shadow(0 0 0px red);
  118.         }
  119.         50% {
  120.           opacity: 0.3;
  121.           filter: invert(10%) sepia(90%) saturate(4763%) hue-rotate(357deg)
  122.             brightness(140%) contrast(114%) drop-shadow(0 0 4px red);
  123.         }
  124.         100% {
  125.           opacity: 0.1;
  126.           filter: invert(10%) sepia(90%) saturate(4763%) hue-rotate(357deg)
  127.             brightness(140%) contrast(114%) drop-shadow(0 0 0px red);
  128.         }
  129.       }
  131.       .diamond {
  132.         --_size: 2em;
  133.         --_ratio: 1.8;
  134.         --_speed: 2s;
  135.         --_clr-main: hsl(0, 100%, 50%);
  136.         --_clr-light: hsl(0, 100%, 90%);
  137.         --_clr-dark: hsl(0, 100%, 20%);
  139.         width: 0;
  140.         height: 0;
  141.         border: var(--_size) solid transparent;
  142.         border-bottom: calc(var(--_ratio) * var(--_size)) solid var(--_clr-main);
  143.         top: calc(0px - var(--_size));
  145.         animation: hueAni 12s linear infinite;
  147.         position: absolute;
  148.         left: 0;
  149.         right: 0;
  150.         top: 0;
  151.         bottom: 50%;
  152.         margin: auto;
  154.         transform-origin: 50% 100%;
  155.         opacity: 0.8;
  156.         transition: all 0.4s ease-in-out;
  157.       }
  158.       .box .diamond:hover {
  159.         opacity: 1;
  160.         scale: 1.2;
  161.       }
  162.       @keyframes hueAni {
  163.         0% {
  164.           filter: hue-rotate(0deg);
  165.           rotate: 0;
  166.         }
  167.         100% {
  168.           filter: hue-rotate(360deg);
  169.           rotate: -360deg;
  170.         }
  171.       }
  173.       .diamond::after {
  174.         content: '';
  175.         display: block;
  176.         position: absolute;
  177.         width: 4em;
  178.         left: -2em;
  179.         height: 7.2em;
  180.         z-index: -1;
  181.         border-radius: 100%;
  183.         background: var(--_clr-main);
  184.         opacity: 1;
  185.         filter: blur(20px);
  186.       }
  187.       .diamond::before {
  188.         content: '';
  189.         position: absolute;
  190.         left: calc(0px - var(--_size));
  191.         top: calc(var(--_ratio) * var(--_size) - 0px);
  192.         width: 0;
  193.         height: 0;
  194.         border: var(--_size) solid transparent;
  195.         border-top: calc(var(--_ratio) * var(--_size)) solid var(--_clr-main);
  196.       }
  198.       .diamond .t {
  199.         position: absolute;
  200.         right: calc(0.1px - var(--_size));
  201.         top: 0px;
  202.         width: 0;
  203.         height: 0;
  204.         border-bottom: calc(var(--_ratio) * var(--_size)) solid var(
  205.             --_clr-light
  206.           );
  207.         border-right: var(--_size) solid transparent;
  208.       }
  209.       .diamond .t::before {
  210.         content: '';
  211.         position: absolute;
  212.         left: calc(1px - var(--_size));
  213.         top: 0px;
  214.         width: 0;
  215.         height: 0;
  216.         border-left: var(--_size) solid transparent;
  218.         transform-origin: 100% 0%;
  220.         animation: ani-t var(--_speed) infinite linear reverse, ani-t2 var(
  221.               --_speed
  222.             ) infinite linear;
  223.       }
  224.       .diamond .t::after {
  225.         content: '';
  226.         position: absolute;
  227.         right: calc(0px - var(--_size));
  228.         top: 0px;
  229.         width: 0;
  230.         height: 0;
  231.         border-right: var(--_size) solid transparent;
  232.         transform-origin: 0% 0%;
  234.         animation: ani-t var(--_speed) infinite linear, ani-t2 var(--_speed) infinite
  235.             linear;
  236.       }
  238.       @keyframes ani-t {
  239.         0% {
  240.           transform: scaleX(0);
  241.         }
  242.         100% {
  243.           transform: scaleX(1);
  244.         }
  245.       }
  246.       @keyframes ani-t2 {
  247.         0% {
  248.           border-bottom: calc(var(--_ratio) * var(--_size)) solid var(
  249.               --_clr-main
  250.             );
  251.         }
  252.         100% {
  253.           border-bottom: calc(var(--_ratio) * var(--_size)) solid var(
  254.               --_clr-light
  255.             );
  256.         }
  257.       }
  259.       .diamond .b {
  260.         position: absolute;
  261.         left: calc(0.1px - var(--_size));
  262.         top: calc(var(--_ratio) * var(--_size));
  263.         width: 0;
  264.         height: 0;
  265.         border-top: calc(var(--_ratio) * var(--_size)) solid var(--_clr-dark);
  266.         border-left: var(--_size) solid transparent;
  267.       }
  268.       .diamond .b::before {
  269.         content: '';
  270.         position: absolute;
  271.         left: calc(1px - var(--_size));
  272.         top: calc(0px - var(--_size) * var(--_ratio));
  273.         width: 0;
  274.         height: 0;
  275.         border-left: var(--_size) solid transparent;
  276.         transform-origin: 100% 0%;
  278.         animation: ani-b var(--_speed) infinite linear reverse, ani-b2 var(
  279.               --_speed
  280.             ) infinite linear;
  281.       }
  282.       .diamond .b::after {
  283.         content: '';
  284.         position: absolute;
  285.         right: calc(0px - var(--_size));
  286.         top: calc(0px - var(--_size) * var(--_ratio));
  287.         width: 0;
  288.         height: 0;
  289.         border-right: var(--_size) solid transparent;
  290.         transform-origin: 0% 0%;
  292.         animation: ani-b var(--_speed) infinite linear, ani-b2 var(--_speed) infinite
  293.             linear;
  294.       }
  296.       @keyframes ani-b {
  297.         0% {
  298.           transform: scaleX(0);
  299.         }
  300.         100% {
  301.           transform: scaleX(1);
  302.         }
  303.       }
  304.       @keyframes ani-b2 {
  305.         0% {
  306.           border-top: calc(var(--_ratio) * var(--_size)) solid var(--_clr-dark);
  307.         }
  308.         100% {
  309.           border-top: calc(var(--_ratio) * var(--_size)) solid var(--_clr-main);
  310.         }
  311.       }
  312.     </style>
  313.   </head>
  314.   <body>
  315.     <div class="box">
  316.       <div class="diamond">
  317.         <span class="t"></span>
  318.         <span class="b"></span>
  319.       </div>
  320.       <div class="inset"></div>
  321.     </div>
  322.     <script>
  323.       const box = document.querySelector('.box');
  324.       let isPushed = false;
  325.       box.addEventListener('click', () => {
  326.         if (box.classList.contains('moving')) return;
  327.         box.classList.add('moving');
  328.         box.classList.remove('pushed', 'reverse');
  329.         void box.offsetWidth;
  330.         if (isPushed) {
  331.           box.classList.add('reverse');
  332.         } else {
  333.           box.classList.add('pushed');
  334.         }
  335.         isPushed = !isPushed;
  336.       });
  337.       box.addEventListener('animationend', () => {
  338.         box.classList.remove('moving');
  339.       });
  340.     </script>
  341.   </body>
  342. </html>
复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

自由的羽毛
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表