div+css布局绘制杰克船长头像效果代码-html代码-BFW代码库

代码语言：html
代码描述：div+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;
}

.hat-1 {
  width: 31vmin;
  height: 20vmin;
  background: #000;
  top: -63vmin;
  left: -1vmin;
  border-radius: 37% 0 0 0;
}
.hat-1::before {
  width: 3vmin;
  height: 5vmin;
  background: #000;
  top: -2.2vmin;
  left: 27vmin;
}
.hat-1::after {
  width: 5.5vmin;
  height: 3vmin;
  background: #fff;
  top: -2.7vmin;
  left: 22.7vmin;
  transform: skewX(-35deg) skewY(10deg);
  border-radius: 0 0 30% 0;
}
.hat-2 {
  width: 5.3vmin;
  height: 4.7vmin;
  background: #000;
  top: -68vmin;
  left: 32.5vmin;
  border-radius: 0 0 5% 0;
}
.hat-2::before {
  width: 7vmin;
  height: 4vmin;
  background: #fff;
  transform: rotate(3deg);
  border-radius: 50%;
}
.hat-2::after {
  width: 3vmin;
  height: 1vmin;
  background: #fff;
  top: 3vmin;
  left: 3.9vmin;
  transform: rotate(40deg);
}
.hat-3 {
  width: 5vmin;
  height: 3vmin;
  background: #000;
  top: -69vmin;
  left: 29.7vmin;
  transform: skewX(15deg);
  border-radius: 50%;
}
.hat-3::before {
  width: 5vmin;
  height: 1vmin;
  background: #fff;
  top: -0.7vmin;
  left: 3vmin;
}
.hat-3::after {
  width: 4vmin;
  height: 2vmin;
  background: #000;
  top: 2vmin;
  left: -1.6vmin;
  transform: skewX(15deg);
}
.hat-4 {
  width: 5vmin;
  height: 4.4vmin;
  background: #000;
  top: -71.2vmin;
  left: 29.3vmin;
  transform: skewX(10deg);
  border-radius: 0 100% 30% 0;
}
.hat-4::before {
  width: 5vmin;
  height: 5vmin;
  background: #fff;
  top: -4vmin;
  left: 1.1vmin;
  transform: skewX(-22deg);
  border-radius: 0 0 0 100%;
}
.hat-4::after {
  width: 2vmin;
  height: 2.5vmin;
  background: #fff;
  top: -6.4vmin;
  left: 2.2vmin;
  transform: skewX(-20deg);
}
.hat-5 {
  width: 0.8vmin;
  height: 3vmin;
  background: #000;
  top: -84.5vmin;
  left: 25.8vmin;
  transform: rotate(15deg);
  border-radius: 50%;
}
.hat-5::before {
  width: 7.2vmin;
  height: 11vmin;
  background: #000;
  top: 2.6vmin;
  left: 9.4vmin;
  transform: rotate(-42deg);
}
.hat-5::after {
  width: 10vmin;
  height: 5vmin;
  background: #fff;
  top: 0.35vmin;
  left: 6vmin;
  transform: rotate(-4deg);
}
.hat-6 {
  width: 3vmin;
  height: 4.7vmin;
  background: #000;
  top: -65.6vmin;
  left: 53.4vmin;
  transform: rotate(-28deg);
  border-radius: 50%;
}
.hat-6::before {
  width: 0.95vmin;
  height: 6vmin;
  background: #fff;
  top: -3.5vmin;
  left: -5.5vmin;
  transform: rotate(-4.5deg);
  border-radius: 50%;
}
.hat-6::after {
  width: 1.1vmin;
  height: 5.4vmin;
  background: #fff;
  top: 1vmin;
  left: -5.8vmin;
  transform: rotate(10deg);
  border-radius: 50%;
}
.hat-7 {
  width: 5vmin;
  height: 2vmin;
  background: #fff;
  top: -74vmin;
  left: 39vmin;
}
.hat-7::before {
  width: 1.35vmin;
  height: 3.9vmin;
  background: #fff;
  top: 4.9vmin;
  left: 8.2vmin;
  transform: rotate(22deg);
  border-radius: 2vmin;
}
.hat-7::after {
  width: 1.3vmin;
  height: 1.5vmin;
  background: #fff;
  top: 4.8vmin;
  left: 8.75vmin;
  transform: rotate(22deg);
  border-radius: 50%;
}
.hat-8 {
  width: 1.5vmin;
  height: 6vmin;
  background: #000;
  top: -54vmin;
  left: 49vmin;
  transform: rotate(33deg);
}
.hat-8::before {
  width: 2vmin;
  height: 4vmin;
  background: #fff;
  top: -1.4vmin;
  left: 1.5vmin;
  border-radius: 1.4vmin 0 0 0;
}
.hat-8::after {
  width: 2vmin;
  height: 4vmin;
  background: #fff;
  top: -4vmin;
  left: 1.65vmin;
  transform: rotate(2.5deg);
}
.hat-9 {
  width: 1vmin;
  height: 5vmin;
  background: #fff;
  top: -57.6vmin;
  left: 48.9vmin;
  transform: rotate(30deg);
  border-radius: 0 0 20% 10%;
}
.hat-9::before {
  width: 1vmin;
  height: 6vmin;
  background: #fff;
  left: 0.35vmin;
  transform: rotate(5deg);
  border-radius: 50%;
}
.hat-9::after {
  width: 0.5vmin;
  height: 3vmin;
  background: #fff;
  top: 4.7vmin;
  left: 0.3vmin;
  transform: rotate(13deg);
  border-radius: 50%;
}
.hat-10 {
  width: 1.1vmin;
  height: 4vmin;
  background: #000;
  top: -49vmin;
  left: 47vmin;
  transform: rotate(22deg);
  border-radius: 40% 0 0 0;
}
.hat-10::before {
  width: 0.7vmin;
  height: 2vmin;
  background: #fff;
  top: -0.8vmin;
  left: -1vmin;
  transform: rotate(30deg);
  border-radius: 0 100% 0 0;
}
.hat-10::after {
  width: 2vmin;
  height: 5vmin;
  background: #000;
  top: 1.8vmin;
  left: -0.25vmin;
  transform: rotate(-16deg);
  border-radius: 12% 0 0 60%;
}
.hat-11 {
  width: 10vmin;
  height: 4vmin;
  background: #000;
  top: -44.3vmin;
  left: 36vmin;
  transform: rotate(-23deg);
}
.hat-11::before {
  width: 1.4vmin;
  height: 3vmin;
  background: #fff;
  top: 3.95vmin;
  left: 7.4vmin;
  border-radius: 50%;
}
.hat-11::after {
  width: 2vmin;
  height: 4vmin;
  background: #fff;
  top: 5vmin;
  left: 8.5vmin;
  transform: rotate(55deg);
}
.hat-12 {
  width: 4vmin;
  height: 2vmin;
  background: #fff;
  top: -38vmin;
  left: 46.5vmin;
}
.hat-12::before {
  width: 10vmin;
  height: 2vmin;
  background: #fff;
  top: -4vmin;
  left: -7.5vmin;
  transform: rotate(-26deg);
  border-radius: 0 0 100% 0;
}
.hat-12::after {
  width: 10vmin;
  height: 2vmin;
  background: #fff;
  top: -5vmin;
  left: -8.5vmin;
  transform: rotate(-26deg);
  border-radius: 0 0 30% 0;
}
.hat-13 {
  width: 3vmin;
  height: 13vmin;
  background: #000;
  top: -51.6vmin;
  left: 29.3vmin;
  transform: rotate(9deg);
}
.hat-13::before {
  width: 2.5vmin;
  height: 4.2vmin;
  background: #000;
  top: -0.5vmin;
  left: 1.8vmin;
  transform: rotate(14deg);
  border-radius: 60% 0 50% 0;
}
.hat-13::after {
  width: 2.5vmin;
  height: 4.5vmin;
  background: #fff;
  top: -0.5vmin;
  left: 3.3vmin;
  transform: rotate(8deg);
  border-radius: 100% 0 0 0;
}
.hat-14 {
  width: 15vmin;
  height: 6vmin;
  background: #000;
  top: -41vmin;
  left: 14.5vmin;
  transform: rotate(-3deg);
  border-radius: 0 0 22% 0;
}
.hat-14::before {
  width: 12vmin;
  height: 5vmin;
  background: #000;
  top: 2.7vmin;
  left: -7.7vmin;
  transform: rotate(-25deg);
  border-radius: 50%;
}
.hat-14::after {
  width: 5vmin;
  height: 5vmin;
  background: #000;
  top: 5vmin;
  left: -7.8vmin;
  transform: rotate(10deg) skewX(-35deg);
}
.hat-15 {
  width: 13.5vmin;
  height: 10vmin;
  background: #000;
  top: -30vmin;
  left: -21.8vmin;
}
.hat-15::before {
  width: 21vmin;
  height: 5vmin;
  background: #000;
  top: -3vmin;
  left: -1vmin;
}
.hat-15::after {
  width: 21vmin;
  height: 8vmin;
  background: #000;
  top: -0.4vmin;
  left: -19.8vmin;
  transform: rotate(-2deg) skewX(10deg);
  border-radius: 15% 0 30.5% 60%;
}
.hat-16 {
  width: 22vmin;
  height: 7vmin;
  background: #000;
  top: -69.5vmin;
  left: -27.2vmin;
  transform: rotate(-32.3deg);
  border-radius: 50%;
}
.hat-16::before {
  width: 15vmin;
  height: 5vmin;
  background: #000;
  top: 0.8vmin;
  left: -5vmin;
  transform: rotate(1deg);
  border-radius: 20% 0 0 0;
}
.hat-16::after {
  width: 20vmin;
  height: 7vmin;
  background: #000;
  top: 0.9vmin;
  left: -15vmin;
  transform: rotate(-6deg);
  border-radius: 50%;
}
.hat-17 {
  width: 10vmin;
  height: 3vmin;
  background: #000;
  top: -42.8vmin;
  left: -67.6vmin;
  transform: rotate(-34deg);
  border-radius: 50%;
}
.hat-17::before {
  width: 20vmin;
  height: 10vmin;
  background: #000;
  top: 2vmin;
  left: 7vmin;
}

