css使用渐变绘制一个人物头像侧面效果代码-html代码-BFW代码库

css使用渐变绘制一个人物头像侧面效果代码

代码语言：html

代码描述：css使用渐变绘制一个人物头像侧面效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

   <meta name="viewport" content="width=device-width, initial-scale=1">



        <style>
            html {
              background: #0002;
            }
            
            .canvas {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 80vmin;
              aspect-ratio: 1;
            }
            
            .canvas div {
              position: absolute;
              background: linear-gradient(#0008, #0000);
            }
            
            .forehead {
              width: 30%;
              height: 10%;
              border-radius: 50% 150% 0 0;
              transform: rotate(-90deg);
              top: 20%;
              left: 20%;
            }
            
            .nose {
              width: 20%;
              height: 8%;
              border-radius: 2vmin 0 0 0;
              transform: rotate(-70deg);
              top: 46%;
              left: 23%;
            }
            
            .liptop {
              width: 6%;
              height: 8%;
              border-radius: 30% 0 0 0;
              transform: rotate(-90deg);
              top: 59%;
              left: 33%;
            }
            
            .lipbottom {
              width: 6%;
              height: 8%;
              border-radius: 80% 10% 0 0;
              transform: rotate(-90deg);
              top: 65%;
              left: 35%;
            }
            
            .chintop {
              width: 3%;
              height: 12%;
              transform: rotate(-90deg);
              top: 66.5%;
              left: 41.5%;
              opacity: 0.5;
            }
            
            .chin {
              width: 14%;
              height: 13%;
              border-radius: 100%;
              transform: rotate(-90deg);
              top: 72%;
              left: 35%;
            }
            
            .eyetop {
              width: 15%;
              height: 6%;
              border-radius: 0 100% 0 0;
              top: 38%;
              left: 35%;
              opacity: 0.6;
            }
            
            .eye {
              width: 5%;
              height: 10%;
              transform: rotate(-90deg);
              border-radius:  50% 2vmin 125% 20%;
              top: 38%;
              left: 39%;
              opacity: 0.75;
            }
            
            .hairtop {
              width: 18%;
              height: 50%;
              border-radius: 30vmin 50vmin 150% 0;
              transform: rotate(-90deg);
              top: -24%;
              left: 46%
            }
            
            .nostril {
              width: 5%;
              height: 5%;
              transform: rotate(120deg);
              border-radius: 50%;
              top: 55.5%;
              left: 31%;
            }
            
            .neck {
              width: 15%;
              height: 20%;
              transform: rotate(-90deg);
              top: 83%;
              left: 45%;
              -webkit-mask: radial-gradient(farthest-side at 0% 0%, #0000 99%, #000);
              mask: radial-gradient(farthest-side at 0% 0%, #0000, #000)
            }
            
            .jaw {
              width: 20%;
              height: 31%;
          .........完整代码请登录后点击上方下载按钮下载查看