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

代码语言:html

所属分类:布局界面

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

代码标签: 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%, #00.........完整代码请登录后点击上方下载按钮下载查看

网友评论0