css布局绘制教授头像效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局绘制教授头像效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
html *,
body * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
  content: "";
  position: absolute;
}

.hair-1 {
  z-index: 2;
  width: 16vmin;
  height: 30vmin;
  background: #000;
  top: -25.5vmin;
  left: 40.2vmin;
  transform: rotate(34deg);
  border-radius: 4.5vmin 11vmin 10vmin 0;
}
.hair-1::before {
  width: 17vmin;
  height: 17vmin;
  background: #000;
  top: -1vmin;
  left: -16.8vmin;
  transform: rotate(34deg);
  border-radius: 7.5vmin 0 10vmin 0;
}
.hair-1::after {
  width: 12vmin;
  height: 6vmin;
  background: #000;
  top: 10.7vmin;
  left: -10vmin;
  transform: rotate(-32deg);
  border-radius: 50%;
}
.hair-2 {
  z-index: 2;
  width: 10vmin;
  height: 1.5vmin;
  background: #fff;
  top: -74.3vmin;
  left: 21.5vmin;
  transform: rotate(-8deg);
}
.hair-2::before {
  width: 4vmin;
  height: 1vmin;
  background: #fff;
  top: 0.65vmin;
  left: 5vmin;
  transform: rotate(10deg);
}
.hair-3 {
  z-index: 2;
  width: 10vmin;
  height: 4vmin;
  background: #000;
  top: -43.4vmin;
  left: 5vmin;
  transform: rotate(14deg);
}
.hair-3::before {
  width: 25.5vmin;
  height: 12vmin;
  background: #000;
  top: -9.8vmin;
  left: -18.7vmin;
  transform: rotate(-30deg);
  border-radius: 100%;
  box-shadow: 4vmin 4vmin 0 0 #000;
}
.hair-3::after {
  width: 5vmin;
  height: 2.5vmin;
  background: #000;
  top: -12.4vmin;
  left: -0.4vmin;
  border-radius: 100% 0 100% 0;
}
.hair-4 {
  z-index: 4;
  width: 10vmin;
  height: 14.2vmin;
  background: #000;
  top: -28.5vmin;
  left: -12vmin;
  border-radius: 0 3vmin 10vmin 0;
}
.hair-4::before {
  width: 20vmin;
  height: 10vmin;
  background: #000;
  top: -8vmin;
  left: -16.3vmin;
  transform: rotate(-71deg);
  border-radius: 1vmin 100% 0 0;
  box-shadow: -4vmin 5vmin 0 2vmin #000;
}
.hair-4::after {
  width: 5vmin;
  height: 16vmin;
  background: #000;
  top: 3vmin;
  left: -14.8vmin;
  transform: rotate(6deg);
  border-radius: 2vmin 0 0 0;
}
.hair-5 {
  z-index: 4;
  width: 10vmin;
  height: 7.8vmin;
  background: #000;
  top: -7.5vmin;
  left: -30vmin;
  transform: rotate(-1deg);
  border-radius: 0 0 2vmin 0;
  box-shadow: -3vmin -2vmin 0 0 #000;
}
.hair-5::before {
  width: 10vmin;
  height: 15vmin;
  background: #000;
  top: -0.5vmin;
  left: -7.8vmin;
  border-radius: 0 0 0 1vmin;
  transform: rotate(15deg) skewY(49deg);
}
.hair-5::after {
  width: 14.5vmin;
  height: 25vmin;
  background: #000;
  top: 7vmin;
  left: -5.8vmin;
  border-radius: 0 0 0 9vmin;
}
.hair-6 {
  width: 8vmin;
  height: 4vmin;
  background: #000;
  top: 47vmin;
  left: -40.4vmin;
  border-radius: 0 0 0 74%;
}
.hair-6::before {
  width: 5vmin;
  height: 1.4vmin;
  background: #fff;
  top: 2.4vmin;
  left: 0.4vmin;
  transform: rotate(43deg);
  border-radius: 0.6vmin 0 0 2vmin;
}
.hair-6::after {
  width: 2.5vmin;
  height: 1vmin;
  background: #fff;
  top: 2.9vmin;
  left: 0.2vmin;
  transform: rotate(10deg);
}
.hair-7 {
  width: 5vmin;
  height: 5.8vmin;
  background: #000;
  top: 37.8vmin;
  left: -48.2vmin;
  border-radius: 0 0 0 62%;
}
.hair-7::before {
  width: 3vmin;
  height: 1.2vmin;
  background: #fff;
  top: 0.9vmin;
  left: -1vmin;
  transform: rotate(30deg);
  border-radius: 0 40% 20% 90%;
}
.hair-7::after {
  width: 1.3vmin;
  height: 2.5vmin;
  background: #000;
  top: 0.6vmin;
  left: 1.5vmin;
  transform: rotate(-10deg);
}
.hair-8 {
  z-index: 4;
  width: 3vmin;
  height: 2vmin;
  background: #fff;
  top: 31.3vmin;
  left: -53vmin;
  transform: rotate(-25deg);
}
.hair-8::before {
  width: 5.2vmin;
  height: 4.7vmin;
  background: #000;
  top: -2.7vmin;
  left: -0.6vmin;
  transform: rotate(3deg) skewY(15deg);
  border-radius: 0 0 0 4.5vmin;
}
.hair-8::after {
  width: 5vmin;
  height: 3.4vmin;
  background: #fff;
  top: -3.2vmin;
  left: -0.6vmin;
  transform: rotate(45deg);
  border-radius: 50%;
}
.hair-9 {
  z-index: 4;
  width: 4vmin;
  height: 4vmin;
  background: #fff;
  top: 24.8vmin;
  left: -58vmin;
  transform: skewY(15deg);
}
.hair-9::before {
  width: 2.6vmin;
  height: 2vmin;
  background: #000;
  top: 0.7vmin;
  left: 3.9vmin;
  transform: skewY(-15deg);
  border-radius: 50%;
}
.hair-9::after {
  width: 2vmin;
  height: 3.4vmin;
  background: #fff;
  top: 0.2vmin;
  left: 3.1vmin;
  transform: skewY(-15deg) rotate(55deg);
  border-radius: 50%;
}
.hair-10 {
  z-index: 4;
  width: 4.5vmin;
  height: 4vmin;
  background: #000;
  top: 21.7vmin;
  left: -54vmin;
  border-radius: 0 0 50% 0;
}
.hair-10::before {
  width: 4.5vmin;
  height: 4vmin;
  background: #fff;
  top: -0.2vmin;
  left: -1vmin;
  transform: skewX(-5deg);
  border-radius: 0 0 52% 0;
}
.hair-10::after {
  width: 2.7vmin;
  height: 0.5vmin;
  background: #fff;
  top: 3.4vmin;
  left: -0.9vmin;
  transform: rotate(-8deg);
  border-radius: 50%;
}
.hair-11 {
  z-index: 4;
  width: 4.5vmin;
  height: 5vmin;
  background: #000;
  top: 17.8vmin;
  left: -53.4vmin;
  border-radius: 0 0 90% 0;
}
.hair-11::before {
  width: 5.1vmin;
  height: 6vmin;
  background: #fff;
  top: -0.9vmin;
  left: -1.8vmin;
  transform: rotate(1deg);
  border-radius: 0 0 75% 0;
}

