div+css布局绘制长发飘飘美女背影效果代码-html代码-BFW代码库

div+css布局绘制长发飘飘美女背影效果代码

代码语言：html

代码描述：div+css布局绘制长发飘飘美女背影效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
html,
body {
  width: 100%;
  height: 100%;
  background: #ffe4db;
  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: 34.4vmin;
  height: 22vmin;
  background: #391833;
  top: -62vmin;
  left: -1.1vmin;
  transform: rotate(-18deg);
  border-radius: 13% 19.5vmin 0 0;
}
.hair-1::before {
  width: 5vmin;
  height: 25vmin;
  background: #391833;
  top: 12vmin;
  left: 30vmin;
  transform: rotate(-2deg);
  border-radius: 50%;
}
.hair-1::after {
  width: 35vmin;
  height: 40vmin;
  background: #391833;
  top: 21vmin;
  left: 2.2vmin;
  transform: rotate(-13deg);
}
.hair-2 {
  z-index: 2;
  width: 7vmin;
  height: 6vmin;
  background: #ffe4db;
  top: -67.7vmin;
  left: -30.9vmin;
  transform: rotate(3deg);
  border-radius: 50%;
}
.hair-2::before {
  width: 7vmin;
  height: 7vmin;
  background: #391833;
  top: -0.1vmin;
  left: 0.3vmin;
  border-radius: 50%;
}
.hair-2::after {
  width: 2vmin;
  height: 3vmin;
  background: #391833;
  top: -0.3vmin;
  left: 1.6vmin;
  transform: rotate(40deg);
}
.hair-3 {
  z-index: 2;
  width: 30vmin;
  height: 30vmin;
  background: #391833;
  top: 25.3vmin;
  left: 55.8vmin;
  transform: rotate(35deg);
  border-radius: 8.7vmin;
}
.hair-3::before {
  width: 30vmin;
  height: 30vmin;
  background: #ffe4db;
  top: 0.6vmin;
  left: -0.5vmin;
  transform: skewY(-2deg);
  border-radius: 30%;
}
.hair-3::after {
  width: 35vmin;
  height: 35vmin;
  background: #391833;
  top: 1.7vmin;
  left: -5.7vmin;
  border-radius: 30%;
}
.hair-4 {
  z-index: 2;
  width: 4vmin;
  height: 20vmin;
  background: #391833;
  top: 2vmin;
  left: 65.2vmin;
  transform: rotate(-50deg);
  border-radius: 0 0 30% 0;
}
.hair-4::before {
  width: 2vmin;
  height: 2vmin;
  background: #391833;
  top: 8.3vmin;
  left: 2.5vmin;
  transform: rotate(-5deg);
}
.hair-4::after {
  width: 13vmin;
  height: 3vmin;
  background: #391833;
  top: 25.9vmin;
  left: -18.6vmin;
  transform: rotate(-9.5deg);
  border-radius: 0 0 0 70%;
}
.hair-5 {
  z-index: 2;
  width: 5vmin;
  height: 23vmin;
  background: #ffe4db;
  top: -23.3vmin;
  left: 56.2vmin;
  transform: rotate(-30deg);
  border-radius: 50%;
}
.hair-5::before {
  width: 1vmin;
  height: 6vmin;
  background: #ffe4db;
  top: -0.1vmin;
  left: 0.75vmin;
  transform: rotate(10deg);
  border-radius: 50%;
}
.hair-5::after {
  width: 1vmin;
  height: 10vmin;
  background: #ffe4db;
  top: 20vmin;
  left: 3.1vmin;
  transform: rotate(-29deg);
  border-radius: 50% 50% 0 50%;
}
.hair-6 {
  z-index: 2;
  width: 9vmin;
  height: 0.5vmin;
  background: #ffe4db;
  top: 1.2vmin;
  left: 74vmin;
  transform: rotate(32deg);
  border-radius: 50% 50% 0 50%;
}
.hair-6::before {
  width: 20vmin;
  height: 14.5vmin;
  background: #391833;
  top: 25vmin;
  left: 5vmin;
  transform: rotate(-32deg);
}
.hair-6::after {
  width: 18vmin;
  height: 30vmin;
  background: #ffe4db;
  top: 6.4vmin;
  left: 17.8vmin;
  border-radius: 50%;
}
.hair-7 {
  z-index: 2;
  width: 12vmin;
  height: 12vmin;
  background: #391833;
  top: 65.8vmin;
  left: 77vmin;
  transform: rotate(67deg);
  border-radius: 0 0 0 10vmin;
}
.hair-7::before {
  width: 15vmin;
  height: 13vmin;
  background: #ffe4db;
  top: -2vmin;
  left: -2.2vmin;
  border-radius: 0 0 0 11vmin;
}
.hair-7::after {
  width: 13vmin;
  height: 10vmin;
  background: #ffe4db;
  top: 1.4.........完整代码请登录后点击上方下载按钮下载查看