css绘制可爱小老虎动物效果代码-html代码-BFW代码库

css绘制可爱小老虎动物效果代码

代码语言：html

代码描述：css绘制可爱小老虎动物效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          height: 100vh;
          width: 100vw;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .container {
          position: relative;
          background: #69d0ef;
          height: 70vmin;
          width: 70vmin;
          
          display: flex;
          align-items: center;
          justify-content: center;
        }
        
        .mouse-body {
          position: relative;
          align-self: end;
          
          border-bottom: 25vmin solid #fafafa;
          border-left: 6vmin solid transparent;
          border-right: 6vmin solid transparent;
        
          height: 0;
          width: 17vmin;
        }
        
        .mouse-body::after {
          position: absolute;
          content: '';  
          background: white;
          height: 30.5vmin;
          width: 41.5vmin;
          border-radius: 50% 50% 50% 50% / 65% 65% 35% 35% ;
          
          top: -14vmin;
          left: -12vmin;
        }
        
        .mouse-eyes {
          position: relative;
          background: black;
          height: 5vmin;
          width: 5vmin;
          border-radius: 50%;
          
          top: -2.5vmin;
          left: -2.5vmin;
          z-index: 1;
          
          box-shadow: 17.5vmin 0;
        }
        
        .mouse-eyes::after {
          position: absolute;
          content: '';
          background: white;
          height: 1.5vmin;
          width: 1.5vmin;
          border-radius: 50%;
          
          left: 2.5vmin;
          top: 1vmin;
          box-shadow: 17.5vmin 0 white;
        }
        
        .mouse-eyes::before {
          position: absolute;
          content: '';
          background: #f7dbe7;
          height: 2.5vmin;
          width: 3vmin;
          border-radius: 50%;
          
          top: 3vmin;
          left: -6vmin;
          box-shadow: 32vmin 0 #f7dbe7;  
        }
        
        .mouse-nose {
          position: relative;
          background: black;
          height: 3vmin;
          width: 3.8vmin;
          border-radius: 50% 50% 50% 50% / 26% 26% 74% 74%;
          
          top: -4.8vmin;
          left: 7vmin;
          z-index: 1;
        }
        
        .mouse-mouth {
          position: relative;
          background: transparent;
          height: 4vmin;
          width: 2vmin;
          border-radius: 50%;
          border-bottom: 0.5vmin solid black;
          border-right: .........完整代码请登录后点击上方下载按钮下载查看