div+css布局卡通人绳子吊起来看电脑代码-html代码-BFW代码库

div+css布局卡通人绳子吊起来看电脑代码

代码语言：html

代码描述：div+css布局卡通人绳子吊起来看电脑代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">





    <style>
        body {
          overflow: hidden;
        }
        
        @keyframes rotate {
          0%, 100% {
            transform: rotate3d(0,1,0,0deg);
            rotate: 0;
          }
          30% {
            rotate: -3deg;
          }
          50% {
            transform: rotate3d(0,1,0,5deg);
          }
        }
        
        #secne {
          font-size: 1vmin;
          width: 90em;
          aspect-ratio: 1;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50% 50% 0 0;
          background:
            /* floor */
            radial-gradient(100% 100% at 56% 100%, #fff0 75%, #ffff 0),
            repeating-linear-gradient(-25deg, #0000 0 9.75%, #c9c7 0 10%) 100% 100% / 86% 80%,
             repeating-linear-gradient(25deg, #0000 0 9.75%, #c9c7 0 10%) 100% 50% / 80% 86%,
            radial-gradient(45% 25% at 50% 70%, #ccc4 99%, #ccc0 0),
            #f000;
          background-repeat: no-repeat;
          
          &::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 63em;
            height: 63em;
            transform: skewY(25deg);
            background:
              /* monitor cheating :P */
              linear-gradient(-85deg, #0000 20%, #ba9 0 80%, #0000 0) 44% 46% / 10% 20%,
              linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 46% 44% / 10% 20%,
              linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 45.5% 44.5% / 10% 20%,
              linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 45% 45% / 10% 20%,
              linear-gradient(-85deg, #0000 20%, #cba 0 80%, #0000 0) 44.5% 45.5% / 10% 20%,
              
              linear-gradient(#dcb 0 0) 48% 27% / 35% 30%,
              linear-gradient(#edc 0 0) 50% 25% / 35% 30%,
              linear-gradient(#edc 0 0) 49.5% 25.5% / 35% 30%,
              linear-gradient(#edc 0 0) 49% 26% / 35% 30%,
              linear-gradient(#edc 0 0) 48.5% 26.5% / 35% 30%,
              
              linear-gradient(-45deg, #0000 22%, #a98 0 78%, #0000 0) 18.5em calc(100% - 25em) / 19em 6em,
              linear-gradient(-45deg, #0000 22%, #987 0 78%, #0000 0) 18.5em calc(100% - 24.5em) / 19em 6em,
              
              /* table back */
              linear-gradient(#445 0 0) 4em calc(100% - 4em) / 40em 20em,
              linear-gradient(#445 0 0) 4em calc(100% - 2em) / 2em 2.5em,
              linear-gradient(#445 0 0) 42em calc(100% - 2em) / 2em 2.5em,
              /* table side */
              linear-gradient(-45deg, #0000 35%, #334 0 66.6%, #0000 0) 43.9em calc(100% - 4em) / 20em 40em,
              linear-gradient(-45deg, #0000 25%, #334 0 66.6%, #0000 0) 6em calc(100% - 2em) / 2em 5em,
              linear-gradient(-45deg, #0000 25%, #334 0 66.6%, #0000 0) 43.9em calc(100% - 2em) / 2em 6em,
              linear-gradient(-45deg, #0000 25%, #334 0 66.6%, #0000 0) 60.9em calc(100% - 19.5em) / 2.1em 6em,
              linear-gradient(#223 0 0) calc(100% - 2em) calc(100% - 19.5em) / 2em 3em,
              /* table top */
              linear-gradient(-45deg, #0000 24.1%, #556 0 75.6%, #0000 0) 4em calc(100% - 23.9em) / 59em 19.1em,
              /* table shadow */
              linear-gradient(-45deg, #0000 23%, #ccc4 0 63.5%, #0000 0) 0em 100% / 65em 35em,
              #f000;
            background-repeat: no-repeat;
          }
          
          &::after {
            --skin: #fca;
            --hair: #420;
            content: "";
            width: 80%;
            height: 60%;
            position: absolute;
            top: 5%;
            left: 37%;
            atransform: skewY(-20deg);
            animation: rotate 3s alternate infinite;
            transform-origin: 52% 0;
            background: 
              /* rope */
              repeating-linear-gradient(45deg, #ddd 0 2%, #ccc 0 2.5%) 52% 0 / 1% 56% no-repeat,
              /* belt */
              radial-gradient(70% 100% at 10% 55%, #0000 49%, #ccc 0 60%, #0000 0) 55% 65.3% / 10% 16.8%,
              /* expression */
              radial-gradient(circle at 25% 56%, #000 0.5em, #0000 0),
              radial-gradie.........完整代码请登录后点击上方下载按钮下载查看