.hair-1 {
  width: 15vmin;
  height: 20vmin;
  background: #000;
  top: -12vmin;
  left: -23.5vmin;
  transform: rotate(12deg);
  border-radius: 0 20% 0 10%;
}
.hair-1::before {
  width: 20.2vmin;
  height: 20vmin;
  background: #000;
  top: 15vmin;
  left: 1.1vmin;
  transform: rotate(-8.5deg);
  border-radius: 10% 0 0 0;
}
.hair-1::after {
  width: 10vmin;
  height: 22vmin;
  background: #000;
  top: 0.6vmin;
  left: 9.35vmin;
  transform: rotate(-24deg) skewY(10deg);
}
.hair-2 {
  width: 6.5vmin;
  height: 20vmin;
  background: #000;
  top: -11.5vmin;
  left: 48vmin;
  transform: skewY(-5deg);
  border-radius: 0 50% 0 0;
}
.hair-2::before {
  width: 7vmin;
  height: 2vmin;
  background: #000;
  top: 1.6vmin;
  left: 2.2vmin;
  transform: rotate(34deg) skewX(-30deg);
}
.hair-2::after {
  width: 3.5vmin;
  height: 1vmin;
  background: #000;
  top: 4.6vmin;
  left: 7.3vmin;
  transform: rotate(50deg) skewX(40deg) skewY(-5deg);
  border-radius: 0 100% 0 0;
}
.hair-3 {
  width: 2.2vmin;
  height: 4.8v.........完整代码请登录后点击上方下载按钮下载查看