css绘制小动物艺术nft效果代码-html代码-BFW代码库

css绘制小动物艺术nft效果代码

代码语言：html

代码描述：css绘制小动物艺术nft效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body {
        
        }
        
        .body,
        .body::before,
        .body::after,
        .legs,
        .legs::before,
        .neck,
        .head,
        .head::before,
        .head::after {
          position: absolute;
        }
        
        .body::before,
        .body::after,
        .legs::before,
        .head::before,
        .head::after {
          content: '';
        }
        
        .section-art {
          min-height: 100vh;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .art-container {
          height: 400px;
          width: 400px;
          position: relative;
        }
        
        .section-art .body {
          top: 50%;
          transform: translateY(-50%);
          height: 120px;
          width: 240px;
          border-radius: 0 0 120px 120px;
          background-image: linear-gradient(to right, #a8c4db, #a8c4db 50%, #c3d3e4 50%, #c3d3e4);
          transform-style: preserve-3d;
        }
        .section-art .body::before {
          height: 85%;
          width: 85%;
          border-radius: 0 0 100px 100px;
          left: 50%;
          transform: translateX(-50%);
          background-image: linear-gradient(to right, #9d8375, #9d8375 50%, #b3a29a 50%, #b3a29a);
        }
        
        .section-art .body::after {
          height: 20px;
          width: 30px;
          background-color: #998378;
          border-radius: 0 0 0 20px;
          z-index: -1;
          left: -20px;
          transform: translateZ(-10px)
        }
        
  .........完整代码请登录后点击上方下载按钮下载查看