.ear-1 {
  z-index: 4;
  width: 5.6vmin;
  height: 2.8vmin;
  background: #fff;
  top: 1vmin;
  left: -41.6vmin;
  transform: rotate(-27deg) skewX(-25deg);
  border-radius: 1vmin 0.4vmin 1vmin 0;
}
.ear-1::before {
  width: 5vmin;
  height: 3.4vmin;
  background: #fff;
  top: 2.7vmin;
  border-radius: 0 35% 0 50%;
}
.ear-1::after {
  width: 5vmin;
  height: 0.9vmin;
  background: #fff;
  top: 6.1vmin;
  left: -1.2vmin;
  transform: rotate(55deg) skewX(55deg);
  border-radius: 0.5vmin 0 0 0.5vmin;
}
.ear-2 {
  z-index: 4;
  width: 4.7vmin;
  height: 8vmin;
  background: #fff;
  top: 16.6vmin;
  left: -37.1vmin;
  border-radius: 0 50% 0 50%;
}
.ear-2::before {
  width: 2.2vmin;
  height: 1vmin;
  background: #000;
  top: 6.8vmin;
  left: 1.8vmin;
  transform: rotate(-30deg);
  border-radius: 100%;
}
.ear-2::after {
  width: 2.4vmin;
  height: 1.5vmin;
  background: #fff;
  top: 5.8vmin;
  left: 1.8vmin;
  border-radius: 100%;
}
.ear-3 {
  z-index: 4;
  width: 2vmin;
  height: 2vmin;
  background: #fff;
  top: 13.3vmin;
  left: -42vmin;
  border-radius: 50%;
}
.ear-3::before {
  width: 3vmin;
  height: 2.5vmin;
  background: #000;
  top: 4.8vmin;
  left: 1vmin;
  border-radius: 0 100% 0 0;
}
.ear-3::after {
  width: 1.2vmin;
  height: 2.7vmin;
  background: #000;
  top: 3.4vmin;
  left: 0.6vmin;
  transform: rotate(-42deg);
}
.ear-4 {
  z-index: 4;
  width: 2vmin;
  height: 5vmin;
  background: #000;
  top: 5.4vmin;
  left: -42vmin;
  transform: rotate(10deg);
  border-radius: 30% 0 0 50%;
}
.ear-4::before {
  width: 1.8vmin;
  height: 5vmin;
  background: #fff;
  top: 0.1vmin;
  left: 1vmin;
  transform: rotate(5deg);
  border-radius: 50%;
}
.ear-5 {
  z-index: 4;
  width: 2.3vmin;
  height: 1.5vmin;
  background: #000;
  top: 16.8vmin;
  left: -37.6vmin;
  border-radius: 0 100% 55% 90%;
}
.ear-5::before {
  width: 2.4vmin;
  height: 1.5vmin;
  background: #fff;
  top: -0.2vmin;
  left: 0.2vmin;
  transform: skewX(16deg);
  border-radius: 0 100% 55% 90%;
}
.ear-6 {
  z-index: 4;
  width: 0.8vmin;
  height: 3.9vmin;
  background: #000;
  top: 13vmin;
  left: -41.2vmin;
  transform: rotate(-30deg);
  border-radius: 0 0 100% 0;
}
.ear-6::before {
  width: 0.4vmin;
  height: 4.8vmin;
  background: #fff;
  top: -0.8vmin;
  left: -0.15vmin;
  transform: rotate(2deg);
  border-radius: 50%;
}
.ear-7 {
  z-index: 4;
  width: 1.7vmin;
  height: 3.2vmin;
  background: #000;
  top: 5.9vmin;
  left: -38vmin;
  transform: rotate(-30deg);
  border-radius: 1.1vmin 0 0 1.2vmin;
}
.ear-7::before {
  width: 0.4vmin;
  height: 1.5vmin;
  background: #000;
  top: 2.4vmin;
  left: 0.75vmin;
  transform: rotate(-55deg);
  border-radius: 50%;
}
.ear-8 {
  z-index: 4;
  width: 0.9vmin;
  height: 1.8vmin;
  background: #000;
  top: 11.7vmin;
  left: -37.4vmin;
  transform: rotate(15deg);
  border-radius: 50%;
}
.ear-8::before {
  width: 1vmin;
  height: 1.9vmin;
  background: #fff;
  top: -0.45vmin;
  left: 0.3vmin;
  transform: rotate(-15deg);
  border-radius: 0 0 0 40%;
}
.ear-9 {
  z-index: 4;
  width: 2vmin;
  height: 1.7vmin;
  background: #000;
  top: 14.6vmin;
  left: -36.3vmin;
  border-radius: 40% 60% 0 50%;
}
.ear-9::after {
  width: 2.5vmin;
  height: 2vmin;
  background: #fff;
  top: 0.2vmin;
  left: -0.5vmin;
  transform: skewY(20deg) skewX(20deg) rotate(-12deg);
  border-radius: 0 100%;
}

