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

纯css绘制超级玛丽头效果

代码语言：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%;
  ba.........完整代码请登录后点击上方下载按钮下载查看