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: #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.45vmin;
  left: -0.2vmin;
  border-radius: 0 0 0 11vmin;
}
.hair-8 {
  z-index: 2;
  width: 10vmin;
  height: 2vmin;
  background: #ffe4db;
  top: 83.1vmin;
  left: 70vmin;
}
.hair-8::before {
  width: 60vmin;
  height: 30vmin;
  background: #391833;
  top: -30vmin;
  left: -63.4vmin;
  border-radius: 94% 0 0 0;
}
.hair-8::after {
  width: 1vmin;
  height: 3vmin;
  background: #ffe4db;
  top: -2vmin;
  left: -64.3vmin;
  transform: rotate(-6deg);
}
.hair-9 {
  z-index: 2;
  width: 32.8vmin;
  height: 10vmin;
  background: #391833;
  top: 30vmin;
  left: -10.2vmin;
  transform: rotate(-38deg);
}
.hair-9::before {
  width: 60vmin;
  height: 30vmin;
  background: #ffe4db;
  top: 0.35vmin;
  left: -22.85vmin;
  transform: rotate(25deg) skewX(10deg);
  border-radius: 77% 0 0 0;
}
.hair-9::after {
  width: 21vmin;
  height: 9vmin;
  background: #ffe4db;
  top: 0.75vmin;
  left: -19.85vmin;
  transform: rotate(-12deg);
  border-radius: 50%;
}
.hair-10 {
  z-index: 2;
  width: 1vmin;
  height: 5vmin;
  background: #ffe4db;
  top: 73vmin;
  left: -64.6vmin;
  transform: rotate(8deg);
  border-radius: 50%;
}
.hair-10::before {
  width: 4vmin;
  height: 3vmin;
  background: #f8b6a0;
  top: -4.6vmin;
  left: 1vmin;
  transform: rotate(42deg) skewY(35deg) skewX(17deg);
  border-radius: 40% 0 40% 5%;
}
.hair-10::after {
  width: 6vmin;
  height: 30vmin;
  background: #f8b6a0;
  top: -28.6vmin;
  left: 10.75vmin;
  transform: rotate(49.5deg);
  border-radius: 50%;
}
.hair-11 {
  z-index: 2;
  width: 2vmin;
  height: 0.3vmin;
  background: #391833;
  top: 41.8vmin;
  left: -41.1vmin;
  transform: rotate(-36deg);
}
.hair-11::before {
  width: 10vmin;
  height: 2vmin;
  background: #f8b6a0;
  top: 0.5vmin;
  transform: rotate(1.5deg);
}
.hair-11::after {
  width: 40vmin;
  height: 20vmin;
  background: #391833;
  top: 0.8vmin;
  left: -19.3vmin;
  transform: skewX(2deg);
  border-radius: 58% 0 0 0;
}
.hair-12 {
  z-index: 2;
  width: 1vmin;
  height: 2vmin;
  background: #391833;
  top: 33vmin;
  left: -25.7vmin;
  transform: rotate(45deg);
}
.hair-12::before {
  width: 20vmin;
  height: 30vmin;
  background: #f8b6a0;
  left: 1.9vmin;
  border-radius: 0 0 0 50%;
}
.hair-12::after {
  width: 4vmin;
  height: 2vmin;
  background: #391833;
  top: 28vmin;
  left: 4.8vmin;
  transform: rotate(35deg);
}
.hair-13 {
  z-index: 2;
  width: 30vmin;
  height: 20vmin;
  background: #391833;
  top: 67.3vmin;
  left: -27vmin;
  transform: rotate(-50deg);
  border-radius: 50% 0 0 0;
}
.hair-13::before {
  width: 12vmin;
  height: 2vmin;
  background: #391833;
  top: -2.45vmin;
  left: 6vmin;
  transform: rotate(4.5deg);
}
.hair-13::after {
  width: 4vmin;
  height: 3vmin;
  background: #391833;
  top: -1.5vmin;
  left: 16vmin;
}
.hair-14 {
  z-index: 2;
  width: 40vmin;
  height: 40vmin;
  background: #391833;
  top: 45vmin;
  left: 23vmin;
  border-radius: 50% 0 0 0;
}
.hair-14::after {
  width: 80vmin;
  height: 15vmin;
  background: #ffe4db;
  top: 38vmin;
  left: -30vmin;
}
.hair-15 {
  width: 20vmin;
  height: 35vmin;
  background: #391833;
  top: -31vmin;
  left: -42.2vmin;
  border-radius: 10vmin 47% 0 0;
}
.hair-15::before {
  width: 20vmin;
  height: 35vmin;
  background: #ffe4db;
  top: 0.4vmin;
  left: 0.5vmin;
  border-radius: 9.7vmin 47% 0 0;
}
.hair-15::after {
  width: 20vmin;
  height: 35vmin;
  background: #391833;
  top: 0.3vmin;
  left: 1.3vmin;
  border-radius: 11vmin 47% 0 0;
}
.hair-16 {
  width: 10vmin;
  height: 9vmin;
  background: #391833;
  top: -56.5vmin;
  left: -48vmin;
  transform: rotate(4deg);
  border-radius: 10vmin 0 0 0;
}
.hair-16::before {
  width: 20vmin;
  height: 20vmin;
  background: #391833;
  top: 20vmin;
  left: -2vmin;
}
.hair-17 {
  z-index: 2;
  width: 10vmin;
  height: 16vmin;
  background: #ffe4db;
  top: -19.3vmin;
  left: -68.2vmin;
  border-radius: 0 30% 70% 0;
}
.hair-17::before {
  width: 0.6vmin;
  height: 6.5vmin;
  background: #ffe4db;
  top: -1.7vmin;
  left: 9.15vmin;
  transform: rotate(-8deg);
  border-radius: 50%;
}
.hair-17::after {
  width: 10vmin;
  height: 16vmin;
  background: #391833;
  top: 0.7vmin;
  left: -0.6vmin;
  border-radius: 0 30% 70% 0;
}
.hair-18 {
  z-index: 2;
  width: 5vmin;
  height: 16vmin;
  background: #391833;
  top: -30vmin;
  left: -64.7vmin;
  transform: rotate(-6deg);
  border-radius: 50%;
}
.hair-19 {
  z-index: 2;
  width: 10vmin;
  height: 16vmin;
  background: #ffe4db;
  top: -17.9vmin;
  left: -70.3vmin;
  border-radius: 0 30% 70% 0;
}
.hair-19::before {
  width: 5vmin;
  height: 15vmin;
  background: #ffe4db;
  top: 5vmin;
  left: 2.3vmin;
  transform: rotate(30deg);
  border-radius: 50%;
}
.hair-19::after {
  width: 8vmin;
  height: 20vmin;
  background: #ffe4db;
  top: -7.5vmin;
  left: 1.85vmin;
  transform: rotate(-5deg);
  border-radius: 50%;
}
.hair-20 {
  z-index: 2;
  width: 5vmin;
  height: 15vmin;
  background: #ffe4db;
  top: -40vmin;
  left: -67.1vmin;
  transform: rotate(-4deg);
}
.hair-20::before {
  width: 1vmin;
  height: 7vmin;
  background: #391833;
  top: 23.8vmin;
  left: -1.15vmin;
  transform: rotate(45deg);
  border-radius: 50%;
}
.hair-21 {
  width: 35vmin;
  height: 25vmin;
  background: #391833;
  top: 6vmin;
  left: -36vmin;
}
.hair-21::before {
  width: 20vmin;
  height: 20vmin;
  background: #391833;
  top: 10vmin;
  left: -5.5vmin;
  transform: rotate(32deg);
  border-radius: 0 0 0 42%;
}
.hair-21::after {
  width: 8vmin;
  height: 20vmin;
  background: #391833;
  top: 17vmin;
  left: -2.5vmin;
  transform: rotate(-44deg);
  border-radius: 50%;
}
.hair-22 {
  width: 10vmin;
  height: 10vmin;
  background: #391833;
  top: 43vmin;
  left: -56.7vmin;
  transform: rotate(-45deg);
}
.hair-22::before {
  width: 5vmin;
  height: 10vmin;
  background: #391833;
  top: 3vmin;
  left: -1.3vmin;
  transform: rotate(15deg);
}
.hair-22::after {
  width: 4vmin;
  height: 12vmin;
  background: #ffe4db;
  top: -1.2vmin;
  left: -4.4vmin;
  transform: rotate(13deg);
  border-radius: 50%;
}
.hair-23 {
  width: 10vmin;
  height: 15vmin;
  background: #ffe4db;
  top: 20vmin;
  left: -71.5vmin;
  transform: rotate(15deg);
  border-radius: 50%;
}
.hair-23::before {
  width: 10vmin;
  height: 15vmin;
  background: #391833;
  top: -1vmin;
  left: 0.3vmin;
  transform: rotate(-10deg);
  border-radius: 50%;
}
.hair-23::after {
  width: 8vmin;
  height: 17vmin;
  background: #391833;
  top: 2.5vmin;
  left: 2.2vmin;
  transform: rotate(-35deg);
  border-radius: 50%;
}
.hair-24 {
  width: 1vmin;
  height: 7vmin;
  background: #ffe4db;
  top: 35.1vmin;
  left: -76vmin;
  transform: rotate(-38deg);
  border-radius: 50%;
}
.hair-24::before {
  width: 2vmin;
  height: 9vmin;
  background: #391833;
  top: 0.3vmin;
  left: 0.35vmin;
  transform: rotate(2deg);
  border-radius: 50%;
}

.body-1 {
  z-index: 2;
  width: 2.7vmin;
  height: 24vmin;
  background: #f8b6a0;
  top: 26.8vmin;
  left: -24.8vmin;
  transform: rotate(53deg);
  border-radius: 50%;
}
.body-1::before {
  width: 1vmin;
  height: 6vmin;
  background: #f8b6a0;
  top: 18vmin;
  left: 1.35vmin;
  transform: rotate(3deg);
}
.body-1::after {
  width: 12.5vmin;
  height: 25vmin;
  background: #f8b6a0;
  top: -15vmin;
  left: -12.8vmin;
  transform: rotate(-35deg);
  border-radius: 50%;
}
.body-2 {
  width: 35vmin;
  height: 22vmin;
  background: #f8b6a0;
  top: 43vmin;
  left: -25vmin;
  transform: skewX(3deg);
  border-radius: 8.5vm.........完整代码请登录后点击上方下载按钮下载查看