.neck-1 {
  z-index: 4;
  width: 2.8vmin;
  height: 14vmin;
  background: #fff;
  top: 38.4vmin;
  left: -34vmin;
}
.neck-1::before {
  width: 10vmin;
  height: 1.5vmin;
  background: #000;
  top: 13.95vmin;
  left: -3.7vmin;
  transform: rotate(24deg);
  border-radius: 4vmin 0 0 2vmin;
}
.neck-1::after {
  width: 1.7vmin;
  height: 0.85vmin;
  background: #fff;
  top: 12.65vmin;
  left: -2.5vmin;
  transform: rotate(35deg);
  border-radius: 1vmin 0 0 1vmin;
}
.neck-2 {
  z-index: 4;
  width: 1vmin;
  height: 1.5vmin;
  background: #fff;
  top: 50.5vmin;
  left: -36.8vmin;
  transform: rotate(40deg);
}
.neck-2::before {
  width: 0.6vmin;
  height: 1.2vmin;
  background: #000;
  top: 0.15vmin;
  left: -0.35vmin;
  border-radius: 50%;
}
.neck-2::after {
  width: 0.7vmin;
  height: 12.6vmin;
  background: #000;
  top: -10.9vmin;
  left: -4.2vmin;
  transform: rotate(-40deg);
  border-radius: 0 60% 100% 0;
}
.neck-3 {
  z-index: 4;
  width: 8vmin;
  height: 1.15vmin;
  background: #fff;
  top: 54.2vmin;
  left: -32.5vmin;
  transform: rotate(26deg);
  border-radius: 52% 0 50% 10%;
}
.neck-3::before {
  width: 7vmin;
  height: 0.7vmin;
  background: #fff;
  top: -0.5vmin;
  left: 1.5vmin;
}

