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