div+css布局绘制游戏《半条命》人物戈登·弗里曼效果代码-html代码-BFW代码库

div+css布局绘制游戏《半条命》人物戈登·弗里曼效果代码

代码语言：html

代码描述：div+css布局绘制游戏《半条命》人物戈登·弗里曼效果代码

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

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

<head>

  <meta charset="UTF-8">
 

  
  
<style>
:root {
  background-color: #e4c6a3;

  --hair-color: #821A06;
  --hair-gradient-color: linear-gradient(to top, #5D0F07 40%, #bb3618 80%);
  --orange-color: #e94916;
  --grey-dark-color: #363D38;
  --metal-gradient-color: linear-gradient(to top, #323634, #868d8f);
  --skin-color: #f19768;
  --skin-shadow-color: #ca7a4f;

  --beard-shape: polygon(10% 10%, 50% 0, 90% 10%, 100% 45%, 70% 100%, 30% 100%, 0 45%);
  --beard-inner-shape: polygon(0 20%, 50% 0, 100% 20%, 100% 70%, 70% 100%, 70% 70%, 30% 70%, 30% 100%, 0 70%);
}

body {
  margin: 0;
  background: var(--background-color);
}

.container {
  display: flex;
  justify-content: center;
  margin-top: 2em;
}

.gordon-freeman .head-container {
    width: 350px;
    height: 80px;
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 5;
    transform: translateY(40px);
  }

.gordon-freeman .head-container .head-shape {
      width: 60px;
      height: 80px;
      background: var(--skin-color);
      background-image:
        linear-gradient(172deg, var(--skin-shadow-color) 60%, var(--skin-color) 61%);
      display: flex;
      flex-direction: column;
      align-items: center;
      -webkit-clip-path: polygon(-25% -38.75%, 125% -38.75%, 100% 70%, 89.99% 83.77%, 71.66% 100%, 30% 100%, 9.12% 84.37%, 0px 70%);
              clip-path: polygon(-25% -38.75%, 125% -38.75%, 100% 70%, 89.99% 83.77%, 71.66% 100%, 30% 100%, 9.12% 84.37%, 0px 70%);
      position: absolute;
    }

.gordon-freeman .head-container .head {
      width: 60px;
      height: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

.gordon-freeman .head-container .head .hair {
        width: calc(100% + 10px);
        height: 160px;
        background: var(--hair-gradient-color);
        transform: translate(2px, -30px);
        -webkit-clip-path: polygon(0px 31%, 9% 31%, 7.91% 17.15%, 18.7% 18.2%, 65.58% 0.03%, 65.62% 7px, 88.4% 18.6%, 86.77% 31.85%, 98.93% 48.52%, 98.44% 62.11%, 90.46% 71.28%, 78.08% 60.6%, 64.36% 68.03%, 54.57% 59.25%, 41.50% 70.60%, 34.19% 49.08%, 9.32% 77.26%, 1px 103.03%);
                clip-path: polygon(0px 31%, 9% 31%, 7.91% 17.15%, 18.7% 18.2%, 65.58% 0.03%, 65.62% 7px, 88.4% 18.6%, 86.77% 31.85%, 98.93% 48.52%, 98.44% 62.11%, 90.46% 71.28%, 78.08% 60.6%, 64.36% 68.03%, 54.57% 59.25%, 41.50% 70.60%, 34.19% 49.08%, 9.32% 77.26%, 1px 103.03%);
      }

.gordon-freeman .head-container .head .glasses-container {
        width: 58px;
        position: absolute;
        display: flex;
        justify-content: space-between;
        transform: translateY(32px);
      }

.gordon-freeman .head-container .head .glasses-container .crystal {
          width: 24px;
          height: 12px;
          border: 2px solid #111;
          border-radius: 10px;
          background: linear-gradient(160deg, #F4E9D7 40%, #D9A29E 45%);
          position: relative;
          z-index: 1;
        }

.gordon-freeman .head-container .head .glasses-container .union {
          width: 20px;
          height: 6px;
          background: #000000;
          position: absolute;
          left: 35%;
        }

.gordon-freeman .head-container .head .beard {
        width: 32px;
        height: 27px;
        background: var(--hair-color);
        transform: translateY(7px) scale(1.1);
        -webkit-clip-path: var(--beard-shape);
                clip-path: var(--beard-shape);
        display: flex;
        justify-content: center;
        a.........完整代码请登录后点击上方下载按钮下载查看