.beard-1 {
  z-index: 4;
  width: 5vmin;
  height: 14vmin;
  background: #000;
  top: 35vmin;
  left: -27.4vmin;
  border-radius: 0 0 0 20%;
}
.beard-1::before {
  width: 4.5vmin;
  height: 12vmin;
  background: #000;
  top: 10vmin;
  left: 2.5vmin;
  transform: rotate(-45deg);
  border-radius: 50%;
}
.beard-1::after {
  width: 1vmin;
  height: 2vmin;
  background: #000;
  top: 17vmin;
  left: 3.6vmin;
  transform: rotate(-5deg);
}
.beard-2 {
  width: 2vmin;
  height: 3vmin;
  background: #000;
  top: 60vmin;
  left: -24.5vmin;
  transform: rotate(50deg);
}
.beard-2::before {
  width: 11vmin;
  height: 16vmin;
  background: #000;
  top: -16vmin;
  left: -8vmin;
  transform: rotate(-80deg);
}
.beard-2::after {
  width: 26vmin;
  height: 12vmin;
  background: #000;
  top: -18.5vmin;
  left: -5.5vmin;
  transform: rotate(-50deg) skewX(-24deg);
  border-radius: 0 3vmin 3vmin 0;
}
.beard-3 {
  width: 1.5vmin;
  height: 10vmin;
  background: #000;
  top: 52vmin;
  left: 30.9vmin;
  transform: rotate(31deg);
  border-radius: 0 100% 15% 0;
}
.beard-3::before {
  width: 1.7vmin;
  height: 8vmin;
  background: #000;
  top: 4vmin;
  left: -0.1vmin;
  transform: rotate(-0.5deg);
  border-radius: 50%;
}
.beard-3::after {
  width: 7vmin;
  height: 1.1vmin;
  background: #000;
  top: 12.7vmin;
  left: -5.25vmin;
  transform: rotate(-31deg) skewX(-20deg);
  border-radius: 0 0 2vmin 0;
}
.beard-4 {
  width: 4vmin;
  height: 4vmin;
  background: #000;
  top: 63vmin;
  left: 12.5vmin;
}
.beard-4::before {
  width: 8vmin;
  height: 1.5vmin;
  background: #fff;
  top: 2.75vmin;
  left: 1.5vmin;
  transform: skewX(-25deg);
  border-radius: 2vmin 0 0 0;
}
.beard-4::after {
  width: 9.4vmin;
  height: 10vmin;
  background: #000;
  top: -17vmin;
  left: 5.1vmin;
  transform: rotate(18deg);
}
.beard-5 {
  width: 2vmin;
  height: 6vmin;
  background: #fff;
  top: 32vmin;
  left: 40.6vmin;
  transform: rotate(12deg);
}
.beard-5::before {
  width: 1vmin;
  height: 2vmin;
  background: #fff;
  top: 9vmin;
  left: -0.35vmin;
  transform: rotate(-1deg);
}
.beard-5::after {
  width: 1.5vmin;
  height: 5vmin;
  background: #000;
  top: 1.9vmin;
  left: -11.4vmin;
  transform: rotate(36deg);
  border-radius: 50%;
}
.beard-6 {
  width: 12vmin;
  height: 5.5vmin;
  background: #000;
  top: 36.5vmin;
  left: 12.8vmin;
  transform: skewX(-33deg);
  border-radius: 35% 0 0 0;
}
.beard-6::before {
  width: 5.5vmin;
  height: 1.2vmin;
  background: #fff;
  top: -0.1vmin;
  left: -0.6vmin;
  border-radius: 100% 0;
}
.beard-6::after {
  width: 2vmin;
  height: 2vmin;
  background: #000;
  top: -1.2vmin;
  left: 6vmin;
}

