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