纯css绘制超级玛丽头效果-html代码-BFW代码库

代码语言：html

代码描述：纯css绘制超级玛丽头效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
}

:root {
  --size: 150;
  --unit: calc((var(--size) / 383) * 1vmin);
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mario {
  height: calc(383 * var(--unit));
  width: calc(250 * var(--unit));
  position: fixed;
  top: 15%;
}
.mario * {
  position: absolute;
}
.mario .hat {
  height: 26%;
  width: 52%;
  background: #ff8185;
  background: linear-gradient(90deg, #ff8185 0%, #fc1c23 17%, #cd1d22 100%);
  top: 0%;
  left: 24%;
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  z-index: 4;
}
.mario .hat .logo {
  width: 34%;
  height: 38%;
  background: linear-gradient(180deg, white 60%, #757575 100%);
  left: 33%;
  top: 12%;
  border-radius: 50%;
  box-shadow: inset 1px 1px 5px #757575;
  border: 2px solid #cccccc;
}
.mario .hat .logo span:nth-of-type(1) {
  width: 45%;
  height: 65%;
  background: #cd1d22;
  left: 11%;
  top: 10%;
  z-index: 10;
  transform: rotate(30deg);
  clip-path: polygon(25% 100%, 20% 10%, 40% 20%, 65% 100%);
  -webkit-clip-path: polygon(25% 100%, 20% 10%, 40% 20%, 65% 100%);
}
.mario .hat .logo span:nth-of-type(2) {
  width: 45%;
  height: 65%;
  background: #cd1d22;
  left: 30%;
  top: 0%;
  z-index: 10;
  transform: rotate(-30deg);
  clip-path: polygon(25% 80%, 15% 20%, 34% 5%, 54% 67%);
  -webkit-clip-path: polygon(29% 80%, 12% 24%, 33% 5%, 59% 70%);
}
.mario .hat .logo span:nth-of-type(3) {
  width: 45%;
  height: 65%;
  background: #cd1d22;
  left: 35%;
  top: 0%;
  z-index: 10;
  transform: rotate(30deg);
  clip-path: polygon(60% 85%, 30% 75%, 49% 11%, 74% 30%);
  -webkit-clip-path: polygon(60% 85%, 30% 72%, 50% 13%, 74% 30%);
}
.mario .hat .logo span:nth-of-type(4) {
  width: 45%;
  height: 65%;
  background: #cd1d22;
  right: 6%;
  top: 10%;
  z-index: 10;
  transform: rotate(-30deg);
  clip-path: polygon(70% 95%, 30% 100%, 50% 30%, 75% 5%);
  -webkit-clip-path: polygon(70% 95%, 30% 100%, 50% 30%, 72% 5%);
}
.mario .hat .peak {
  height: 38%;
  width: 86%;
  top: 43%;
  left: 7%;
  background: linear-gradient(90deg, #f85e63 2%, #bd171d 10%, #cd1d22 100%);
  border-top: solid 5px #ff5555;
  border-radius: 50% 50% 0% 0%/ 100% 100% 0% 0%;
}
.mario .face {
  width: 38%;
  height: 27%;
  background: #b37963;
  background: linear-gradient(276deg, #b37963 25%, #fbbca4 54%, #ffd4c3 80%);
  left: 31%;
  top: 14.5%;
  border-radius: 50% 50% 50% 50% / 22% 22% 70% 70%;
  z-index: 5;
  overflow: hidden;
  box-shadow: inset 0px 2px 2px #865b49;
}
.mario .face #overlay {
  width: 100%;
  height: 20%;
  background: rgba(48, 37, 33, 0.2);
  filter: blur(1px);
  top: 0%;
  z-index: 20;
}
.mario .face .brow {
  width: 26%;
  height: 18%;
  left: 12%;
  top: 0%;
  background: #0f0613;
  border-radius: 32% 80% 0% 0% / 100% 100% 0% 0%;
}
.mario .face .brow span:nth-of-type(1) {
  width: 94%;
  height: 76%;
  border-radius: 50%;
  left: 3%;
  top: 70%;
  background: #b37963;
  background: linear-gradient(276deg, #fbbca4 54%, #ffd4c3 80%);
}
.mario .face .brow-right {
  width: 26%;
  height: 18%;
  right: 12%;
  top: 0%;
  background: #0f0613;
  border-radius: 32% 80% 0% 0% / 100% 100% 0% 0%;
  transform: scaleX(-1);
}
.mario .face .brow-right span:nth-of-type(1) {
  width: 94%;
  height: 76%;
  border-radius: 50%;
  right: 3%;
  top: 70%;
  background: #b37963;
  background: linear-gradient(-276deg, #b37963 86%, #e9ad96 100%);
}
.mario .chin {
  width: 42%;
  height: 20%;
  background: #b37963;
  background: linear-gradient(276deg, #b37963 25%, #fbbca4 54%, #ffd4c3 80%);
  top: 21%;
  left: 29%;
  border-radius: 100% 100% 100% 100%;
  z-index: 5;
}
.mario .chin .nose {
  width: 45%;
  height: 50%;
  top: 14%;
  left: 28%;
  border: calc(var(--unit) * 0.3) #f8c6b2 solid;
  background: #b37963;
  background: radial-gradient(circle at 32% 22%, #ffd4c3 1%, #fbbca4 54%, #b37963 80%);
  border-radius: 50%;
}
.mario .chin .nose .tash {
  width: 170%;
  height: 100%;
  top: -38%;
  left: -35%;
  background: #b37963;
  background: linear-gradient(276deg, #b37963 25%, #fbbca4 54%, #ffd4c3 80%);
  z-index: -2;
  border-radius: 50%;
}
.mario .chin .nose span:nth-of-type(1) {
  width: 49%;
  height: 78%;
  border-radius: 50%;
  left: -38%;
  top: 11%;
  transform: rotate(50deg);
  background: linear-gradient(0deg, #0f0613 3%, #2c1a1d 25%, #0f0613 100%);
  z-index: -10;
}
.mario .chin .nose span:nth-of-type(2) {
  width: 49%;
  height: 78%;
  border-radius: 50%;
  left: -18%;
  top: 33%;
  transform: rotate(30deg);
  background: linear-gradient(5deg, #0f0613 18%, #2c1a1d 29%, #0f0613 90%);
  z-index: -10;
}
.mario .chin .nose span:nth-of-type(3) {
  width: 49%;
  height: 78%;
  border-radius: 50%;
  left: 10%;
  top: 42%;
  transform: rotate(0deg);
  background: linear-gradient(0deg, #0f0613 18%, #2c1a1d 35%, #0f0613 90%);
  z-index: -10;
}
.mario .chin .nose span:nth-of-type(4) {
  width: 49%;
  height: 78%;
  border-radius: 50%;
  left: 40%;
  top: 42%;
  transform: rotate(0deg);
  background: #0f0613;
  z-index: -10;
}
.mario .chin .nose span:nth-of-type(5) {
  width: 40%;
  height: 70%;
  border-radius: 50%;
  right: -13%;
  top: 40%;
  transform: rotate(-30deg);
  background: linear-gradient(0deg, #0f0613 48%, #2c1a1d 80%, #0f0613 50%);
  z-index: -10;
}
.mario .chin .nose span:nth-of-type(6) {
  width: 49%;
  height: 78%;
  border-radius: 50%;
  right: -38%;
  top: 11%;
  transform: rotate(-50deg);
  background: radial-gradient(circle at 100% 0%, #0f0613 18%, #2c1a1d 25%, #0f0613 90%);
  z-index: -11;
}
.mario .chi.........完整代码请登录后点击上方下载按钮下载查看