.shirt-1 {
  width: 12vmin;
  height: 6vmin;
  background: #000;
  top: 61.6vmin;
  left: -37vmin;
  transform: rotate(35deg);
  border-radius: 0 0 100% 0;
}
.shirt-1::before {
  width: 1vmin;
  height: 6vmin;
  background: #fff;
  left: -0.55vmin;
  transform: rotate(-1deg);
  border-radius: 50%;
}
.shirt-1::after {
  width: 7.5vmin;
  height: 2.5vmin;
  background: #000;
  top: -0.7vmin;
  left: 3vmin;
  transform: rotate(-12deg);
}
.shirt-2 {
  width: 17.5vmin;
  height: 4vmin;
  background: #000;
  top: 69.5vmin;
  left: -5.4vmin;
  border-radius: 50%;
}
.shirt-2::before {
  width: 20vmin;
  height: 5vmin;
  background: #000;
  top: -2vmin;
  left: -3vmin;
}
.shirt-2::after {
  width: 5vmin;
  height: 4vmin;
  background: #fff;
  left: 16.3vmin;
  transform: skewX(-26deg);
  border-radius: 1vmin 0 0 0;
}
.shirt-3 {
  width: 1.2vmin;
  height: 8.4vmin;
  background: #000;
  top: 65.1vmin;
  left: -55.4vmin;
  transform: rotate(47deg);
  border-radius: 50%;
}
.shirt-3::before {
  width: 2vmin;
  height: 7vmin;
  background: #000;
  top: 1.4vmin;
  left: 1.1vmin;
  transform: rotate(10deg) skewY(-15deg);
  border-radius: 0 0 100% 0;
}
.shirt-3::after {
  width: 2vmin;
  height: 1vmin;
  background: #fff;
  top: 8.35vmin;
  left: -0.5vmin;
  transform: rotate(5deg);
}
.shirt-4 {
  width: 10vmin;
  height: 4vmin;
  background: #000;
  top: 64.2vmin;
  left: -46vmin;
  border-radius: 80% 0 0 0;
}
.shirt-4::before {
  width: 2vmin;
  height: 2vmin;
  background: #000;
  top: -0.2vmin;
  left: 2.7vmin;
  border-radius: 20% 0 0 0;
}
.shirt-4::after {
  width: 20.7vmin;
  he.........完整代码请登录后点击上方下载按钮下载查看